How do I establish a strong typographic hierarchy?
TL;DR
To establish a strong typographic hierarchy, begin by aligning your typeface choices with brand guidelines or opt for fonts that suit the application's context—grotesque (sans serif) for data-intensive business applications and traditional (serif) for text-heavy interfaces. Develop a typographic scale starting with a base font size (typically 14-16px), increasing sizes systematically for different text elements (captions, body, subheadings, headings). Implement consistent text styles using predefined settings from the "Assets" panel to ensure uniformity and save time. Document and share your font typescale guidelines in a design system or style guide to maintain consistency across your team and stakeholders.
Deep dive
Establishing a strong typographic hierarchy begins with recognizing that each typeface selection – every variation in weight, size, and color – communicates specific information. By organizing these elements in a clear hierarchy, you create a visual structure. It naturally directs users through the content, significantly improving both legibility and comprehension. Follow these steps to create a robust typographic hierarchy:
Decide on the font
Start by checking if there are existing brand guidelines. If available, use the brand font.
However, if the brand font is more traditional and you’re developing a complex business application, consider opting for a grotesque (sans serif) font found in the business's presentation materials. This type of font is optimal for user perception when interacting with extensive data sets.
For applications not centered around large data processing, a traditional (serif) font is suitable. It improves readability for large volumes of text, like on news sites or in online books. The ideal line height and serifs draw the reader’s eye smoothly across multiple lines of text.
Establish a typographic scale
To develop a typography scale, start with a base font size, typically between 14px and 16px. Then, build out the scale by consistently increasing the font size according to a set ratio. Aim for 1-2 sizes larger for captions, 2-3 for body text, 1-2 for subheadings, and 3-4 for headings. This approach keeps all font sizes proportional and harmonious. Also, remember to adjust the styles for mobile and responsive layouts.
MailChimp is a great example of how a strong typographic hierarchy can make the user experience better. They have a clear and distinct hierarchy with large headlines, smaller sub-headlines, and even smaller body text, which guides users through the content effectively.
Similarly, Intercom's business messaging platform uses a strong typographic hierarchy to clearly show what's most important in the interface. This makes it easy for users to quickly find relevant conversations and specific features.
Ensure consistency
Maintain consistent text styles across your designs. Instead of manually adjusting font properties each time, use the predefined text styles from the "Assets" panel. This approach not only ensures uniformity but also saves time during the design process.
Document your font typescale guidelines, which include font sizes, styles, and usage recommendations, in a design system or style guide. Share this documentation with your team members and stakeholders to make sure everyone follows the established typography guidelines.
Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.
- What is the primary goal of the application, and how can typography support that goal?
- Who is the target audience, and what are their reading habits and preferences?
- What is the nature of the content (e.g., data-heavy, text-heavy, multimedia), and how can typography enhance its presentation?
- How can typography be used to create a clear visual hierarchy and guide users through the content?
- What emotions or brand personality should the typography convey, and how can this be achieved through font choices and styling?
Common mistakes to avoid
Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.
- Using too many font families or styles, which can create visual clutter and confusion.
- Not providing enough contrast between font sizes, making it difficult to distinguish hierarchy levels.
- Overusing bold or italic styles, which can make the text less readable and overwhelming.
- Neglecting to consider line length and spacing, leading to poor readability.
- Failing to test the typographic hierarchy with real users.
Useful tools
These tools will make your job easier and more effective.
- Type Scale Generator – set your base size and ratios to explore typographic scale options and create visual harmony.
- ModularScale – build a consistent and harmonious typographic scale based on ratios from musical intervals or mathematical relationships. This ensures your font sizes and spacing stay proportional and visually appealing.
- Archetype – create and manage your typographic systems. Define font families, sizes, weights, and other attributes, then export your styles as CSS or design tokens. Test and preview your typographic hierarchy on various screen sizes and devices.
Methodologies
These methodologies will make your job easier and more effective.
- The CRAP (Contrast, Repetition, Alignment, Proximity) Principles. Originally coined by Robin Williams in her book "The Non-Designer's Design Book," the CRAP principles are a nice framework for creating effective visual designs, including typographic hierarchies.
- The Type Scale Method. This method starts with a base font size and uses a consistent scale—such as 1.25, 1.5, or 1.618—to set the sizes of headings, subheadings, and other text elements. It ensures all font sizes are proportional and balanced, adding a visual rhythm to your design. Tools like Modular Scale help designers easily create type scales using their chosen ratio.
Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
- Understanding Typography by Google
- Typography in Design Systems by Nathan Curtis
- What is typographic scale by Liam McKay