Adding fonts and type to your brand guide
In this tutorial, we'll walk through how to add fonts and typography styles to your brand guide in Guidelines, using the built-in typography page or creating one from scratch.
The Typography Page
When you create a site using a template, Guidelines includes a Typography page. You can use this page as-is, or start from a blank section and add your own blocks.
From the top toolbar, you can:
- Select text and apply different typography styles.
- Manage typography styles for your brand at any time, adjusting them globally.
Introducing Fonts
To document your fonts, use a Typography Block. This block allows you to:
- Show font specimens with labels (font name or style name).
- Choose a type style to display (e.g., Heading Large, Heading Medium, Body).
- Display the full Latin character set, preset sample text, or custom brand-specific text.
- Adjust text color to suit your layout.
This makes it easy to introduce the fonts your brand uses and demonstrate them directly in your guide.
Displaying Typography Styles
Beyond specimens, you can showcase specific typography styles. For example:
- Show how a heading looks in different cases (title case, uppercase, etc.).
- Document properties such as size, spacing, and line height for each style.
These details help collaborators understand exactly how text should appear in your brand.
Publishing and Search
When published, viewers can browse typography styles on your site.
In addition, they can use the built-in feature to:
- Select a type style (e.g., Heading Large).
- View detailed values such as font size, line height, and kerning.
- Copy CSS code directly for use in websites or digital interfaces.
Conclusion
By adding fonts and typography styles in Guidelines, you give your team a clear, practical reference for how text should be used across your brand. With specimens, style details, and even copy-to-CSS functionality, your typography remains consistent and easy to implement.