In an excellent, updated talk from the Smashing Conference 2014, Tim Brown brought us good practices in making typography universal. We as web developers need to understand the role of typesetting in responsive design. As Tim Brown states ‘the web is the best place for text’ as it can be linked, searched, translated, copied and printed.

As more and more books, articles and news items are available on the web, it means proper typesetting is becoming more and more essential. Typography is now a big part of web design and anyone creating for the web would be a fool not to take it seriously. Designers need to spend time on, and practice typography to enable good web design. A balance of size, leading and measure are crucial in web typography and we should always base our decisions on default font size. So we should consider the theoretical box around a font character (the em box or em square) as this becomes the font size in our CSS.

Tim brought forward an idea that tools should use font metrics to help us make design decisions. So we need to understand things like baseline and cap height to make good design decisions. These font metrics are a major influence on our design. We need to think about what job a typeface is doing and whether it’s suitable for purpose. Is it trying to grab our attention or is it purely used for reading? The more we consider these things in our design the less the user needs to, and they have a happier browsing experience as a result. We should also consider the simpler things like character per line, and Robert Bringhurst suggests 45 to 75 characters per line for reading.

Look at Molten Leading to see an excellent piece of Javascript that can help with adjusting line-height for optimum readability across a media queries. It sets a minimum width at which the adjustment starts and a maximum element width where it stops, and then a minimum and maximum line height to adjust through. Tools like these give developers great time saving options.

The web has changed typography and we need to keep striving to extend our knowledge and design skills to stay ahead of the fast moving web design parameters.