When I was in middle school, I made my first website for a class project. I chose a unique font that looked awesome, and made my text fit perfectly in the layout. I was proud of my impeccable design. When it was finally time to show off my website at school, I was mortified to see that my beautiful font had been replaced by a generic font that completely ruined the layout that I meticulously created. I learned the hard way that just because I have a cool font on my computer, does not mean that I can expect everyone else to have that font, too.
Typography, or the appearance of text, is an issue that all Web developers struggle to find a happy solution for. The root of the problem is the fact that no two computers are exactly alike. Everyone has different operating systems, software, browsers, and most importantly, fonts. Accommodating these numerous variances is tricky, but we have discovered methods of presenting text that look beautiful no matter what.
Typekit
The developers at Etna Interactive utilize a service called Typekit. Typekit uses JavaScript to display unique fonts on any computer, including mobile devices and tablets, regardless of what fonts the user has installed on their computer. We love to use Typekit for visually interesting titles, buttons, links, and more. Because every browser displays fonts with subtle differences, Typekit isn’t the best solution when the layout requires precise text presentation.
Image Replacement
Replacing text with images is a tried-and-true approach that we take advantage of when we really need text to display exactly how the designer intended. We take special care to make sure these images are still able to be read by screen readers and search engines. Image replacement opens up a world of creativity for web design, but should be used sparingly because images are not as easy to update as plain HTML text.
Web-Safe Fonts
We can count on the vast majority of computers to have certain fonts installed. Known as “Web-safe fonts”, these include familiar, easy-to-read typefaces such as Arial and Times New Roman. We use these fonts without hesitation, especially for paragraph text. While Web-safe fonts are useful for the bulk of a website’s content, they are generally not celebrated for their beauty. We typically substitute Typekit in areas where we want to make an impression.
Every once in a while, during the process of building a new website, we find that none of these methods work perfectly for a particular part of the design. In that case, we collaborate with the designer to find a solution that is functional and aesthetically pleasing. Beautiful typography for the Web is challenging, but the end results are always worth the extra effort.
Leave a Comment