How to master responsive typography
With the rise of responsive websites, it’s important to look at how web typography is changing, and where it’s headed. In this article, we’re going to start with the basics of typography, and explain solutions web designers can use while dealing with responsive typography.
Typography units from past to computer
Ancient units presented on Vitruvian Man drawn by Leonardo da Vinci.
Typography, for centuries, was a domain with strict craft rules. Typographers lived in their own world which was ordered by measurements of picas, points, ciceros, etc. Since these times, typographic units have been established in computer graphics:
- Fonts are measured by point size: You would never say, “I used a 3.527 mm font size,” you would say, “I used a 10 point font size.”
- 1 inch = 72 points: 1 point = 1/72 inch, or 1 point = 0.3527 mm. This has been accepted worldwide since the 1980s, before there were several typographic points derived from feet, inches or mm.
- Picas are used in PostScript: PostScript is a computer language that describes the appearance of layouts, and is used to print high-resolution designs.
- Pixels and ems are used in CSS: Web designs get translated into CSS units which are usually pixels but ems can be used too.
The importance of characters per line (CPL)
A designer’s primary focus when working with type is that it MUST be legible.
This example of 60 vs. 90 CPL demonstrates legibility issues. Which of these examples is easier to read?
When lines of text are too long it makes the reading process slow, difficult and tiring. To avoid this, lines of text need to be easily recognizable — this depends on the proportions of line height vs. line length, spacing between letters and words, and the shape and weight of the letters. The number of characters you put in each row is also important. Here are the basic rules:
- 60 character max: Use this when working with rows of text (that are not in columns).
- 45-60 character max: Use this when putting text in multiple columns.
- 70-75 character max: Use this when putting text in 1-column.
Like any design rule, this can be fine tuned depending on the leading between each line. If you’d like to test different characters per line (CPL), then check out this resourceful site, Golden Ratio Typography Calculator. Here are a few other design formulas to keep in mind:
- A font’s point size multiplied by 2 = a columns width (in picas)
- 1 pica = 12 point
- 1 em = the current specific point size
The reasoning behind using typographic units for this purpose is it makes defining these types of relationships consistent and easy. Let’s look at the rules above in action… say we want to figure out what a column’s width is in ems (not picas), and we are using a 10 point font:
- 10 points multiplied by 2 = a 20 pica column width
- If 20 picas equals 12 points, then 20 multiplied by 12 = 240 points
- If 1 em equals 10 points, then 240 points divided by 10 points = 24 em
Responsive typography challenges
A fluid, 1-column of text means we don’t control CPL.
There are many challenges designers face when working with responsive typography. The main issue is having little control over the CPL when the design is sized up or down. I’ve seen many websites that don’t take the basics of typography (e.g. CPL and using high-quality fonts) into consideration, but it’s extremely important to do so. It’s great that responsive design gives us the ability to use the whole screen’s width, but this doesn’t mean we should use 16 pixel fonts in a column that’s 2,000 pixels wide. And this doesn’t mean to forget the importance of hinting, kerning and other technical aspects.
Additionally, since responsive web design targets mobile devices, websites often undergo rigorous scrutiny with elements being removed to reduce bandwidth — the first elements to go are web fonts. So if you are working with a company who would like to optimize for low bandwidth users, then simplify your design by only using web-friendly fonts.
The Goldilocks Approach (and its constraints)
Optical grading of Sybarite font by Dunwitch Type Founders.
When browsing through articles related to responsive typography, it’s easy to see that responsive typography means various things to various people. Here’s a list of solutions you might find:
- Use larger text and relative sizes
- Use fonts for icons (they are resizable and can be styled with CSS)
- Use web fonts that are optimized for mobile devices (use different fonts for different screen types)
- Use meaningful scales based on golden ratio
- Use the proper CPL ratio (50-75)
- Scale base type size to match device screen size and resolution (when using ems in CSS all font sizes are expressed as a proportion to base font size)
- Adjust font sizes based on the distance between your face and monitor (the most unusual concept I encountered)
Each of the concepts have good reasonings behind them — font grades, hinting and optical scaling relate to the quality of type, and golden ratio modular is an amazing subject, not just for type but design in general. But we are only going to discuss the concepts that relate directly to RWD philosophy and workflow:
- Scale base type size to match device screen size and resolution
- Use the proper CPL ratio (50-75)
Some people deal with these issues by using relative units like em and % (not absolute or fixed units like points) — the advantage being that all text sizes are bound to a single parameter. However, this concept is older than RWD itself, and doesn’t take CPL or screen resolution into account. One solution that does take CPL and screen resolution into account is the Goldilocks Approach.
The Goldilocks Approach in different screen resolutions.
- The Goldilocks Approach relies on the default font size of the browser to define the em size. As a result, we lose some degree of control over how the page looks because it’s hard to keep things in ems, as images are always measured in pixels.
- It doesn’t allow us to use fluid layouts.
My responsive typography solution
An example I created that incorporates my responsive type solution.
While I highly appreciate the simplicity of the Goldilocks Approach, I wanted a solution that allows me to use 100% of a screen’s real estate (no matter the size), and lets me always have 60 CPL while using a fluid layout. I found none. This was a bit surprising considering the amount of RWD websites created recently. But the solution I found is very simple.
What if instead of measuring column widths in em units, we change the value to pixels. Remember, 1 em equals the current specific point size. So, our solution for allowing fluid scaling of text columns while preserving 60 CPL would be:
- Implementing multiple column layouts: You could do this using a CSS column count.
- Change column widths from ems to pixels: You can do this by using this simple equation — body font-size = column width in pixels/desired column width in em units
Check out this example I created that incorporates these responsive type solutions. It’s a conservative setup based on the old rule of 24 ems columns. The script checks for column width in pixels, divides this number by 24 and assigns this number to the body font-size. This is not a CSS framework — it’s just an example of another way to make typography responsive while keeping text optimized for legibility in fluid layouts.
What are some of your solutions for responsive typography? Please share in the comments.
Joanna Krenz-Kurowska has been working as a freelance graphic designer and web designer for 13 years. She lives in the mountains in the south-west of Poland. She has spent the last few years working for clients on five continents, writing about web design and technology for the 99designs community blog, winning dozens of web design contests and following her passions: art photography, running marathons, and graphic arts. She is a member of the New Mill Artists' Colony art union. Teaming up with Jerzy Kurowski, she creates complete digital products like websites or multimedia programs. She loves challenges like bathing in ice air holes, long-distance mountain running, or exploring new areas in web design. More about her work on 23dragons.com. My 99designs profile: http://99designs.com/users/413631. Email: firstname.lastname@example.org