With the responsive webdesign trend going on lately, more and more focus is put on typography. No matter if you look on a 27 inch desktop screen or a 3 inch handheld device: readability is paramount. I have collected five simple techniques to instantly improve your typography (and mine, of course).
1. Use ems for scalable font-sizes
Move away from the pixels! That would be a great quote for a designer to start a workshop with, isn’t it!? Use ems and rems instead. As W3C explains, ems are a relative unit, so if a parent element has a calculated font-size of 16px and it’s child has a font-size of 0.875em, then the calculated font-size of the child will be 14px. The advantage? Scalability. If we increase the parent’s to 2em, the child’s font-size will automatically scale up to 28px.
2. Increase line-height
Large pieces of text become hard to read real quickly. By increasing the line-height (leading, as it’s called in traditional typography) of the body copy the text becomes less cramped together and gets some breathing space. Line-height is a unit-less property. This means that adding em, % or px is not needed (but you can if you want!) as the line-height is relative to the font-size.
3. Consistent margins
Create vertical rhythm by using consistent margins. Let each heading and paragraph have the same distance in relation to each other. Harry Roberts wrote an article about that.
4. Maximum paragraph-length
According to [several(http://trentwalton.com/2012/06/19/fluid-type/) studies readability increases by setting the number of characters per line between 45 and 75. That is relatively easy to accomplish with CSS, assuming that a single character takes up about 0.5em of space.
5. Provide contrast
Reading black text on a black background is, well, pretty much impossible. Reading white text on a black background will hurt your eyes within less than five minutes. I am exaggerating of course, but it is important to realize this. I don’t know of a golden formula to calculate if a text and background have enough contrast to make it readable and not have too much contrast to make it painful, but if you do: please let me know. Here’s two rules I generally use to make stuff readable.
Good luck improving the readability of your website!