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.

   <p class="example-fw-100">
      Thin 100 — The quick brown fox jumps … 123456789
   </p>
   <p class="example-fw-200">
      Extra Light 200 — The quick brown fox jumps … 123456789
   </p>
   <p class="example-fw-300">
      Light 300 — The quick brown fox jumps … 123456789
   </p>
   <p class="example-fw-400">
      Normal 400 — The quick brown fox jumps … 123456789
   </p>
   <p class="example-fw-500">
      Medium 500 — The quick brown fox jumps … 123456789
   </p>
   <p class="example-fw-600">
      Semi Bold 600 — The quick brown fox jumps … 123456789
   </p>
   <p class="example-fw-700">
      Bold 700 — The quick brown fox jumps … 123456789
   </p>
   <p class="example-fw-800">
      Extra Bold 800 — The quick brown fox jumps … 123456789
   </p>
   <p class="example-fw-900">
      Black 900 — The quick brown fox jumps … 123456789
   </p>
/* Available weights 100–900 */
.example-fw-100 {
   font-weight: 100;
}

Headings

Widgets should use UI Text for headings.

<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

Envision documentation