Bulma 0.9.0 is out! With RTL support and spacing helpers.

Release notes Download it now

Typography helpers

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


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 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 7 sizes.


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 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
has-text-left-mobile left-aligned unchanged unchanged unchanged unchanged
has-text-left-touch left-aligned left-aligned unchanged unchanged unchanged
has-text-left-tablet-only unchanged left-aligned unchanged unchanged unchanged
has-text-left-tablet unchanged left-aligned left-aligned left-aligned left-aligned
has-text-left-desktop-only unchanged unchanged left-aligned unchanged unchanged
has-text-left-desktop unchanged unchanged left-aligned left-aligned left-aligned
has-text-left-widescreen-only unchanged unchanged unchanged left-aligned unchanged
has-text-left-widescreen unchanged unchanged unchanged left-aligned left-aligned
has-text-left-fullhd unchanged unchanged unchanged unchanged left-aligned

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


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 5 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-medium Transforms text weight to medium
has-text-weight-semibold Transforms text weight to semi-bold
has-text-weight-bold Transforms text weight to bold

Font family #

Since 0.7.4

You can change the font family with the use of one of 5 font family helpers:

Class Family
is-family-sans-serif Sets font family to $family-sans-serif
is-family-monospace Sets font family to $family-monospace
is-family-primary Sets font family to $family-primary
is-family-secondary Sets font family to $family-secondary
is-family-code Sets font family to $family-code

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

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!