Typography
The LeafLink platform uses one font, and one font only — a custom version of Sofia Pro specifically designed for LeafLink and our needs in Figma. LL Sofia Pro was designed by Olivier Gourvat and published by Mostardesign.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Type Scale and Styles
Our typescale contains four different header text sizes (h1, h2, h3, h4) all with the same style, paragraph (p) text containing three styles, and small (small) text also containing three styles.
The quick brown fox jumps over the lazy dog.
tw-text-sm (0.875rem/14px - Default font size, paragraphs, labels, links)
The quick brown fox jumps over the lazy dog.
tw-text-sm tw-font-medium tw-text-ice-900 (0.875rem/14px/ice-900/medium - h4's)
The quick brown fox jumps over the lazy dog.
tw-text-base (1rem/16px - ?)
The quick brown fox jumps over the lazy dog.
tw-text-base tw-font-medium tw-text-ice-900 (1rem/16px/ice-900/medium - h3's)
The quick brown fox jumps over the lazy dog.
tw-text-xl tw-font-medium tw-text-ice-900 (1.25rem/20px/ice-900/medium - h2's)
The quick brown fox jumps over the lazy dog.
tw-text-2xl tw-font-medium tw-text-ice-900 (1.5rem/24px/ice-900/medium - h1's)
The quick brown fox jumps over the lazy dog.
heading-jumbo (1.5rem/24px/ice-900/medium - Jumbo h1's)
The quick brown fox jumps over the lazy dog.
<h1> element
The <h1> element will have base styles applied to it by default.
The quick brown fox jumps over the lazy dog
<h1>The quick brown fox jumps over the lazy dog</h1>Or if not using an <h1> for some reason, but you still want the styling, use tw-text-2xl tw-font-medium tw-text-ice-900:
<div class="tw-text-2xl tw-text-ice-900">The quick brown fox jumps over the lazy dog</div>INFO
<h1> elements have a bottom margin from our base styles that won't apply automatically to other elements.
<h2> element
The <h2> element will have base styles applied to it by default.
The quick brown fox jumps over the lazy dog
<h2>The quick brown fox jumps over the lazy dog</h2>Or if not using an <h2> for some reason, but you still want the styling, use tw-text-xl tw-font-medium tw-text-ice-900:
<div class="tw-text-xl tw-text-ice-900">The quick brown fox jumps over the lazy dog</div><h3> element
The <h3> element will have base styles applied to it by default.
The quick brown fox jumps over the lazy dog
<h3>The quick brown fox jumps over the lazy dog</h3>Or if not using an <h3> for some reason, but you still want the styling, use tw-text-base tw-font-medium tw-text-ice-900:
<div class="tw-text-base tw-font-medium tw-text-ice-900">The quick brown fox jumps over the lazy dog</div><h4> element
The <h4> element will have base styles applied to it by default.
The quick brown fox jumps over the lazy dog
<h4>The quick brown fox jumps over the lazy dog</h4>Or if not using an <h4> for some reason, but you still want the styling, use tw-text-sm tw-font-medium tw-text-ice-900:
<div class="tw-text-sm tw-font-medium tw-text-ice-900">The quick brown fox jumps over the lazy dog</div><p> element
The <p> element will have base styles applied to it by default.
The quick brown fox jumps over the lazy dog
<p>The quick brown fox jumps over the lazy dog</p>Or if not using an <p> for some reason, but you still want the styling, use tw-text-sm:
<div class="tw-text-sm">The quick brown fox jumps over the lazy dog</div>INFO
<p> elements have a bottom margin from our base styles that won't apply automatically to other elements.
<small> element
The <small> element will have base styles applied to it by default.
<small>The quick brown fox jumps over the lazy dog</small>Or if not using an <small> for some reason, but you still want the styling, use tw-text-xs:
<div class="tw-text-xs">The quick brown fox jumps over the lazy dog</div>