Ampersand Conference 2015- Friday 13th November • Brighton

The Next Steps for Web Typography- Marko Dugonjic • Notes by Sajhd Hussain

Back to all talks
Listen to the talk

Web typography has come along way since the dawn of web design, however, it sometimes feels as if the constraints of old still dampens our creativity. Marko explored ways in which we can push typographic design on the web further, beyond the status quo of today.

Responsive Web Typography

8. Different font sizes for different reading screens

Adjusting the font size according to device screen and distance of the user from the screen.

Font size dependent on distance
A screenshot of font size dependent on screen distance.

7. Maintain perfect proportions in a paragraph

Paragraph line height and length kept in proportion.

6. Establish hierachy appropriate for the screen size

Using styling options eg: all caps for subhead H2, small caps for subhead H3 and italics

5. Indented paragraphs vs block paragraphs

Indented paragraphs vs block paragraphs
A screenshot of indented paragraphs vs block paragraphs.

4. Use graded fonts to normalize rendering

Graded fonts
A screenshot showing how graded fonts can improve legibility.

3. Take advantage of multiple optical sizes

2. Use font widths according to the width of the screen

1. Web fonts are a progressive enhancement

Performance
Font performance strategies to think about.

The Benton Project

Marko then went on to talk about the Benton Project he is involved with, covering some of the css techniques used on the website (3D text effects, drop caps, rotated letters, flipped words). you can see it in action at bentonmodern.webtype.com/formal.

Back to all talks