component

Typography

Manipulate text sizing, weight, aligment and other font properties.

Breakpoints modifiers

Class	Value	px	Example
`is-font-size-1`	`6rem`	96px	Font Size 1
`is-font-size-2`	`5rem`	80px	Font Size 2
`is-font-size-3`	`4rem`	64px	Font Size 3
`is-font-size-4`	`3rem`	48ox	Font Size 4
`is-font-size-5`	`2.5rem`	40px	Font Size 5
`is-font-size-6`	`2rem`	32px	Font Size 6
`is-font-size-7`	`1.5rem`	24px	Font Size 7
`is-font-size-8`	`1.25rem`	20px	Font Size 8
`is-font-size-9`	`1.125rem`	18px	Font Size 9
`is-font-size-10`	`1rem`	16px	Font Size 10
`is-font-size-11`	`.875rem`	14px	Font Size 11
`is-font-size-12`	`.75rem`	12px	Font Size 12

Headings

Class	Value	Size	px	Example
`is-h1`	--font-size-4	3rem	48px	Heading H1
`is-h2`	--font-size-5	2.5rem	40px	Heading H2
`is-h3`	--font-size-6	2rem	32px	Heading H3
`is-h4`	--font-size-7	1.5rem	24Px	Heading H4
`is-h5`	--font-size-8	1.25rem	20px	Heading H5
`is-h6`	--font-size-10	1rem	16px	Heading H6

Display

Rosetta also provides with display heading class when you need a heading to stand out:

Class	Font-Size	Example
`is-display-1`	5.75rem	Display
`is-display-2`	4.875rem	Display
`is-display-3`	4rem	Display

Alignment

Use text utilities as needed to change the alignment of elements:

Class	Example
`has-text-left`	Left
`has-text-center`	Center
`has-text-right`	Right

Text transformation

4 text transformation helpers are available for text:

Class	Example
`is-flatted`	none transformation applied
`is-lowercase`	This text will be all lowercase
`is-uppercase`	This text will be all uppercase
`is-capitalized`	This text will be all capitalize

Text weight

5 weight helpers are available for text:

Class	Font-Weight	Example
`has-text-light`	300	Example
`has-text-normal`	400	Example
`has-text-medium`	500	Example
`has-text-semibold`	600	Example
`has-text-bold`	700	Example

Variables

:root {
  --text-xs: .75rem;
  --text-xs-lh: 1rem;
  --text-sm: .875rem;
  --text-sm-lh: 1.5rem;
  --text-md: 1.125rem;
  --text-md-lh: 1.75rem;
  --text-lg: 1.5rem;
  --text-lg-lh: 1.75rem;
  --text-xl: 2.25rem;
  --text-xl-lh: 2.375rem;
  --text-xxl: 3rem;
  --text-xxl-lh: 3.25rem;
  --display-1-size: 5.75rem;
  --display-1-lh: 6.25rem;
  --display-2-size: 4.875rem;
  --display-2-lh: 5rem;
  --display-3-size: 4rem;
  --display-3-lh: 4.125rem;
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}