--- title: Typography helpers layout: documentation doc-tab: modifiers doc-subtab: typography-helpers --- {% capture thead %} Class Mobile
Up to 768px Tablet
Between 769px and 1007px Desktop
Between 1008px and 1199px Widescreen
Between 1200px and 1391px FullHD
Above 1392px {% endcapture %} {% capture size1 %}

3rem

{% endcapture %} {% capture unchanged %}

unchanged

{% endcapture %} {% include subnav-modifiers.html %}

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:

{{ thead }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }}
is-size-1-mobile
is-size-1-tablet
is-size-1-touch
is-size-1-desktop
is-size-1-widescreen
is-size-1-fullhd

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{% include color/white.html %}
.has-text-black{% include color/black.html %}
.has-text-light{% include color/white-ter.html %}
.has-text-dark{% include color/grey-darker.html %}
.has-text-primary{% include color/turquoise.html %}
.has-text-info{% include color/blue.html %}
.has-text-success{% include color/green.html %}
.has-text-warning{% include color/yellow.html %}
.has-text-danger{% include color/red.html %}
.has-text-black-bis{% include color/black-bis.html %}
.has-text-black-ter{% include color/black-ter.html %}
.has-text-grey-darker{% include color/grey-darker.html %}
.has-text-grey-dark{% include color/grey-dark.html %}
.has-text-grey{% include color/grey.html %}
.has-text-grey-light{% include color/grey-light.html %}
.has-text-grey-lighter{% include color/grey-lighter.html %}
.has-text-white-ter{% include color/white-ter.html %}
.has-text-white-bis{% include color/white-bis.html %}

Alignment

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

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