Any font will look great on the web, right? WRONG! Not every font you use in print translates well onto the web. Typography on the web can be unpredictable and tricky. It’s sometimes considered more difficult to work with fonts for websites because the rendering cannot be tweaked exactly to perfection 100% of the time (which can be a big annoyance to my fellow perfectionists who like things to be just so.)
Web typography takes a little more effort and time to get things exactly as we imagine they should be, and even then our desired outcome is not always guaranteed. There are many factors and variables that go into web typography that make it differ from print typography. Things such as stroke thickness, line length, and even what browser the reader is using have to be taken into account for typography on the web. When all of these variables are realized and mastered, then a great website can be made!
The first thing to realize when working on the web is that browsers, monitors, and computer operating systems can render fonts differently, even when the coding is all the same. You can see in this example below how the same text can change slightly depending on what browser the viewer is using.
This is what is so unpredictable about web typography, but it is something we just have to accept and live with. Because of this, it’s best to test your websites on as many different browsers and monitors as possible to make sure that nothing weird is happening anywhere with your typography.
Web safe fonts are structured differently than fonts to be used in print. To avoid eye strain, it is important for web fonts to have thicker strokes, large x-height, and bigger bowls and counters. The letter shapes should be distinct, making the difference between characters obvious and easy to read. The line length should be limited and text should typically be flushed left to keep things readable and to avoid the unthinkables, like rivers. You can learn more about the structure of web fonts and how they differ from other type in this article. Basically, everything that goes into making web fonts distinct and different from fonts used for print focus on readability and ease of use for the viewer.
So now you’ve learned a little bit about web typography and what makes it different than print. The goal of web typography is functionality and legibility to make it easy for the user. Luckily, there are certain typefaces that were created specifically for us to use on the web and are considered “web safe fonts.” They are structured especially for the web for ease of use and high readability.
To learn more information on enhancing your web typography skills, visit this helpful tutorial.