Does this type make my design look fat?

Carrie Cousins.
December 21, 2016
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. type-scale 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? trolley 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.
Device Type Minimum Size 40% Recommendation (adjusted for easy use) 80% Maximum (adjusted for easy use)
Small Phone 4 5.6 (6) 7.2 (7.5)
Large Phone 6 8.4 (8.5) 10.8 (11)
Phablet 7 9.8 (10) 12.6 (13)
Tablet 8 11.2 (11.5) 14.4 (14.5)
Laptop/Desktop 10 14 (14) 18 (18)
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). by-association 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. four32 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

modular 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.

Read Next

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…