RSS

Serif…San Serif – What do they mean?

05 Nov

The rise of web fonts has given way to a broader understanding — and respect — for typography, typefaces and the way text is displayed online.

Typography is an essential part of visual design — and as any print publisher will tell you, the way that text is arranged and displayed can have an enormous impact on how its message is presented and interpreted.

Although typography entered the digital age long ago, it’s only been in the last few years that we’ve really seen advanced typography and typesetting take off online. This is, in large part, thanks to broad browser support for CSS3 and web font standards, the rise of web font services like Typekit (which was recently acquired by Adobe) and the increasing adoption of mobile devices like smartphones, tablets and ereaders.

Understanding some of the basics in typography can make crafting web content and using web fonts a better experience for everyone.


Typeface Types


 

 

 

 

Most of us have heard the terms “serif” or “sans serif” but what do they mean?

serif typeface (or font) has strokes and other semi-structural details on the ends of letters. Fonts like Times New Roman and Baskerville are serif fonts. This is the font that most newspapers and magazines use. Georgia, one of the most popular fonts on the web, is a serif font.

sans serif typeface doesn’t have the semi-structural details on the ends of the letterforms. Fonts like Helvetica, Arial and Gotham are serif fonts. Sans serif fonts are often more readable on smaller devices, which is why the default font on most mobile platforms is a sans serif font. Apple uses Helvetica Neue, Microsoft uses Segoe and Google recently created its own sans serif font for Android, Roboto.

monospaced typeface is a typeface that is non-proportional. That means that the amount of horizontal space between letters and characters is uniform. On the web, monospaced fonts are most often used when presenting computer code examples. The use of a monospaced font, especially when interspersed with standard variable-width fonts, is a visual cue that the text is a computer or code-related action. Common monospaced fonts include Menlo, Consolas and Courier.

Script typefaces have fluid stroke designs and are aesthetically similar to handwriting. Script fonts that vary in formality and calligraphy styles, like the font Zapfino, also exist. These are most commonly used on the web for large headings and tend to perform poorly for blocks of text or in small sizes.


Kerning and Leading


Beyond just a typeface, good web typography also utilizes good kerning and leading.

Kerning is the process of adjusting the space between characters in proportional fonts. In other words, it’s how closely letters are to one another. Kerning is optimized by character pairs, whereas a technique known as tracking, adjusts the space evenly between characters.

 

 

 

 Kerning is possible in web typography thanks to various JavaScript techniques like Lettering.js and Kern.js.

Leading is the distance between the baselines of lines of type, in other words, the space between each line in a paragraph of text.

 

Leading can drastically impact how type is read and presented. Too much leading, and type is unwieldy. Too little, and it can be hard to read.

Advertisements
 
3 Comments

Posted by on November 5, 2011 in UX and Usability

 

Tags: , , , , , ,

3 responses to “Serif…San Serif – What do they mean?

  1. pavillon

    May 13, 2013 at 7:55 pm

    Superb details there. I’m Vera from Naponee, United States and I was so glad to have seen this blog. In fact, I’d
    love to get in touch with you. Perhaps we could exchange emails?

     
    • Amit

      May 14, 2013 at 3:52 am

      Pleasure is mine, that you liked the write-up.

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: