All the typography properties you define in the ACSS dashboard are available as variables. This is extremely handy for two types of scenarios:
- When you want to reference them on an element they wouldn’t apply to by default (i.e. you want to make sure a specific page element uses the same font family as your headings)
- When you want to override one of those properties in a specific context (i.e. you want a specific page section to use a different heading style, while still being attached to the framework in all other aspects)
The following typography variables can be accessed or changed at any time with custom styling:
The AutomaticCSS typography variables
Font-size variables
The font size variables correspond to ACSS’s global typography system heading sizes and text sizes:
--h1--h2--h3--h4--h5--h6--text-xxl--text-xl--text-l--text-m--text-s--text-xs
Heading properties variables
The following variables are declared globally for all heading levels:
--heading-font-family(if declared in the dashboard settings)--heading-color(if declared in the dashboard settings)--heading-line-height(available by default)--heading-font-weight(available by default)--heading-font-style(if declared in the dashboard settings)--heading-letter-spacing(if declared in the dashboard settings)--heading-text-transform(if declared in the dashboard settings)--heading-text-wrap(available by default)
Heading level-specific variables
If you choose to override your global heading properties on specific heading levels in the ACSS dashboard, the corresponding variables will be available.
Here are those variables for h1, but the same logic applies to other heading levels.
--h1-font-family(if declared in the dashboard settings)--h1-color(if declared in the dashboard settings)--h1-line-height(if declared in the dashboard settings)--h1-font-weight(if declared in the dashboard settings)--h1-font-style(if declared in the dashboard settings)--h1-letter-spacing(if declared in the dashboard settings)--h1-text-transform(if declared in the dashboard settings)--h1-max-width(available by default)
Note: specific heading levels have a variable for the max-width property, which isn’t available globally.
Text properties variables
The following variables are declared globally for text across the site:
--text-font-family(if declared in the dashboard settings)--text-color(if declared in the dashboard settings)--text-line-height(available by default)--text-font-weight(available by default)--text-font-style(if declared in the dashboard settings)--text-letter-spacing(if declared in the dashboard settings)--text-text-transform(if declared in the dashboard settings)--text-max-width(if declared in the dashboard settings)--text-text-wrap(available by default)
Text size-specific variables
If you choose to override your global text properties on specific text sizes in the ACSS dashboard, the corresponding variables will be available.
Here are those variables for the “XL” text size, but the same logic applies to other text sizes.
--text-xl-line-height(if declared in the dashboard settings)--text-xl-font-weight(if declared in the dashboard settings)--text-xl-font-style(if declared in the dashboard settings)--text-xl-letter-spacing(if declared in the dashboard settings)--text-xl-text-transform(if declared in the dashboard settings)--text-xl-max-width(available by default)
Examples of using typography variables
Referencing a heading size
Let’s say we want to use a level 2 heading (h2), but with a font size only as tall as our regular level 4 headings (h4) — this happens in situations where semantic HTML and accessibility dictate we need to use an h2, but the design calls for a smaller size.
We could create a custom class, and reference the --h2 variable as the font-size value:
.my-special-heading {
font-size: var(--h4);
}
Code language: CSS (css)Now apply that class on your h2 heading, and you have a heading element that is only as tall as an h4 heading, but keeps its semantic meaning.
This technique is demonstrated in the video dedicated to Typography in the ACSS 101 course, starting at 11:59:
Referencing the headings font family
Let’s say we want to create a custom component that needs to use our headings font family despite not being a heading (this doesn’t happen in every project, but could come in handy).
While we could reference our font family statically, that’s not always handy, and it‘s not very maintainable: what happens if we were to change typefaces in the future?
We’re not interested in the component using this specific font, we just want it to use what the headings typeface happens to be. It would be much better to be able to keep it in sync with the headings, rather than statically reference the font family.
Easy peasy, create a custom class, and reference the --heading-font-family variable as the font-family value:
.my-custom-component {
font-family: var(--heading-font-family);
}
Code language: CSS (css)Creating a very custom heading style (advanced usage)
Let’s say we want to create a special heading style that needs to look extra fancy.
It will seldom be used on the site, just for a few special headings related to a extremely high-end offer our client wants to run. Think handwritten, luxurious, ever-so-slightly over the top.
To achieve that, we could create a class, and use the variables in multiple ways:
- We’re going to redefine some of our heading variables in the context of our class (to define a handwritten font family and other properties that won’t be used for headings elsewhere on the site).
- We’re also going to reference our
--h1variable as the font size, to make sure those headings are always extremely noticeable.
By proceeding this way, we can create a completely custom heading style, while still being tied into the framework.
.fancy-heading {
--heading-font-family: "Birthstone", cursive;
--heading-color: var(--accent); /* see color palette documentation */
--heading-letter-spacing: 0.0125em;
--heading-line-height: calc(6px + 2ex);
font-size: var(--h1);
}
Code language: CSS (css)