Web accessibility: Accessible Fluid Typography

Pablo — Sat, 30 Nov 2024 22:52:03 +0000

Introduction
Before all: font-size: 20px - bad practice
How to make accessible fluid text
Typography components in 10 minutes
Inspired by

Introduction

Today I want to remind about important topic - Accessibility. It's a community-driven
effort to make digital accessibility easier.

Small part of this topic is typography. The text should look good with any browser font-size.

100%	200%

Before all: `font-size: 20px` - bad practice

I know, we all did that, a lot of people on the internet use it in their courses. But it is a bad approach. Here is one simple rule if you are not sure which unit to choose:

px - fixed-size elements that won't change, such as for borders or shadows.

rem - font sizes to make it accessible to users who have changed their browser's default font size.

vw / vh - elements sizing sticking with viewport size

% - elements sizing sticking with relative size

How to make accessible fluid text

All we need is clamp() to make it accessible and formula to
make it responsive.

Make sure you set global font-size to 16px. And line-height at least 1.2

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
}

Define your minimum and maximum screen size, 320 px - 1920 px in my case.
Define size of your text you want to have at your minimum and maximum screen. In my example I have h1 tag so my
font-size will be 50px and 90px accordingly.
Go to https://utopia.fyi/type/calculator and put your values there

Scroll down to CSS Generator. We need --step-0 value

   Copy
   /* @link https://utopia.fyi/type/calculator?c=320,50,1.2,1920,90,1.25,2,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
--step--2: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
--step--1: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
--step-0: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);
--step-1: clamp(3.75rem, 3.0938rem + 3.2813vw, 7.0313rem);
--step-2: clamp(4.5rem, 3.6422rem + 4.2891vw, 8.7891rem);
}

Put clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem); as font-size of your text.

Result :

320px	1920px	1920px(200% zoom)

You can see that with 1 line of css my text is responsive and accessible for browser scaling as well.

Typography components in 10 minutes

My intention was to create flexible Typography component as fast and as flexible as possible.

I took my largest h1 text. Went to https://utopia.fyi/type/calculator and generated 8 downscale steps:

This would be my p, h1-6, span and label text sizes

    --size-text-s: clamp(0.7268rem, 0.6834rem + 0.2169vw, 0.9437rem);
    --size-text-m: clamp(0.8721rem, 0.8106rem + 0.3075vw, 1.1796rem);
    --size-text-l: clamp(1.0466rem, 0.961rem + 0.428vw, 1.4746rem);
    --size-h6: clamp(1.2559rem, 1.1384rem + 0.5873vw, 1.8432rem);
    --size-h5: clamp(1.507rem, 1.3476rem + 0.797vw, 2.304rem);
    --size-h4: clamp(1.8084rem, 1.5941rem + 1.0716vw, 2.88rem);
    --size-h3: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
    --size-h2: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
    --size-h1: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);

Then a 5 more minutes playing with react and Voilà:

My reusable typography components for React

Inspired by

Using REM Doesn't Make Your Website Responsive - Here's Why

Fluid Typography