Compelling Web Typography

An art in its own right, Typography is a nuanced discipline that takes a trained eye and practiced hand to use effectively. Add in variables like the responsive web and designing for desktop to mobile, there’s a lot to keep an eye on. For the aspiring type aficionado, here’s how to ensure proper sizing, spacing, legibility and contrast for the web.

 

Sizing & Spacing

Body text should be somewhere between 12 to 16px depending who you ask.

Size text with ems or percentages in css to ensure that your text will be scalable for accessibility reasons and display legibly across high density mobile screens. Avoid setting in points and pixels which aren’t scalable and can be very difficult to read on mobile. For a more in depth look at Pixels, Points, Ems and Percentages, this article breaks it down nicely.

 

Line Height

Line-height is the vertical spacing between lines of text on the web. The ideal line-height for readability is 120-140% the font size, or 1.2 or 1.4 em. The wider the measure, the more line-height should be used for the sake of readability. A single space or break is sufficient gap between paragraphs but any more may feel disorienting.

 

Measure

Measure is the width of a horizontal line of text and how many characters fit within it. A good rule of thumb for measure is around 65 characters, give or take. If you’re measure is longer, increase the line height to compensate.

 

Tracking

Tracking is the spacing between letters that affects the overall number of characters within the measure. Generally, only when sizes are enlarged or reduced significantly should you worry about adjusting the tracking.

 

Three versions of “WAR” in the Clarendon typeface: The top version has no kerning, the middle version has automatic kerning , and the bottom version has manual kerning.

Kerning

Kerning is the spacing between individual letters. In some cases you might have spatial relationships between letters that need adjustment for the sake of readability or aesthetics. A common example is the two letters AV. If using a serif font, their complimentary angles are often set too far away by default. Kerning would be used to adjust only those two letters.

 

 

Contrast

Contrast is deal breaker for accessibility, and the Web Content Accessibility Guidelines 2.0 have very specific contrast ratios for those with vision impairment. However, strong contrast is impactful for readability for the most able of us too. There are many contrast checkers out there you can use to ensure that your site’s colour palette and link colours are contrasting strongly enough. To learn more, see our 2 part series devoted to Web Accessibility.

Hierarchy of Scale

The differentiation between heading size and body text are important factors in readability, particularly as it pertains to scanning documents (generally how we digest information presented to us on the web). Users generally won’t spend much time text heavy pages, but especially wont without a clearly defined hierarchy. By using strongly differentiated headers, those impatient readers can scan your document more effectively for areas of interest. Headings are generally twice the size of body text, however this doesn’t account for subheadings which should be progressively smaller.

Consistency

Once you decide on your type family and sizing, implement them consistently across your site. If you do vary, the variation should be deliberate and considered. Without this consideration, your site’s hierarchy, organization and to some extent, navigability, decline. Headings of the same importance should remain consistent in colour, size and spacing, as should body text. Links should follow the same format in terms of their colour and text decoration as well.

Responsive

Take the time to test your text choices across different devices and viewports. Your type selections should be visible and effective across a 27-inch, 5120 x 2880 px desktop screen, or a 640 x 1136 pixel smartphone. Setting your sizes in percentages will greatly improve the challenges posed by drastic variations in displays.

Dramatic and Decorative Typography

Striking, high drama text, text overlaid on images and decorative flourishes are some of the ways that web designers create featured, impactful typography. The result is often what sets apart great designers, and memorable design. These effects can be achieved in a few notable ways, but often the tactics are as unique as the designers themselves.

Go Big or Go Home

Oversized typography is one way that designers create a strong, bold first impressions. Usually found on the homepage, featured type is dominant in proportion and weight compared to other elements on screen, the size of the characters are significantly large.

Unusual or Novelty Typefaces

Certain typefaces have their place as body copy because of their ease of reading at smaller sizes. Other unusual or novelty typefaces are difficult to read in smaller sizes or in paragraphs. But as headers or in splash pages, visually distinct and eye catching fonts have their time to shine.

High Impact

Another technique is bold, high impact contrast. Black or white text, placed over a brightly coloured image or background can be visually demanding, but theres no missing it. A word to the wise: use sparingly.

Minimalism

Bigger isn’t always better and often, less is more. Smaller font sizes can be just as dramatic when used sparingly and tactfully, as can light weights.

 

Mix and Match

Large typography paired with small type can create a kind of variation that creates visual interest. The same size can get a bit monotonous, so experiment with different sizes and weights to create distinction. Just don’t lose sight of your hierarchy.

Legibility

Finally, when experimenting with feature typography overlaid onto images, legibility concerns should be top of mind. It ties back to contrast again, as too busy a background can distract or obscure your type, making it less impactful at best, or illegible at worst.

Perform a squint or blur test and consider all your audience reading in environments of reduced visibility or even those with possible impairment.