Typography and related utility classes

General

Theme allows merchants to adjust the base font size for both mobile and desktop. Default values being 16 pixels mobile and 18 pixels desktop.

Typography sizing is heavily based on utility classes which help developers keep consistent visual hierarchy.

About font scaling

We have adjusted how "rem" sizing works in Taiga theme. Typically 1rem equals 16 pixels, but we have made it so that 1rem equals 10 pixels. This makes rem sizing more easy to understand. 

Typography utility classes

Below is a list of utility classes found in the theme and their size (if default font sizes are applied).

Class name Desktop size (default) Mobile size (default)
 .h1

40px

32px
.h2

32px

26px
.h3

26px

22px
.h4

22px

20px
.h5

20px

18px
.h6

18px

16px
.caption

14px

12px
.small

16px

14px
.subdued

20px

18px
.enlarge

20px

18px
.bigger

32px

26px
.big

26px

22px
.normal

18px

16px
.subheading

20px

18px