In general, the following practices and guidelines should be followed:
$p-font-sizes: (
null : ($base-font-size, $base-line-height),
small : (($mobile-font-size - 4px), $mobile-line-height),
large : ($base-font-size, $base-line-height)
);Three different font weights regular (font-weight: 400), medium (font-weight: 500), and bold (font-weight: 700).
As with most other things, these come with the {size}- variants.
Helper classes for common font sizes/line-heights used in designs
| class | Desktop ( > large break) | Mobile | ||
|---|---|---|---|---|
| font-size | line-height | font-size | line-height | |
| .fs-xxlarge | 2.25rem (36px) | 1.2 | 1.4rem | 1.2 |
| .fs-xlarge | 1.75rem (28)px | 1.2 | 1.25rem | 1.2 |
| .fs-large | 1.3125rem (21px) | 1.4 | 1.125rem | 1.4 |
| .fs-medium | 1.125rem (18px) | 1.4 | 1rem | 1.5 |
| .fs-regular | 1rem (16px) | 1.5 | 0.875rem | 1.25 |
| .fs-small | 0.875rem (14px) | 1.4 | 0.875rem (14px) | 1.5 |
| .fs-xsmall | 0.75rem (12px) | 1.5 | 0.75rem | 1.5 |
| .fs-xxsmall | 0.6875rem (11px) | 1.5 | 0.6875rem | 1.5 |
| .fs-tiny | 0.625rem (10px) | 1.5 | 0.625rem | 1.5 |
| .fs-xtiny | 0.5625rem (9px) | 1.5 | 0.5625rem | 1.5 |
$h1-font-sizes: (
null : (3.15rem, 1.2),
small : (2rem, 1.2),
large : (3.15rem, 1.2)
);
$h2-font-sizes: (
null : (2.37rem, 1.2),
small : (1.5rem, 1.2),
large : (2.37rem, 1.2)
);
$h3-font-sizes: (
null : (1.77rem, 1.4),
small : (1.15rem, 1.4),
large : (1.77rem, 1.4)
);
$h4-font-sizes: (
null : (1.33rem, 1.4),
small : (.9rem, 1.4),
large : (1.33rem, 1.4)
);
$h5-font-sizes: (
null : (1rem, 1.4),
small : (.75rem, 1.4),
large : (.75rem, 1.4)
);
$h6-font-sizes: (
null : (.8rem, 1.4),
small : (.56rem, 1.4),
large : (.56rem, 1.4)
);
These also come in the {size}- variants.
To see our typefaces and their usage guidelines, head here.
Hi! I'm a <p> tag. I should be used with Montserrat under most contexts, unless you're doing an article page. On articles, I should be PT Serif.
Bacon ipsum dolor amet porchetta turkey filet mignon salami biltong. Shank pork chop jowl turkey, t-bone strip steak alcatra brisket sirloin flank swine. Ham hock rump doner venison beef ribs short ribs meatloaf. Boudin chuck spare ribs kielbasa tri-tip pork loin jerky swine turducken flank.
It's still me, the <p> tag, but this time as I should look on an article page. Aren't I easy to read?
Bacon ipsum dolor amet porchetta turkey filet mignon salami biltong. Shank pork chop jowl turkey, t-bone strip steak alcatra brisket sirloin flank swine. Ham hock rump doner venison beef ribs short ribs meatloaf. Boudin chuck spare ribs kielbasa tri-tip pork loin jerky swine turducken flank.
Hello there! I'm your friend the <pre> tag. I should be displayed with a monospace font.
Bacon ipsum dolor amet porchetta turkey filet mignon salami biltong. Shank pork chop jowl turkey, t-bone strip steak alcatra brisket sirloin flank swine. Ham hock rump doner venison beef ribs short ribs meatloaf. Boudin chuck spare ribs kielbasa tri-tip pork loin jerky swine turducken flank.
Konichiwa! I'm a <quote> tag. My fontface is TBD (TKTK) so someone should be filling me out shortly.
Bacon ipsum dolor amet porchetta turkey filet mignon salami biltong. Shank pork chop jowl turkey, t-bone strip steak alcatra brisket sirloin flank swine. Ham hock rump doner venison beef ribs short ribs meatloaf. Boudin chuck spare ribs kielbasa tri-tip pork loin jerky swine turducken flank.