Dynamic font size

Use Dynamic font size to scale the base font size of an element. Any element children using relative font sizes will scale proportionally.

A container element is required as a wrapper. There are set widths for the container where the scaling starts and stops. The scaling and width parameters may be controlled using modifer classnames as described below.

The default values are a scaling factor of 1 – 1.25 between widths 400px – 750px.

Required markup

A containment context is required. The easiest way to create one is to use the container element. The containment context determines the width from which the scaling of the dynamic font is calculated.

Inside the container, place one or more dynamic font elements using class env-dynamic-font. Text inside these elements will be dynamically scaled, text outside will not.

<div class="env-container">
   <div class="env-dynamic-font">
      <p class="env-text">
         This text will resize!
      </p>
   </div>
</div>

Note: When using Envision for Dashboard Widgets, the container element is not required since the widget already is a containment context.

Additional markup

To not interfere with the width calculations, padding must be used on a separate element inside the container element. Elements placed inside the container but outside of env-dynamic-font will not scale.

<div class="env-container">
   <div class="env-p-around--medium">
      <h2 class="env-ui-text-sectionheading">
         This heading will not resize
      </h2>
      <div class="env-dynamic-font">
         <p class="env-text">
            This text will resize ...
         </p>
      </div>
   </div>
</div>

Controlling the scaling

Scaling factor

Use modifer env-dynamic-font--{scale} where {scale} may be one of:

1_125, 1_25, 1_375, 1_5, 1_625, 1_75, 1_875, 2

Default scaling factor is 1.25 which is identical to using the 1_25 modifer.

Note that dot is replaced by underscore as dot is not allowed in CSS class names.

<div class="env-container">
   <div class="env-dynamic-font env-dynamic-font--scale-1_125">
      <p class="env-text">
         Scaling factor 1.125
      </p>
   </div>
</div>

Scaling width boundaries

The scaling will occur between two set widths. If the container width is smaller than the from-value, the scaling will be set to the lowest possible value and vice versa for the to-value.

Boundaries are set using modifier classes env-dynamic-font--from-{value} and env-dynamic-font--to-{value}.

Allowed from values: 250, 300, 350, 400, 450, 500, 550

Allowed to values: 500, 550, 600, 650, 700, 750, 800, 900, 1000

Default boundaries are from 400 to 750.

<div class="env-container">
   <div class="env-dynamic-font env-dynamic-font--from-250 env-dynamic-font--to-500">
      <p class="env-text">
         From 250 to 500
      </p>
   </div>
</div>

Note: When using Envision for Dashboard Widgets, there are additional widget specific boundaries available.

Downscaling

The default is scaling up from 1 – 1.25. Scaling may be reversed, so 1 is the highest factor by using the modifier env-dynamic-font--downscale. The lowest factor will then be 1 / {scale}, which is 0.8 at default settings.

<div class="env-container">
   <div class="env-dynamic-font">
      <p class="env-text">
         Upscaling factor 1.25 (default)
      </p>
   </div>
   <div class="env-dynamic-font env-dynamic-font--scale-2">
      <p class="env-text">
         Upscaling factor 2
      </p>
   </div>
   <div class="env-dynamic-font env-dynamic-font--downscale">
      <p class="env-text">
         Downscaling factor 1.25
      </p>
   </div>
   <div class="env-dynamic-font env-dynamic-font--scale-2 env-dynamic-font--downscale">
      <p class="env-text">
         Downscaling factor 2
      </p>
   </div>
</div>

CSS settings

For higher precision in setting the values, the following CSS variables may be set.

Note! Do not use any units.

<div class="env-container">
   <div class="env-dynamic-font example-custom-dynamic-font-settings">
      <p class="env-text">
         Scaling factor 1.2345
      </p>
   </div>
</div>

.example-custom-dynamic-font-settings {
   /* Scaling factor */
   --env-dynamic-font-scale: 1.2345;
   /* Container from- and to widths (px) */
   --env-dynamic-font-from-width: 357;
   --env-dynamic-font-to-width: 579;
}