A session about web typography may not sound that interesting, but it was incredibly informative and highlighted some big gaps in our web design / development processes.

Presenters: Mark Boulton Owner, Mark Boulton Design
Richard Rutter Production Dir, Clearleft Ltd

Definitions

Richard and Mark kicked off this session explaining the definition of web typography

• Oxford English dictionary definition: the art or process of setting and arranging types and printing from them.
• Better definition: mechanical notation and arrangement of language
• It’s not “curvy shapes” - that’s “art with words”

Incorrect usage

Typefaces are used incorrectly on the web incredibly often. Incorrect usage includes:

• Using primes for quote marks / apostrophes etc.
• Using hyphens for dashes, minus, en dash, em dash

Mark highlighted that even The Sun do it correctly, so we should too!

We should use the correct entities, as described in an article on A List apart

Using entities can be a pain for developers, but the panel recommended SmartyPants from daring fireball to help automate to process.

Vertical rhythm

Vertical rhythm is about reading the from top down - like time split into intervals, we can split a web pages vertically into regular intervals too. This makes the visual layout “more comfortable”. Mark also highlight that you should:

• ensure the browser does not define font styles by default
• specify nicer font styles first (i.e. “Frutiger”) in CSS.
• spread out lines via line height, to ensure there is enough white space

Simple maths can be used to define the vertical rhythm and the line height:

• Define base text size (e.g. 12px)
• Define rhythm height (e.g. 18px).
• Divide base text size by rhythm to get line height in ems (i.e. 18 / 12 = 1.5em). Also apply the to the bottom margin of rhythm

Other considerations include:

• Lists should hang in the margin. This is correct typographic usage and makes it easier to read / see.
• Set margins and padding to zero by default so setting vertical rhythm is easier

Layout

Layout and typography is intrinsically linked, so we should use a grid system.

• A grid system can be carved up via vertical rhythm and rule of 2 to 3 (i.e rhythms x 1.5 = width of unit)
• Place type over grid
• White space is then created rationally via grid

Typefaces / fonts

• Ariel / verdana are well designed for media…
• … but we should utilise nicer fonts
• Define ideal font in CSS then provide backup….
• … but backup should look similar to main font other it will not work with vertical rhythm
• We should specify new Vista fonts (calibri, cambria, candara, constantia, corbel) first as they are professionally designed, look great and are generic enough to be used in various

Responsibility

Mark and Richard ended on saying that its everyone is responsibility to get typefaces right…. this is definitely something we need to look at further!

The full presentation can be found at webtypography.net/sxsw2007.