Typography ​

Astro typography is built using a modular scale. We use the Major Second (1.125) scale with a

Font Sizes ​

• One ring to rule them all

  var(--)

  font-size-xs

  13px / 0.8125rem

• One ring to rule them all

  var(--)

  font-size-sm

  14px / 0.875rem

• One ring to rule them all

  var(--)

  font-size-base

  16px / 1rem

• One ring to rule them all

  var(--)

  font-size-lg

  18px / 1.125rem

• One ring to rule them all

  var(--)

  font-size-xl

  20px / 1.25rem

• One ring to rule them all

  var(--)

  font-size-2xl

  23px / 1.4375rem

• One ring to rule them all

  var(--)

  font-size-3xl

  26px / 1.625rem

• One ring to rule them all

  var(--)

  font-size-4xl

  29px / 1.8125rem

• One ring to rule them all

  var(--)

  font-size-5xl

  32px / 2rem

• One ring to rule them all

  var(--)

  font-size-6xl

  36px / 2.25rem

Line Height ​

Use our line height tokens for better control over paragraphs or content that spans multiple lines.

• “You cannot pass,” he said. The orcs stood still, and a dead silence fell. “I am a servant of the Secret Fire, wielder of the flame of Anor. You cannot pass. The dark fire will not avail you, flame of Udûn. Go back to the Shadow! You cannot pass.”

  var(--)

  line-height-none1

• “You cannot pass,” he said. The orcs stood still, and a dead silence fell. “I am a servant of the Secret Fire, wielder of the flame of Anor. You cannot pass. The dark fire will not avail you, flame of Udûn. Go back to the Shadow! You cannot pass.”

  var(--)

  line-height-tight1.25

• “You cannot pass,” he said. The orcs stood still, and a dead silence fell. “I am a servant of the Secret Fire, wielder of the flame of Anor. You cannot pass. The dark fire will not avail you, flame of Udûn. Go back to the Shadow! You cannot pass.”

  var(--)

  line-height-normal1.5

• “You cannot pass,” he said. The orcs stood still, and a dead silence fell. “I am a servant of the Secret Fire, wielder of the flame of Anor. You cannot pass. The dark fire will not avail you, flame of Udûn. Go back to the Shadow! You cannot pass.”

  var(--)

  line-height-relaxed1.625

• “You cannot pass,” he said. The orcs stood still, and a dead silence fell. “I am a servant of the Secret Fire, wielder of the flame of Anor. You cannot pass. The dark fire will not avail you, flame of Udûn. Go back to the Shadow! You cannot pass.”

  var(--)

  line-height-loose2

Font Size / Line Height Pairings ​

Line height values are unitless to scale with the font size. However, at larger font sizes, manually adjust the line height using the following pairings.