The Creative Juices

Web typography may not seem important at first glance, and may even seem more problematic than what it’s worth, but your web site cannot be a successful part of your interface design without proper typography – and it needs to be understood, since 95% of the information on the web is written language.While there are a few ways we can deal with typography on the web, know there are occasions in which some font sizes and line-heights will not follow the norm. Web typography isn’t always as easy to structure as print typography. You have more variables to deal with in web (screen resolutions, browser rendering, font variations between operating systems, etc.) that will, on often occasions, have you beside yourself - even for the most seasoned web designers.The one thing that is usually a consistent pattern is the scale to font sizes (in both print and web).

In the sixteenth century, European typographers developed a series of typeface sizes, a scale (the musical analogy is a good one - stick with me). As shown in the diagram they are sizes we’re are all familiar with. Six point through to Seventy-Two point type has remained pretty much intact for over four hundred years. In fact, they are the default font sizes in many applications (give or take a few.).So, what’s so special about these sizes? Well, because this scale of sizes has been used for centuries, if set correctly, type set in this scale will appear more pleasing to the eye and therefore more legible.~ Mark Boulton

While there are different ways to expressing the values of font sizes (px, em, %, etc.), it’s best to keep to something you feel you can understand most clearly – while still keeping to a good vertical rhythm:

Pixels (px)

For pixel sizing, which is the easiest to understand, you can follow along with Wilson Miner’s tutorial of setting type on the web to a baseline grid.

EMs (em)

For em sizing, which is more complex than setting the line height and font sizes in pixels, you can follow along with Richard Rutter as he explains how to establish a vertical rhythm using the em values

Typical Size Settings

A typical pattern among your font size settings would be:

• 12px - Body Size (paragraphs)
• 24px - Main Header (<h1>Andrews University</h1>)
• 18px - Heading for Entries (<h2>College of Arts and Sciences</h2>)
• 16px - All navigational and sub-topcs (<h3>Our Instructors</h3>)
• 13px - All other headed elements (<h4>Robert Mason</h4>)

You can read more about this in Part 4 of Mark Boulton’s series on web typography.

Leading

The leading, or line height, is usually set in relationship to the body font size. If you nave 12px for your font size, a typical setting, for web, would be around 18px.

When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines. - Mark Boulton

Resources for Web Typography:

• Web Style Guide
• Five simple steps to better typography
• Incremental Leading
• Setting Type on the Web to a Baseline Grid
• The ELements of Web Typography
• Top Ten Tips for Web Typography
• Reading Design
• Further discussion on Web Design being 95% Typography