In a previous article titled Line Lengths & Measures I discussed the importance of achieving an ideal measure (line length) for your content, I also explained how to achieve this. The article you are now reading serves as an expansion on Line Lengths & Measures, so if you haven’t read it yet, take a look now before reading on.

Originally designers working with type had absolute control over the presentation of their content, how it looked when they set the type and printed it was exactly how everyone else would see it. Now in the digital age where most of our content is displayed on a screen, designers have less control over how it will appear to users.

Enter Responsive Design

Before responsive design emerged websites were limited to fixed or fluid layouts and had to rely on completely separate style sheets to serve up mobile devices and printable versions of the website.

Responsive design allows the designer to create a website that responds to the device it is being viewed on through the use of media queries.^[1]

@media (min-width:1100px) { body {font-size:1.5rem;} }

Media queries consist of a media type and expressions that check to see if the users device meets these requirements, if these criteria are met, then any code within the query will come into effect, enabling designers to optimise their site and content for multiple displays and devices from a single stylesheet.

This is great for web typography because it means we can now optimise our content for a much larger selection of devices, but it still doesn’t give us the level of absolute control that traditional typographers had and it also means that we need to take a much bigger range of issues into consideration when making choices for factors like which font we’re going to use and how our measure will adjust to each device it is displayed on.

Key Factors in Responsive Typography

I’ve written a short section about the four main areas to consider when optimising a websites content for multiple devices.

Font Choice

It is now even more important that our choice of font be a versatile one. one that it capable of displaying text on small screens and sizes, whilst still remaining legible and readable, and still displays beautifully in larger screens too. A general guideline to follow is to use a font with a large x-height and relatively low contrast.

Font Size

It is largely accepted that a computer screen will usually be much further away from our face than a book or smart phone would be ^[2], so it is important to take this into consideration with various other devices too. Information Architects (iA) a design company based in Tokyo and Zurich cover this in great detail in their article The 100% Easy-2-Read Standard^[3].

As a result slightly larger than normal font sizes have become the standard on contemporary websites, because of the larger screens and bigger distances from a user, whereas it is necessary to reduce the size to display optimally on smaller screens since the screen is much smaller and will be held much closer to the readers eyes.

Measure

As discussed previously, the ideal measure is between 50-75 characters, so this is something you should work out for each media query you use, so as to achieve the best reading experience on all devices. For smaller devices I think 50 is the maximum possible measure before the text become too small to be legible, some even argue that a slightly smaller measure than 50 characters is accept on particularly small screens.

Line Height

It has become a standard in web design to set the line height of content at 140% (1.4em) of the font size. this ensures a generous amount of breathing room between each line. If the line height is too small the reader can become lost in the middle of sentences and if it is too large it can become difficult to find new lines, which also it looks unsightly to a pages overall texture.

Designers also recommend that line lengths be slightly larger for sans-serif fonts and on smaller mobile screens it is advised to increase line heights slightly more to compensate for smaller text sizes and measures.

Responsive design does increase the accessibility of a sites design and its content but it doesn’t provide us with the same level of control that traditional typographers had. It’s still relatively flexible and content can still end up displaying in less than perfect circumstances but it is still important that the content we design is as accessible and readable as humanly possible.

Foot Notes

1. [1]Chris Coyer, 06/07/2010, CSS Media Queries & Using Available Space | CSS-Tricks [CSS-Tricks], [online]. Available: Available: http://css-tricks.com/css-media-queries/ [06/08/2013].
2. [2]Oliver Reichenstein, 01/06/2012, Responsive Typography: The Basics | Information Architects [Information Architects | iA designs and builds digital products.], [online]. Available: http://ia.net/blog/responsive-typography-the-basics/ [06/08/2013].
3. [3]Oliver Reichenstein, 17/11/2006, The 100% Easy-2-Read Standard | Information Architects [Information Architects | iA designs and builds digital products.], [online]. Available: http://ia.net/blog/100e2r/ [06/08/2013].