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.

Style	Weight	Font Size	Letter Spacing	Line Height	Class	Design Token Identifier
Display 1	Light (300)	3.75 rem (60 px)	-0.50	4.375 rem (70 px)	`.rux-display-1`	`display-1`
Display 2	Regular (400)	3 rem (48 px)	0.00	3.5 rem (56 px)	`.rux-display-2`	`display-2`

Headings

Astro supports six levels of headline text.

Style	Weight	Font Size	Letter Spacing	Line Height	Class	Design Token Identifier
Heading 1	Regular (400)	2.125 rem (34 px)	0.25	2.5 rem (40 px)	`.rux-heading-1`	`heading-1`
Heading 1 Bold	Bold (700)	2.125 rem (34 px)	0.25	2 rem (32 px)	`.rux-heading-1-bold`	`heading-1-bold`
Heading 2	Regular (400)	1.5 rem (24 px)	0.00	1.75 rem (28 px)	`.rux-heading-2`	`heading-2`
Heading 3	Medium (500)	1.25 rem (20 px)	0.15	1.5 rem (24 px)	`.rux-heading-3`	`heading-3`
Heading 4	Light (300)	1.25 rem (20 px)	0.15	1.5 rem (24 px)	`.rux-heading-4`	`heading-4`
Heading 5	Regular (400)	1.125 rem (18 px)	0.00	1.5 rem (24 px)	`.rux-heading-5`	`heading-5`
Heading 6	Light (300)	1.125 rem (18 px)	0.00	1.5 rem (24 px)	`.rux-heading-6`	`heading-6`

Body Text

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

Style	Weight	Font Size	Letter Spacing	Line Height	Class	Design Token Identifier
Body 1	Regular (400)	1 rem (16 px)	0.50	1.5 rem (24 px)	`.rux-body-1`	`body-1`
Body 1 Bold	Bold (700)	1 rem (16 px)	0.50	1.5 rem (24 px)	`.rux-body-1-bold`	`body-1-bold`
Body 2	Regular (400)	0.875 rem (14 px)	0.50	1.25 rem (20 px)	`.rux-body-2`	`body-2`
Body 2 Bold	Bold (700)	0.875 rem (14 px)	0.50	1.25 rem (20 px)	`.rux-body-2-bold`	`body-2-bold`
Body 3	Regular (400)	0.75 rem (12 px)	0.00	1 rem (16 px)	`.rux-body-3`	`body-3`
Body 3 Bold	Bold (700)	0.75 rem (12 px)	0.00	1 rem (16 px)	`.rux-body-3-bold`	`body-3-bold`
Control Body 1	Regular (400)	1rem (16 px)	0.50	1.25 rem (20 px)	`.rux-control-body-1`	`control-body-1`
Control Body 1 Bold	Bold (700)	1rem (16 px)	0.50	1.25 rem (20 px)	`.rux-control-body-1-bold`	`control-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