Typography helpers

Change the size and color of the text for one or multiple viewport width

Size #

There are 7 sizes to choose from:

Class	Font-size
`is-size-1`	`3rem`
`is-size-2`	`2.5rem`
`is-size-3`	`2rem`
`is-size-4`	`1.5rem`
`is-size-5`	`1.25rem`
`is-size-6`	`1rem`
`is-size-7`	`0.75rem`

Responsive size #

You can choose a specific size for each viewport width. You simply needed to append the viewport width to the size modifier.

For example, here are the modifiers for $size-1:

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
`is-size-1-mobile`	`3rem`	unchanged	unchanged	unchanged	unchanged
`is-size-1-tablet`	unchanged	`3rem`	unchanged	unchanged	unchanged
`is-size-1-touch`	`3rem`	`3rem`	unchanged	unchanged	unchanged
`is-size-1-desktop`	unchanged	unchanged	`3rem`	`3rem`	`3rem`
`is-size-1-widescreen`	unchanged	unchanged	unchanged	`3rem`	`3rem`
`is-size-1-fullhd`	unchanged	unchanged	unchanged	unchanged	`3rem`

Class

Mobile
Up to 768px

Tablet
Between 769px and 1023px

Desktop
Between 1024px and 1215px

Widescreen
Between 1216px and 1407px

FullHD
1408px and above

is-size-1-mobile

3rem

unchanged

is-size-1-tablet

unchanged

3rem

unchanged

is-size-1-touch

3rem

unchanged

is-size-1-desktop

unchanged

3rem

is-size-1-widescreen

unchanged

3rem

is-size-1-fullhd

unchanged

3rem

You can use the same logic for each of the 7 sizes.

Colors #

You can set any element to one of the 9 colors or 9 shades of grey:

Class	Color
`has-text-white`	`hsl(0, 0%, 100%)`
`has-text-black`	`hsl(0, 0%, 4%)`
`has-text-light`	`hsl(0, 0%, 96%)`
`has-text-dark`	`hsl(0, 0%, 21%)`
`has-text-primary`	`hsl(171, 100%, 41%)`
`has-text-info`	`hsl(204, 86%, 53%)`
`has-text-link`	`hsl(217, 71%, 53%)`
`has-text-success`	`hsl(141, 71%, 48%)`
`has-text-warning`	`hsl(48, 100%, 67%)`
`has-text-danger`	`hsl(348, 100%, 61%)`
`has-text-black-bis`	`hsl(0, 0%, 7%)`
`has-text-black-ter`	`hsl(0, 0%, 14%)`
`has-text-grey-darker`	`hsl(0, 0%, 21%)`
`has-text-grey-dark`	`hsl(0, 0%, 29%)`
`has-text-grey`	`hsl(0, 0%, 48%)`
`has-text-grey-light`	`hsl(0, 0%, 71%)`
`has-text-grey-lighter`	`hsl(0, 0%, 86%)`
`has-text-white-ter`	`hsl(0, 0%, 96%)`
`has-text-white-bis`	`hsl(0, 0%, 98%)`

Alignment #

You can align the text with the use of one of 4 alignment helpers:

Class	Alignment
`has-text-centered`	Makes the text centered
`has-text-justified`	Makes the text justified
`has-text-left`	Makes the text aligned to the left
`has-text-right`	Makes the text aligned to the right

Responsive Alignment #

You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier.

For example, here are the modifiers for has-text-left:

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
`has-text-left-mobile`	left-aligned	unchanged	unchanged	unchanged	unchanged
`has-text-left-tablet`	unchanged	left-aligned	left-aligned	left-aligned	left-aligned
`has-text-left-tablet-only`	unchanged	left-aligned	unchanged	unchanged	unchanged
`has-text-left-touch`	left-aligned	left-aligned	unchanged	unchanged	unchanged
`has-text-left-desktop`	unchanged	unchanged	left-aligned	left-aligned	left-aligned
`has-text-left-desktop-only`	unchanged	unchanged	left-aligned	unchanged	unchanged
`has-text-left-widescreen`	unchanged	unchanged	unchanged	left-aligned	left-aligned
`has-text-left-widescreen-only`	unchanged	unchanged	unchanged	left-aligned	unchanged
`has-text-left-fullhd`	unchanged	unchanged	unchanged	unchanged	left-aligned

Class

Mobile
Up to 768px

Tablet
Between 769px and 1023px

Desktop
Between 1024px and 1215px

Widescreen
Between 1216px and 1407px

FullHD
1408px and above

has-text-left-mobile

left-aligned

unchanged

has-text-left-tablet

unchanged

left-aligned

has-text-left-tablet-only

unchanged

left-aligned

unchanged

has-text-left-touch

left-aligned

unchanged

has-text-left-desktop

unchanged

left-aligned

has-text-left-desktop-only

unchanged

left-aligned

unchanged

has-text-left-widescreen

unchanged

left-aligned

has-text-left-widescreen-only

unchanged

left-aligned

unchanged

has-text-left-fullhd

unchanged

left-aligned

Text transformation #

You can transform the text with the use of one of 4 text transformation helpers:

Class	Transformation
`is-capitalized`	Transforms the first character of each word to uppercase
`is-lowercase`	Transforms all characters to lowercase
`is-uppercase`	Transforms all characters to uppercase
`is-italic`	Transforms all characters to italic

Text weight #

You can transform the text weight with the use of one of 4 text weight helpers:

Class	Weight
`has-text-weight-light`	Transforms text weight to light
`has-text-weight-normal`	Transforms text weight to normal
`has-text-weight-semibold`	Transforms text weight to semi-bold
`has-text-weight-bold`	Transforms text weight to bold

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub