Dynamic Fonts

Key Points:

- Good for people with low vision & cognitive reading disabilities (e.g. dyslexia).

- Dynamic fonts are more accessible than Static fonts because they allow people to choose the size, styles, weights & widths of text displayed on their screens.

- They offer a more inclusive experience for people using devices with smaller screens (e.g. smartphones & tablets).

- Fonts are defined as text characters such as letters, numbers, symbols, and punctuation.

Introduction

People can experience difficulty reading on screen texts, either through a disability or because of age related difficulties.

With that in mind, designers & developers can provide assistance by having dynamic fonts incorporated into their digital content.

Put simply, dynamic fonts allow users to choose the font they want by size, style, & weight.

Not only is this good design practice, but it also offers a more inclusive experience for everyone when accessing digital content, especially on devices with smaller screen sizes.

How Dynamic Fonts Work?

Dynamic fonts (also known as “variable fonts”) allow users a choice of different sizes, styles & weights for screen text. Animation of characters is also possible with dynamic fonts.

That is in contrast with Static fonts, which are fully predefined & only have the option to rescale text size, but lack the means to easily change text styles, weights, widths & overall appearance.

Dynamic fonts are especially suitable for people who prefer the option to change how screen text looks on responsive devices (e.g. smartphones).

For designers & developers, dynamic fonts have the advantage of being sourced from a single file and when implemented with CSS @font-face & style rules, allow for a wide range of text variations. When also coded as CSS em units, they are more flexible and adaptable than CSS px units.

Example of a Dynamic Font

A dynamic font called “IBM Plex Sans” allows a wide range of font weights to be chosen.

The same font can be presented in numerous ways, a tiny sample of which is shown in the image below;

thin 100 weight, thin 100 weight italic, extralight 200 weight, extralight 200 weight italic, light 300 weight, light 300 weight italic, regular 400 weight, regular 400 weight italic, etc.

Two broad categories of dynamic font text variations (known as “axes”) are used by designers & developers

1). Standard Axes of variation; with five options to vary font appearance;

• Width (font-stretch CSS controls the variable font character widths).

• Weight (font-weight CSS controls the variable font character weights).

• Italics (font-style CSS checks if the variable font is italic or not).

• Slant (font-style CSS controls the variable font character slant).

• Optical-sizing (to increase or decrease the thickness of font characters based on their font size).

2). Custom Axes of variation; with unlimited options to vary font appearance as specifically defined by designers & developers.

In general, all axes of variation can be applied in the following ways

With CSS code font-size, font-style & font-weight (for Standard axes only) & values set as, for example;

.heading {font-weight: 250; font-style: oblique 450deg; font-stretch: 60%; font-optical-sizing: auto;}

With font-variation-settings (for both Standard and Custom axes) & values set as, for example;

.heading {font-variation-settings: "wght" 400, “slnt” 35, "wdth" 30, "opsz" 55;}

Conclusion

Dynamic fonts make it possible to adjust axes as needed, which is very useful for creating responsive designs that adapt easily to different devices & screen sizes.

They can ensure text is legible for many users, including for people with low vision & dyslexia.

For example, optical sizing can enhance overall readability on small screens, varying contrast levels can also be adjusted for light and dark mode screen environments, and choosing wider widths between font characters can assist people with dyslexia.

It is worth considering dynamic fonts to help create more inclusive & accessible experiences for people of all abilities.