component

Typography

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

Sizing

There are 6 sizes to choose from. Could be used as Headings from H1 to H6:

Class	Font-Size	Example
`is-text-xxl`	3rem	Example
`is-text-xl`	2.25rem	Example
`is-text-lg`	1.5rem	Example
`is-text-md`	1.125rem	Example
`is-text-sm`	.875rem	Example
`is-text-xs`	.6875rem	Example

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;
}