Typography

Set your typography rules in the 📁 custom-style/_typography.scss file.

🔍 On this page:

1. Font family
2. Type scale
3. How to change the font-size unit
4. .text-component
5. Line-height crop
6. 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 {
  // body font size
  --text-base-size: 1em;
  
  // type scale
  --text-scale-ratio: 1.2;
  --text-xs: calc((1em / 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));
}

To control the scale, we’ve defined two variables: the --text-base-size and the --text-scale-ratio. The first one is the body font size, while the second one is the ratio used to generate the scale. The default value of --text-base-size is 1em.

By updating the --text-base-size and --text-scale-ratio values, you set global responsive rules that affect the responsiveness of 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) {
  :root {
    @include breakpoint(md) {
      --text-base-size: 1.25em;
      --text-scale-ratio: 1.25;
    }
  }
}

The type scale variables are used 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.

Optionally, you can set off-scale values in CSS:

.title {
  font-size: 3em; /* the size is no longer affected by the --text-scale-ratio */
  font-size: calc(var(--text-base-size) * 3); /* use base size to create new value - off scale */
  font-size: calc(var(--text-xxl) - 0.8em); /* use original font size to create new value - off scale */
  font-size: var(--text-xl); /* update the value of the font size using a different variable */
}

If you're using Em relative units, modifying the font-size of the parent element will affect all the children too:

.parent {
  font-size: 1.2em; /* edit the font-size of the component and all its children by 1.2 */
  font-size: 1rem; /* reset text size - the text size of the component is no longer affected by its parent */
}

Using utility classes:

<div class="parent [email protected]">
  <p class="text-base">This text is affected by the font-size of the parent</p>
</div>

An alternative approach to modify the text size on a component level is the textUnit mixin:

.component {
  @include textUnit(1rem);
}

The mixin will automatically update all the --text-{size} variables based on the new text base value. This approach is useful if you don't want to extend the automatic (typography) responsive behavior to a specific component.

Optionally, you can pass a second argument to the mixin: this will be used as new scale ratio (default is 1.2):

.component {
  @include textUnit(1rem, 1.3);
}

Change the font-size unit #

By default, CodyFrame uses Em units for typography.

If you prefer to use Rem units, for example, make the following changes in the 📁 custom-style/_typography.scss file:

1. Set the --text-base-size value equal to 1rem
2. Replace the 1em in the --text-xs variable with the --text-base-size variable
3. Redefine the .text-base utility class (font-size: var(--text-base-size);)

:root {
  // body font size  👇 [1/4]
  --text-base-size: 1rem;
  
  // type scale
  // ...
  //                       👇 [2/4]
  --text-xs: calc((var(--text-base-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
  // ...
}

.text-base {
  font-size: var(--text-base-size); // 👈 [3/4]
}

@each $breakpoint, $value in $breakpoints { // .text-base responsive variations
  @include breakpoint(#{$breakpoint}) {
    .text-base\@#{$breakpoint} { font-size: var(--text-base-size);} // 👈 [4/4]
  }
}

Follow the same guidelines if you want to use Px units.

.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.

Vertical spacing #

To control the vertical spacing of a text-component, you can edit the following CSS variables:

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.

⚠️ 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.

Utility classes #

For a full list of typography utility classes, please refer to the Utilities page.