Widget typography

The widget theme uses Inter font family which has support for nine different weights 100-900. Other font familes should in most cases not be used.

Thin 100 — The quick brown fox jumps … 123456789

Extra Light 200 — The quick brown fox jumps … 123456789

Light 300 — The quick brown fox jumps … 123456789

Normal 400 — The quick brown fox jumps … 123456789

Medium 500 — The quick brown fox jumps … 123456789

Semi Bold 600 — The quick brown fox jumps … 123456789

Bold 700 — The quick brown fox jumps … 123456789

Extra Bold 800 — The quick brown fox jumps … 123456789

Black 900 — The quick brown fox jumps … 123456789

/* Available weights 100–900 */
.example-fw-100 {
   font-weight: 100;
}

Headings

Widgets should use UI Text for headings.

Overline

Heading

Section heading

Subheading

Caption / description

<p class="env-ui-text-overline">Overline</p>
<h1 class="env-ui-text-heading">Heading</h1>
<h2 class="env-ui-text-sectionheading">Section heading</h2>
<h3 class="env-ui-text-subheading">Subheading</h3>
<p class="env-ui-text-caption">Caption / description</p>

Dynamic font size in widgets

Widgets already has a containment context which makes them dynamic font containers by default. Therefore the dynamic font container is not required.

Here is an overview of how different size widgets will change size at different Dashboard grid sizes. The dashboard grid adapts between 1–4 columns depending on available screen space.

Widget	1 column	2 columns	3 columns	4 columns
Small	250–342	250–342	250–342	250–342
Medium	250–523	524–708	534–708	524–708
Large	250–523	524-812	813-1071	798–1074
Extra Large	250–523	524-812	813-1071	1072–1440

There are additional widget specific boundaries available for Dynamic fonts. Regular boundaries are documented on the Dynamic font size page. Boundaries are set using modifier classes env-dynamic-font--from-{value} and env-dynamic-font--to-{value}.

Additional boundaries for from values: 524, 813, 1072

Additional boundaries for to values: 342, 523, 708, 812, 1071, 1440