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 |