Text size

.h1, .h2, etc. make fonts larger and bold. They have the same styles as h1, h2, etc.

.sm1, .sm2, etc. make fonts smaller. These are utility classes that can be combined with other classes.

{% apply view_source %}
.h1 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
{% end %} {% apply view_source %}
.h2 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
{% end %} {% apply view_source %}
.h3 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
{% end %} {% apply view_source %}
.h4 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
{% end %} {% apply view_source %}
.h5 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
{% end %} {% apply view_source %}
.h6 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
{% end %} {% apply view_source %}
Normal .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
{% end %}

Text alignment

.text-middle vertically centers text in a block.

{% apply view_source %}
H1 text
centered
H2 text
centered
H3 text
centered
H4 text
centered
H5 text
centered
H6 text
centered
{% end %}

Letter spacing

The .ls-* classes set the letter spacing.

The .ls-n* classes set negative letter spacing.

{% apply view_source %}
.ls-1 have small positive letter spacing.
.ls-2 have medium positive letter spacing.
.ls-3 have large positive letter spacing.
.ls-4 have extra positive negative letter spacing.
This is normal letter spacing.
.ls-n1 have small negative letter spacing.
.ls-n2 have medium negative letter spacing.
.ls-n3 have large negative letter spacing.
.ls-n4 have extra large negative letter spacing.
{% end %}

You can customize the letter spacings using these variables:

Line height

The .lh-* classes set the line height.

{% apply view_source %}
.lh-1. Default: 1. Here is some sample text for reference.
.lh-2. Default: 1.1. Here is some sample text for reference.
.lh-3. Default 1.25. Here is some sample text for reference.
Normal. Default: 1.5. Here is some sample text for reference.
.lh-4. Default: 2. Here is some sample text for reference.
{% end %}

You can customize the line heights using these variables:

Text shadow

.text-shadow adds a text shadow to inline text.

{% apply view_source %}

.text-shadow .text-shadow-none

{% end %}