Similar to the Colors Page, this guide serves as a valuable reference for fine-tuning your typography choices and achieving a consistent design for your website.
The Typography Page features four distinct cards:
- Typography – Display Typeface & Scale
- Typography – Body Text Typeface & Scale
- Typography – Font size reference
- Typography – Line height reference
These cards provide a convenient overview of your ACSS Typography settings, helping you make informed decisions about your website’s text presentation.
Typography – Display Typeface & Scale
In the world of design, the term “Display typeface” refers to the typeface used primarily for headings. You might be wondering why we use “typeface” instead of “font.” Here’s the distinction: a typeface represents a unique letter style, while a font encompasses various versions of that style, including different sizes and boldness.
By default, ACSS Tokens sets “Display typeface” to the font called “Inter.” This means that all your headings will utilize the “Inter” typeface.
Now, let’s break down this card in a more detail.
At the top, a box with a yellow border displays heading sizes for desktop
At the bottom, a box with a blue border showcases heading sizes for mobile
You may have noticed that each breakpoint includes two sets of heading sizes: “standard” and “headings larger.”
This duplication arises because the ACSS Wordpress plugin allows us to apply a CSS class called “.text-larger” to enlarge the font size of selected text layers. However, Figma operates differently and does not support advanced CSS functions.
Therefore, we’ve created separate heading and body text styles to accommodate this specific ACSS feature.
Typography – Body Text Typeface & Scale
This card mirrors the first one but focuses on body text rather than headings.
Body text is the text used beneath your headings, such as blog post content.
Unlike display fonts for headings, body text ensures a comfortable reading experience for your users.
Typography – Font Size and Line Height Reference
These two cards serve as straightforward references for font sizes and line heights:
They provide the precise pixel values for headings and body text font sizes and line heights.
Similar to the Colors Page, it’s crucial to emphasize that you should not make direct changes to font sizes or line heights on this page. The Typography Page serves exclusively as a reference. To adjust font sizes, type scale, or line heights, please make these modifications through ACSS Tokens’ typography settings. You can learn how to do this on this documentation page.