Does this type make my design look fat?

Nothing can ruin a design like typography that doesn’t fit. Whether it’s too big (or too small), improper type scaling is a major problem.

It’s a problem for more designs than you might think. Too commonly you visit a website where the type renders beautifully on a desktop browser, only to revisit later from a phone and find it difficult to read. It happens all the time.

The issue is that the type wasn’t truly scaled for each device. It’s a totally avoidable problem when you consider a typographic scale for projects.

What is a Typographic Scale?

A visual typographic scale encapsulates the sizes, space and proportions of type elements relative to on another in a project. This includes everything from the main body text style to headlines, subheaders, captions and any other text element.

The scale helps determine size and placement of the text elements in relationship to one another. For web design, in particular, the visual type scale often corresponds to tags in your CSS (such as h1, h2, h3, p, and so on).

A type scale helps you create harmony and rhythm in the design. It also keeps you out of stylistic trouble because text elements correspond with CSS elements so that every part of the design uses the same elements and consistency.

The scale should be based on the size of body text. (Always set a typeface and size for that first). Then build the scale around this main typography. Not sure where to start? Google has a solid recommendation:

1. Use a base font size of 16 CSS pixels. Adjust size based on properties of the font being used.
2. Use sizes relative to the base size to define the typographic scale.
3. Text needs vertical space between characters; the general recommendation is to use the browser default line-height of 1.2 em.
4. Restrict the number of fonts used and the typographic scale.

Create harmony and rhythm

A type scale does more than just help users move through the copy, it creates harmony and rhythm for the flow of text. This is important on any device.

So where do you start?

UX Matters has some of the best research available on minimum text sizes by device. Note that these are minimum sizes and as body text sizes continue to increase (as does line spacing), you should strongly consider larger point sizes. Steven Hoober recommends starting at least 40 percent larger than the recommended minimums. Further, enhanced content styles can go up to 80 percent above the minimum, but you should be cautious with exceptionally large type as well.

Once the body text size is set, you can determine how to size supporting text elements. There’s a fine art to that and the eye test is often a good place to start.

There’s almost no such thing as a headline that’s too big. Say what you need to say and size to scale the words in the space. A two-line headline will feel larger than one-line even if the text is the exact same size.

The easiest way to think about scaling up for headlines and other larger test elements is working in percent based on the body text. While every designer has a different starting point, 250 percent larger than the body text is a good ballpark for the headline; 150 percent for h2, 75 percent for h3 and 50 percent for elements such as block quotes. (This is not a rule, just a starting point.)

Here’s why percents, rather than set sizes, are important: Once you set the size of the body type the percents adjust sizes accordingly regardless of screen size. Every type element is relative to the body type.

Character and spacing guidelines

There are some other guidelines that designers look to as well when it comes to type on the screen. When it comes to spacing, one of the rules of thumb has been to look at characters per line to ensure readability.

• Desktop and large devices: 60 to 75 characters per line
• Phones and small devices: 35 to 40 characters per line

Note that readability on smaller screens is based on having fewer characters (larger text).

The same idea applies to spacing as well. You need more space between lines of text when the screen size is limited to make it easier for users to read and scan content. Consider adding 25 percent more line spacing on smaller devices than for desktop typography.

The additional size and spacing helps ease that tight or crunched feeling that users can feel when trying to read on smaller devices. Because the canvas is small, reader flow and legibility is vital to keep users scrolling.

Tips to get started

There are plenty of ways to create a typographic scale and ensure that the text does not make your design look fat. How you go about it likely depends on your comfort level with code and development in addition to the design.

The best option is to use a responsive design with media queries. This is the designer-developer option that will provide the greatest level of control over text specifications. (For more go back to those Google recommendations, above.)

Another route is to design different versions. While this is a pretty out-of-date concept, there are still some places using mobile URLs and desktop URLs for their websites. It’s not recommended in most cases, but for some websites where the design is dramatically different or users experience different things, it can be an option.

The easy option is to start with a theme for your website. Just make sure to opt for a fully responsive option. When you use a high quality responsive theme, most of the guesswork is taken out of it for you. All you really have to think about is the body text size. Just make sure to check everything to make sure the mobile type sizes meet your standards.

3 tools to create a type scale

There are a number of tools available to help you see the exact impact of a visual typography scale. Here are a few of the best and most user-friendly options.

• Type Scale: Enter text and play with options such as size, scale and font right on the screen; grad the CSS or edit the code right from the tool;
• Modular Scale: The scale works like a rule to help determine sizes for type; then download the results as a Sass or JS plugin or see them on the screen;
• Golden Ratio Typography Calculator: The tool optimizes size, line height, width and characters per line using the golden ratio

Conclusion

The right typographic scale will keep your design looking trim and svelte. It is the added harmony that users might not understand but contributes to overall readability and usability.

It’s likely that the scale is off if the design “just doesn’t look right.” Improperly sized type can be tough to pinpoint but is often a place to look when something about a design is out of balance. Play with a few different options for scale before settling on something, and remember the trend right now is for type that’s a bit larger than in the past.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.