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:
- Use a base font size of 16 CSS pixels. Adjust size based on properties of the font being used.
- Use sizes relative to the base size to define the typographic scale.
- Text needs vertical space between characters; the general recommendation is to use the browser default line-height of 1.2 em.
- Restrict the number of fonts used and the typographic scale.
Create harmony and rhythmA 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.
|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)|
Character and spacing guidelinesThere 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
Tips to get startedThere 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 scaleThere 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
ConclusionThe 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 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.
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton