Typography
Set your typography rules in the 📁 custom-style/_typography.scss
file.
🔍 On this page:
- Font Family
- Type Scale
- How to Change the Typography Unit
- .text-component
- Line-Height Crop
- Typography Visual Editor
- Utility Classes
Font Family #
Set the main font-family by updating the value of the --font-family
variable. Optionally, you can create new CSS variables and add more font-families:
:root {
// font family
--font-primary: Inter, Helvetica, sans-serif;
--font-secondary: Georgia, serif;
}
Type Scale #
The type scale is a modular scale of font sizes stored in CSS variables:
:root {
// font size
--text-base-size: 1em; // body font-size
--text-scale-ratio: 1.2; // multiplier used to generate the scale values 👇
}
:root, * {
// type scale
--text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
--text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
--text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-lg: calc(var(--text-md) * var(--text-scale-ratio));
--text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
--text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
--text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
--text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
}
The --text-base-size
and the --text-scale-ratio
control the type scale. The first one is the body font size, while the second one is the multiplier used to generate the scale.
By updating the --text-base-size
and --text-scale-ratio
values at a specific breakpoint, you set a (global) responsive rule that affects both spacing and typography. Learn more about this method in our article 'An approach to responsive layouts based on CSS custom properties and em units'.
@supports(--css: variables) {
@include breakpoint(md) {
:root {
--text-base-size: 1.25em;
--text-scale-ratio: 1.25;
}
}
}

Use the type scale variables to set the font-size of your text elements.
You can either use the custom properties in CSS:
.title {
font-size: var(--text-sm);
}
or use one of the font-size utility classes:
<h1 class="text-xxxl">Title</h1>
Optionally, you can set off-scale values in CSS:
.title {
// size no longer affected by the --text-scale-ratio
font-size: 3em;
// use base size to create new value - off scale
font-size: calc(var(--text-base-size) * 3);
// use original font-size to create new value - off scale
font-size: calc(var(--text-xxl) - 0.8em);
// update the value of the font-size using a different variable
font-size: var(--text-xl);
// control component typography using the --text-unit variable
--text-unit: 1rem;
font-size: var(--text-unit);
}
If you're using Em units, remember that modifying the parent's font size will affect all its children:
.parent-a {
// edit the font-size of the component and all its children by 1.2
font-size: 1.2em;
}
.parent-b {
// prevent Em compounding effect
// the text size of the children is no longer affected by the parent
font-size: 1rem;
}
Using utility classes:
<div class="parent [email protected]">
<p class="text-base">If you're using Em units, the font-size of this paragraph is affected by the font-size of the parent.</p>
</div>
Change Typography Unit #
By default, CodyFrame's typography system uses Em units.
If you prefer to use Rem units, make the following changes in the 📁 custom-style/_typography.scss
file:
:root {
--text-base-size: 1rem; // 👈 [1/3]
--text-unit: var(--text-base-size); // 👈 [2/3]
}
@supports(--css: variables) {
@include breakpoint(md) {
:root {
--text-base-size: 1.25rem; // 👈 [3/3]
}
}
}
Follow the same guidelines if you want to use Px units (replace 1rem with 16px).
To modify the typography unit on a component level, use the textUnit
mixin :
.component {
@include textUnit(1rem);
}
// starting from CodyFrame v2.8.0, the textUnit mixin is equivalent to 👇
.component {
--text-unit: 1rem;
font-size: var(--text-unit);
}
The mixin updates the --text-unit
variable on a component level. This variable is injected in all the type scale variables, and is used to (optionally) modify the typography CSS unit (for example, from Em to Rem units). The default value of the variable is 1em.
Alternatively, use one of CodyFrame's typography-unit utility classes:
Class | Description |
---|---|
.text-unit-rem |
switch to Rem units |
.text-unit-em |
switch to Em units |
.text-unit-px |
switch to Px units |
Example:
<div class="dropdown text-unit-rem">
<!-- this component's typography uses Rem units -->
</div>
.text-component #
The .text-component
is a class to be applied to any block containing typography elements. It takes care of 1) vertical rhythm and 2) styling inline elements. A good example of how to use this class is our Article component.
Class | Description |
---|---|
.text-component |
apply this class to blocks containing two or more text elements |
Vertical Spacing #
To control the vertical spacing of a text-component, you can edit the following CSS variables:
Variable | Description |
---|---|
--heading-line-height |
headings line-height |
--body-line-height |
body line-height |
--line-height-multiplier |
modify the line-height of all text elements |
--text-vspace-multiplier |
edit margins of all text elements |
Example:
Alternatively, you can use one of the line-height and vertical spacing utility classes.
.text-component__block #
The .text-component__block
class can be added to any block element within a text-component. It's used to automatically set vertical spacing and, optionally, to outset content or create grids containing images.
Class | Description |
---|---|
.text-component__block |
used to apply vertical spacing to block elements within a text-component |
.text-component__block--full-width |
set full-width for block element |
.text-component__block--left |
element floats left past 'sm' breakpoint |
.text-component__block--right |
element floats right past 'sm' breakpoint |
.text-component__block--outset |
element outset its parent past 'xl' breakpoint |
⚠️ Please note that, when used within the .text-component, the following elements already have vertical spacing applied and don't require the .text-component__block class: <h1>
, <h2>
, <h3>
, <h4>
, <ul>
, <ol>
, <p>
, <blockquote>
, <hr>
. A good example of how to use this class is the Article component.
Line-Height Crop #
To remove the top space on a text element caused by its line-height, you can use the lhCrop mixin.
Typography Editor #
The Typography Editor is a visual tool that helps you set the typography of your web project. Use it for font pairing, to generate the type scale, and set responsive rules. Paste the generated code into the 📁 custom-style/_typography.scss
file of CodyFrame.
Set the basic typography rules:
How to create and edit the typography scale:
How to use the Line-height Crop tool:
Utility Classes #
For a full list of typography utility classes, refer to the Utilities page.