Schlagwort: website

The idea of responsive web design and layout – as it was discussed in the past two years, e.g. by Ethan Marcotte – is to have a set of specifications that adjust to the requirements of a device, resulting in different layouts on different devices.

The idea of responsive typography – as it was discussed in the past months, e.g. by Oliver Reichenstein of iA – is to get the exact same impression of a typeface used for a text regardless of the device it is viewed on. But there is more to typography than just the typeface and the term responsive typography, in my opinion, is used ambiguously here. It should cover all aspects of typography and not just the topic of graded “responsive fonts” for different resolutions.

Typography is defined by typographic parameters. These are what you specify for composition. They all influence readability and they influence each other, meaning you cannot look at them isolated. That is:
– font (style, weight)
– font size
– line length
– line spacing
– word space
– letter spacing, tracking
– alignment, justification, hyphenation
– line breaks, paragraph breaks, make-up
– colour, contrast

If you specify these things and send it to someone at the other end of the world, they can reproduce the exact same column of text. This is the basic idea of typography. But – is the idea of “responsiveness” to ensure the exact same design or to adjust the parameters for optimal output on a specific device? What is optimal typography on a standard TFT screen is not the same as what might be optimal on a phone, even if we ensure the font weight in both versions look the same. The resolution and rendering method is different but also other screen settings like contrast and colour, the format, and the reading distance is different.

Shorter lines can get away with smaller font sizes, smaller word spaces, less line spacing but they need hyphenation for good line breaks e.g. (Please don’t force the lines to be even shorter – use small margins in phone layouts!). Larger formats on the other hand mean larger reading distance. Thus they call for larger font sizes, longer lines, more line spacing, larger margins. Small text sizes require fonts with rather wide proportions, a large x-height and open apertures. Larger fonts can get lighter in weight, more detailed, contrasted, and more tightly spaced.

To cut a long story short – what I want to say is, that there are many more important setscrews that have to be concerted and that determine good typography and optimal readability than just the stroke weight of a typeface. The text column has to look harmonious, with legible letterforms and good spacing, achieved by a rhythmical pattern of black strokes and the white space inbetween, with evenly rendered stems, well attuned word spaces and line spacing.

I would want to choose a typeface and settings that generally ensure this. Possible minor differences in font weight from one device to another don’t matter much to me, as long as the thing in a whole can be read comfortably. But maybe us print designers, who had to deal with different papers, printing methods and dot gains all our lives, have just idly learned to come to terms with it. Colour and the contrast of the screen are much more crucial. All the finetuned optimization are at risk to get screwed up by a user who has his crisp retina display set to full brightness. And that cannot be responded to.