Typography helpers

Change the size, weight, and other font properties of the text

Size

There are 8 sizes to choose from:

Class Font-size Demo
is-size-1 3rem Teks
is-size-2 2.5rem Teks
is-size-3 2rem Teks
is-size-4 1.5rem Teks
is-size-5 1.25rem Teks
is-size-6 1rem Teks
is-size-7 0.875rem Teks
is-size-8 0.75rem Teks

Responsive Size

You can choose a specific size for each viewport width. You simply need 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-touch 3rem 3rem Unchanged Unchanged Unchanged
is-size-1-tablet Unchanged 3rem 3rem 3rem 3rem
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

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

Alignment

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

Class Demo
has-text-centered centered
has-text-justified justified
has-text-right right
has-text-left left

Responsive Alignment

You can align text differently for each viewport width. Simply 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
is-size-1-mobile left-aligned Unchanged Unchanged Unchanged Unchanged
is-size-1-touch left-aligned left-aligned Unchanged Unchanged Unchanged
is-size-1-tablet-only Unchanged left-aligned Unchanged Unchanged Unchanged
is-size-1-tablet Unchanged left-aligned left-aligned left-aligned left-aligned
is-size-1-desktop-only Unchanged Unchanged left-aligned Unchanged Unchanged
is-size-1-desktop Unchanged Unchanged left-aligned left-aligned left-aligned
is-size-1-widescreen-only Unchanged Unchanged Unchanged left-aligned Unchanged
is-size-1-widescreen Unchanged Unchanged Unchanged left-aligned left-aligned
is-size-1-fullhd Unchanged Unchanged Unchanged Unchanged left-aligned

You can use the same logic for each of the 4 alignments.

Font family

Class Demo
is-family-primary primary
is-family-sans-serif sans-serif
is-family-monospace monospace
is-family-code code

Text transformation

Class Demo
is-capitalized capitalized
is-lowercase lowercase
is-uppercase uppercase
is-italic italic
is-underline underline
is-strike strike

Text weight

Class Demo
has-text-weight-light light
has-text-weight-normal normal
has-text-weight-medium medium
has-text-weight-semibold semibold
has-text-weight-bold bold

Text maximal

Need is-block or is-inline-block

Class Demo Original
has-text-ellipsis 12345678901234567890 (auto this follow width elemen) 1234567890123456789
has-text-ellipsis is-10 12345678901234567890 1234567890123456789
has-text-ellipsis is-20 123456789012345678901234567890 12345678901234567890123456789
has-text-ellipsis is-40 12345678901234567890123456789012345678901234567890 123456789012345678901234567890123456789012