--- 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 %} {% capture left %}

left-aligned

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

Typography helpers

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

{% include anchor.html name="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
{% include anchor.html name="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.

{% include anchor.html name="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 %}
{% include anchor.html name="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-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
{% include anchor.html name="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:

{{ thead }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ left }} {{ left }} {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ left }} {{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }}
has-text-left-mobile
has-text-left-tablet
has-text-left-tablet-only
has-text-left-touch
has-text-left-desktop
has-text-left-desktop-only
has-text-left-widescreen
has-text-left-widescreen-only
has-text-left-fullhd
{% include anchor.html name="Text transformation" %}

You can transform the text with the use of one of 3 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
{% include anchor.html name="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