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 typography unit
4. .text-component
5. Line-height crop
6. Typography visual editor
7. 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); 
}

If you're using Em units, remember that modifying the parent's font size will affect all its children:

.parent {
  // edit the font-size of the component and all its children by 1.2
  font-size: 1.2em;

  // 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:

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.

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.

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, please refer to the Utilities page.