A short guide to Web Typography

by Chris Skelton

A couple of months ago I decided to give a short presentation to the rest of the business on web typography. I did this to try to raise awareness about the differences between web and print, and the considerations that must be made when selecting a typeface for online.

We have a variety of designers in the building, all with varying understandings of the complexities of working with type both on and offline, so this, along with a focus on terminology (as CSS typography styles don’t always match those used in print) formed the basis of my presentation.

The presentation

  • The following paragraphs simply print the content of my presentation, just in case you don’t want to flick through the Speaker Deck!

    Reading

    Firstly, a bit about how we read…

    Legibility

  • ‘Legibility’ means text can be interpreted.

    • We read shapes, we don’t read words.
    • Letters carry more of their identifying features in their top halves.

    Readability

  • Just because something is legible doesn’t mean it’s readable.

    • Not ‘can you read it’, but ‘do you want to read it’.
    • Length, font, colour, case, etc. all have an impact.

    Saccades & Fixations

  • We don’t read every word.

    • Saccades are leaps that happen as your eyes move across a line
    • Fixations are the brief moments of pause between saccades


    History

    Where did web typography start, and where are we now?

    System fonts or images

    We used to have a very limited number of typefaces available:

    Arial, Georgia, Verdana, Tahoma, Times, Lucida Sans, Comic Sans, plus a few more…

    The alternative was to embed images of text:

    • Bad for accessibility
    • Difficult to maintain on a large scale
    • Can pixellate with compression
    • Poor SEO

    sIFR

    Then some clever people invented an alternative.

    sIFR (Scalable Inman Flash Replacement) used Macromedia Flash to replace text with encoded fonts.

    Good because:
    • More accessible
    • More variety/choice

    Bad because:
    • Slow
    • Reliant on Flash being installed
    • Reliant on Javascript

    Cufón

    Then some clever people invented another alternative.

    Cufón converts fonts into vector graphics and stores them in JSON data format.

    Good because:
    • Not reliant on Flash
    • More variety/choice

    Bad because:
    • Fonts are unencrypted
    • Can’t select/search text
    • Reliant on Javascript

    @font-face

    Then some clever people invented ANOTHER alternative.

    @font-face is a CSS declaration that allows you to reference a font file (that’s hosted online) to use when rendering text on a Web page.

    Good because:
    • More accessible!
    • More variety/choice!
    • Not reliant on Javascript!

    Bad because:
    • Nothing! (Other than being unencrypted and open to being stolen)


    Issues & Considerations

    What do we need to think about when choosing a webfont?

    Browser rendering

    All browsers render fonts differently.

    OSX is particularly good. Windows is particularly bad. Especially older versions.

    Many fonts aren’t hinted and optimised for Web.

    Many font vendors simply convert typefaces into web-friendly file formats. However without proper hinting they can render terribly.

    We must test in-browser.

    Weights & Styles

    The more weights and styles we include, the longer the load time.

    Having said that, there’s a minimum we should aim for:
    • Regular
    • Italic
    • Bold
    • Bold italic

    For ‘body’ copy, if we don’t include these as a minimum, we’re leaving it up to the browser to ‘make them up’ (we all know how ugly faux-bold is in Photoshop).


    Opentype Features

    The capabilities of web browsers are advancing quickly and support for a wide variety of Opentype features is growing, so there’s no reason why we can’t start using them today.

    Ligatures/Smallcaps/Lining numerals/Hyphenation

    In the most modern browsers, these are now possible.

    However we need to consider:
    • Does our web typeface include these features?
    • How much extra file-size does it add? (And is it worth it?)
    • How does it gracefully degrade in browsers that don’t support it?


    Attributes

    The naming of CSS attributes sometimes differs from print terminology.

    Print vs Online

    • Tracking = letter-spacing
    • Line spacing = line-height
    • Weight = font-weight
    • Style = font-style
    • Point size = font-size
    • Underline/Line-through = text-decoration
    • Kerning = (doesn’t exist in CSS)
    • Leading = (doesn’t exist in CSS)
    • Baseline grid alignment = (near impossible)

    A note on line spacing / line-height

  • Line spacing in print is not the same as line-height on the Web.

    • Line spacing = the distance from baseline to baseline
    • Line-height = the distance between the mid-points in the space above and below a line of text

    A note on sizing

    Points in print are not the same as pixels on the Web.

    • 12 points = 16 pixels
    • 16 pixels is the base size for Web Typography
    • 16px = { font-size: 100%; }


    Services

    What online services are available to serve fonts to our websites?

    About font-serving services

    Fonts hosted on third-party platforms and distributed to your website using Javascript.

    Good because:
    • Secure / no theft issues
    • Hinted / fully tested (usually)
    • Cost-effective
    • Always up-to-date tech
    • Flexible

    Bad because:
    • Slower than self-hosted
    • Might see more FOUT (Flash of un-styled text)
    • Reliant on Javascript

    Services we trust to do a good job

    Font-serving:
    • Typekit
    • Fontdeck
    • Cloud.typography
    • Fonts.com

    Testing
    • Typecast


    We’re obviously only just touching the surface here but we’ve found these basic principles to be extremely useful to keep in mind — they almost form a bit of a checklist from project to project.

    If anyone thinks I’ve missed anything major please let me know in the comments. If not, then happy typing!

    To make sure you don’t miss out on our best ideas, news and insights, or if you’d like to receive invites to events that you really shouldn’t miss, you can subscribe to our mailing list here .

Hide comments >
comments powered by Disqus