Typography

Font size classes set both font-size (in rem) and line-height together.

Font weight classes are scoped to text elements to avoid unintentional inheritance. This means, if you prefer, you can simply use bold instead of font-bold on text elements without the text prefix

Sass mixins

Mixin	CSS properties
text($name)	font-size, line-height
font($name)	font-weight
font-weight($name)	font-weight
font-size($name)	font-size, line-height
font-family($name)	font-family
tracking($name)	letter-spacing
leading($name)	line-height
italic	font-style: italic
not-italic	font-style: normal

Responsive range mixins

Pass a base value followed by named breakpoint overrides, such as crayon.text-size-range("base", $md: "lg", $lg: "2xl").

Mixin	Purpose
text-size-range($base, $responsive...)	Responsive font size and line height
text-weight-range($base, $responsive...)	Responsive font weight
text-leading-range($base, $responsive...)	Responsive line height
text-tracking-range($base, $responsive...)	Responsive letter spacing

Utility classes

Font Size

Class	Property
text-xs	font-size: 0.75rem; line-height: 1rem
text-sm	font-size: 0.875rem; line-height: 1.25rem
text-base	font-size: 1rem; line-height: 1.5rem
text-lg	font-size: 1.125rem; line-height: 1.75rem
text-xl	font-size: 1.25rem; line-height: 1.75rem
text-2xl	font-size: 1.5rem; line-height: 2rem
text-3xl	font-size: 1.875rem; line-height: 2.25rem
text-4xl	font-size: 2.25rem; line-height: 2.5rem
text-5xl	font-size: 3rem; line-height: 1
text-6xl	font-size: 3.75rem; line-height: 1
text-7xl	font-size: 4.5rem; line-height: 1
text-8xl	font-size: 6rem; line-height: 1
text-9xl	font-size: 8rem; line-height: 1

Scoped Font Weight

Class	Property inside text elements
thin	font-weight: 100
extralight	font-weight: 200
light	font-weight: 300
normal	font-weight: 400
medium	font-weight: 500
semibold	font-weight: 600
bold	font-weight: 700
extrabold	font-weight: 800
black	font-weight: 900

Global Font Weight

Class	Property
font-thin	font-weight: 100
font-extralight	font-weight: 200
font-light	font-weight: 300
font-normal	font-weight: 400
font-medium	font-weight: 500
font-semibold	font-weight: 600
font-bold	font-weight: 700
font-extrabold	font-weight: 800
font-black	font-weight: 900

Font Family

Class	Property
font-sans	font-family: sans-serif
font-serif	font-family: Georgia, "Times New Roman", serif
font-mono	font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace

Font Style

Class	Property inside text elements
italic	font-style: italic
not-italic	font-style: normal

Letter Spacing

Class	Property
tracking-tighter	letter-spacing: -0.05em
tracking-tight	letter-spacing: -0.025em
tracking-normal	letter-spacing: 0em
tracking-wide	letter-spacing: 0.025em
tracking-wider	letter-spacing: 0.05em
tracking-widest	letter-spacing: 0.1em

Line Height

Class	Property
leading-none	line-height: 1
leading-tight	line-height: 1.25
leading-snug	line-height: 1.375
leading-normal	line-height: 1.5
leading-relaxed	line-height: 1.625
leading-loose	line-height: 2

Examples

Mixins

scss

@use "crayon-css" as crayon;

.page-title {
  @include crayon.text("4xl");
  @include crayon.font("bold");
}

.supporting-copy {
  @include crayon.text("sm");
  @include crayon.font("light");
  @include crayon.italic;
}

sass

@use "crayon-css" as crayon

.page-title
  +crayon.text("4xl")
  +crayon.font("bold")

.supporting-copy
  +crayon.text("sm")
  +crayon.font("light")
  +crayon.italic

Utility classes

<!-- Font size and line height -->
<p class="text-base">Base body text</p>
<p class="text-sm">Small body text</p>
<h1 class="text-4xl">Large heading</h1>

<!-- Global font weight classes -->
<p class="font-bold">Bold text</p>
<span class="font-semibold">Semibold text</span>
<p class="font-light">Light text</p>

<!-- Scoped style classes work inside text elements -->
<p><span class="italic">Italic text</span></p>
<p><span class="not-italic">Normal text</span></p>

Sass functions

scss

@use "crayon-css" as crayon;

.page-title {
  font-family: crayon.font-family("sans");
  font-size: crayon.font-size("4xl");
  font-weight: crayon.font-weight("bold");
  line-height: crayon.leading("tight");
}

.supporting-copy {
  font-size: crayon.font-size("sm");
  font-weight: crayon.font-weight("light");
  letter-spacing: crayon.tracking("wide");
}

sass

@use "crayon-css" as crayon

.page-title
  font-family: crayon.font-family("sans")
  font-size: crayon.font-size("4xl")
  font-weight: crayon.font-weight("bold")
  line-height: crayon.leading("tight")

.supporting-copy
  font-size: crayon.font-size("sm")
  font-weight: crayon.font-weight("light")
  letter-spacing: crayon.tracking("wide")

CSS Variables

<style>
  .page-title {
    font-family: var(--font-sans);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
  }

  .supporting-copy {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-light);
    letter-spacing: var(--tracking-wide);
  }
</style>