Web Typography

Web typography is just as important as typography for print and can make drastic differences in how aesthetically pleasing a site appears to viewers. In a way, web typography is more important than it's cousin, print typography; there are many more factors to consider when designing a website than there are for a poster or corporate identity. Viewers are more likely to struggle through reading a printed piece than an article or a website online. We have all encountered a website that was too hard to read because of color choices, size, or poor typefaces. when we come across sites such as these, most of the time we won't even bother with them and will simply move on to find a site that is easier on the eyes. For this reason, it is important that as designers we take the time to consider typography in our creations.

I would like to discuss some of the bad typography choices I just mentioned, and correct the mistakes we often see. First, poor typeface choice. Before you can start thinking about color or size you must have an idea of which typeface will work best on the web. Generally, serif typefaces work best in print, and sans-serif typefaces are more web-friendly. This is not to say that you won't be able to use a serif typeface on your website, but you have to select the right one. Verdana, a sans-serif typeface, was designed for use on the web. It has a large x-height, simple curves, and open forms which make it one of the most web-friendly choices. Georgia, a serif typeface, was designed with these factors in mind allowing it to be web-friendly. Readability on screen is the biggest issue, so a typeface with a generous x-height will allow for the best readability.

Contrast is a huge factor in web typography, as well as in print. But on the web our eyes are already under a certain amount of strain simply due to looking at a screen. Contrast that is too high or too low can only exacerbate this strain, for example, trying to read neon green text on a black background, or light blue text on a pale pink background. We must test out different color palettes in order to find that perfect fit where our eyes move across the copy without color vibration or high/low contrast distracting us. Of course, color can be used in a good way, such as creating hierarchy or making something stand out to the viewer. Pop-color is one of the many tools at our disposal in order to guide our viewers through our content. Again, the color we choose must not compete with the color of the body-copy, but work with it to create an aesthetically pleasing design.

Size is another factor that can either help or hurt a design. The most readable type is usually set between 8-12 point. In print we can get away with leaning towards the smaller sizes, because generally when we are reading something as a hard-copy we hold it closer to our face than if we were to sit at a desk and look at a computer. Considering how far away the screen is likely to be from the viewer will help to choose an appropriate size. Choosing something too small will cause a viewer to have to lean towards the screen or squint just to be able to read your website, and on the other hand choosing something too large may overwhelm the viewer.

Something that is often overlooked is designing with the older demographic in mind. The baby-boomer generation is likely to increase font size on their computers to make like a little easier for them. This might be more of a design tip rather than a typography tip, but if your design isn't solid your perfectly organized grid layout might start overlapping and causing major readability issues. So to prevent a typographic faux-pas such as this, ensure that your CSS is built for flexibility.

With so many typefaces to choose from, how can we be guaranteed our viewer at home will be looking at the same thing on their computer that we are when we're designing a website? CSS allows us to stack fonts in our code in order of preference; if the viewer does not have the first choice font installed the next font in line will be displayed, and so on. This is great, but in some cases viewers will be viewing the same old system fonts that come with their computer. You could always turn your beautiful typeface into an image, but that might slow down your website, and that's counterproductive. Luckily some solutions were found; @font-face allowed us to link to a font on any server, but there were issues with copyrights because the linked font would be downloaded in some way to the viewer. Now we have EOT and WOFF formats that embed fonts in your web pages to guarantee viewing. Nowadays, good web typography isn't as much of an oxymoron with all these typefaces at our disposal.

By taking advantage of the tools available to us we are able to integrate typography into our designs for web just as easily as we would in print designs. This is a huge step for designers as it allows us to keep up with the times as technology continues evolving.

-Chelsea Morgenweck