Skip to main content

Typography

Astro uses the open source typeface Roboto for all elements, but system fonts can also be used. As with all Astro elements, sizing is rendered in rem units. For those working with systems that don’t support rem, the corollary size is provided in points. Unless explicitly mentioned otherwise in a component, Astro recommends using sentence case capitalization throughout your applications.

Display Headings

Astro supports two levels of display text.

StyleWeightFont SizeLetter SpacingLine HeightClassDesign Token Identifier
Display 1Light (300)3.75 rem (60 px)-0.504.375 rem (70 px).rux-display-1display-1
Display 2Regular (400)3 rem (48 px)0.003.5 rem (56 px).rux-display-2display-2

Headings

Astro supports six levels of headline text.

StyleWeightFont SizeLetter SpacingLine HeightClassDesign Token Identifier
Heading 1Regular (400)2.125 rem (34 px)0.252.5 rem (40 px).rux-heading-1heading-1
Heading 1 BoldBold (700)2.125 rem (34 px)0.252 rem (32 px).rux-heading-1-boldheading-1-bold
Heading 2Regular (400)1.5 rem (24 px)0.001.75 rem (28 px).rux-heading-2heading-2
Heading 3Medium (500)1.25 rem (20 px)0.151.5 rem (24 px).rux-heading-3heading-3
Heading 4Light (300)1.25 rem (20 px)0.151.5 rem (24 px).rux-heading-4heading-4
Heading 5Regular (400)1.125 rem (18 px)0.001.5 rem (24 px).rux-heading-5heading-5
Heading 6Light (300)1.125 rem (18 px)0.001.5 rem (24 px).rux-heading-6heading-6

Body Text

The default font size in Astro is 1 rem/16 px. Astro supports three additional font sizes for body copy.

StyleWeightFont SizeLetter SpacingLine HeightClassDesign Token Identifier
Body 1Regular (400)1 rem (16 px)0.501.5 rem (24 px).rux-body-1body-1
Body 1 BoldBold (700)1 rem (16 px)0.501.5 rem (24 px).rux-body-1-boldbody-1-bold
Body 2Regular (400)0.875 rem (14 px)0.501.25 rem (20 px).rux-body-2body-2
Body 2 BoldBold (700)0.875 rem (14 px)0.501.25 rem (20 px).rux-body-2-boldbody-2-bold
Body 3Regular (400)0.75 rem (12 px)0.001 rem (16 px).rux-body-3body-3
Body 3 BoldBold (700)0.75 rem (12 px)0.001 rem (16 px).rux-body-3-boldbody-3-bold
Control Body 1Regular (400)1rem (16 px)0.501.25 rem (20 px).rux-control-body-1control-body-1
Control Body 1 BoldBold (700)1rem (16 px)0.501.25 rem (20 px).rux-control-body-1-boldcontrol-body-1-bold

Using Typography in Development

Using Utility Classes (Preferred)

When it comes to typography, working with individual design tokens can be verbose. Because of this, astro-web-components.css ships with a handful of CSS utility classes defined above that encapsulate all of our typography tokens, including letter-spacing, in a single place.

You may use these classes on individual elements through your application:

<h1 class="rux-heading-1">Heading 1</h1>

Using Tokens

If you’d prefer not to use utility classes or would like to create your own global styles, you may also use our raw typography tokens.

h1 {
  font-family: var(--font-heading-1-font-family);
  font-size: var(--font-heading-1-font-size);
  font-weight: var(--font-heading-1-font-weight);
  letter-spacing: var(--font-heading-1-letter-spacing);
  line-height: var(--font-heading-1-line-height);
}

Each Astro text style is built using a combination of design tokens. The design tokens are created by adding the corresponding value from the Design Token Identifier column above into each of the following design token patterns. An example result would be —font-display-1-letter-spacing.

  • —font-[identifier]-letter-spacing
  • —font-[identifier]-font-size
  • —font-[identifier]-line-height
  • —font-[identifier]-font-weight
  • —font-[identifier]-font-family