What About Fonts

“The best font choices are ones where readers do not notice the font . . . but the message.”

Understanding Fonts - An image of several different web fontsFonts are an important part of any website or blog design. Font size, color, type, spacing, and typeface all play a role in the ease and impact of readability for the visitor. In addition, the typeface (a set of one or more fonts that share common design features) that you choose should be compatible with your overall design.

Considering the important role fonts play in overall content design, it is helpful to understand some simple formatting terminology and explanations in order to have a better idea of what you are looking for before attempting to make decisions on how and where to use, change, or combine it.  So, here are the basics:

 1.  Serif versus San Serif: There are two classic typeface styles – serif and sans serif (sans meaning ‘without’ in French). There has been a longstanding controversy about which is the better style to use, but the general best practice is to use Serif in print and sans serif online. The reason for this is resolution – printed material generally has a much higher resolution, about 1000 dots/inch, compared to computers or tablets at 300-600 dots/inch. Thus, readability comes into play.

A serif is a small line or decorative flourish attached to the end of a letter.

Example of serif typeface - Georgia

Note the extra flourishes at the end of the character strokes. Times new roman is another commonly used serif font.

Example of web sans serif web font - Arial

Note the clean straight lines. Arial is another very common sans serif font.

Both the above sentences are in the same font size. The font size is known as the point size or, in the case of the web, the pixel (px) size.

2.  X-height is the height of a font’s main body, not including ascenders or descenders (those parts of the font that go above or below the actual body lines of text), based on the lowercase ‘x’.

Illustration of the x-height of a web font

When looking at combining the use of more than one typeface in a blog or website content, you will want to use fonts that have the same or very similar x-height.


3.  A line drawn across the bottom of a font’s x-height (excluding descenders) is known as the baseline. 


4.  Ascenders are the part of a character that extends above its x-height, and descenders are the part of a character that extends below its x-height.


5.  The amount of horizontal space a character encroaches on its neighbor is known as Kerning. It deals with adjusting the amount of space between a pair of letters, numerals, punctuation etc. (called glyphs) so that the spacing looks correct or ‘even.’ In the example below, note how the character pairs appear to encroach or overlap on each other more than in the remaining characters.

Sample text to visualize Kerning as it applies to fonts.6.  Tracking or letter spacing refers to the horizontal space between each character. It deals with the space between all characters in a piece of text. See the example below for a visual understanding of the difference between kerning and tracking.

Visualization of the difference between kerning and tracking for text7.  The vertical space between lines of text is known as Leading (originally, a piece of lead was used between lines of text in the mechanical printing process). There are standard settings for leading, such as single line spacing, 1.5 line spacing, double line spacing, etc. Or, you can choose to customize it.

Sample of leading or line spacing in lines of text

Now, as you can see, the basic points above certainly allow for typography to get quite intense, right down to the creation of your own font – and this only scrapes the surface. There are also thousands of fonts and typefaces available from which to choose. So how can we, the non-developers and non-CSS aficionados, easily determine what works with what and what works best?

Worry not – there are tools for that! Below are three easy-to-use tools to help you decide what font to use, in what size, and what format.

Typetester:  This is a nice tool for comparing what fonts look like on the screen. It is easy to use and provides previews of selected typefaces and their common parameters, such as leading and kerning. You can also specify all the common parameters for a very accurate picture of what the fonts will look like on your website. You could (if you were so inclined) also copy the CSS which it creates on the fly.

Visual of the Typetester tool for web fonts

Typechart: Similar to Typetester, Typechart allows you to compare fonts and retrieve the CSS. A nice feature here is the ability to compare what the fonts will look like on Windows rendering or Mac rendering.

Image of Typechart, another web font tool

WhatFont: This tool/extension is an easy way to find the name of the font you love from a particular webpage. Just hover over the text and voila! You get all the information about the particular font family.

WhatFont tool for determining fonts used on web pages


PXtoEM: This is a conversion tool for pixels to ems or vice versa. There has been a lot of discussion about what is the best method of sizing fonts on the web. Refer this blog by Kyle Schaeffer (http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/) for an explanation of the four different font sizes and how they are used.

PXtoEm tool for conversion of pixels to ems and vice versa

Hopefully this has provided you with some insight into the role that fonts play in the design of your website. Content may be king, but if the text itself isn’t pleasing to the eye the reader may not stay long enough to take advantage of your wonderful insights. It’s all in the details.

Do you have thoughts to share about the use of fonts? Then by all means please share them in the comments below.

*Images courtesy of: harmless.de, en.wikepedia.org, brightlemon

Joyce Cerroni of Affordable Websites by DesignJoyce Cerroni is a website designer, trainer, and author. Her specialty is designing websites in WordPress. Her Let’s WordPress series is a comprehensive eBook and video training series for WordPress, and she also provides online training. You can contact Joyce at joyce@affordablewebsitesbydesign.com, or give her a call at 774-310-1573.

Tagged with:

Filed under: DesignFonts

Like this post? Subscribe to my RSS feed and get loads more!