Web accessibility: Accessible Fluid Typography

• 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 - to make it accessible and formula to

make it responsive.

1. 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;

} 

1. Define your minimum and maximum screen size, 320 px - 1920 px in my case.




2. 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.




3. Go to

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

   CODE Kopieren

      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);
   
   }
   
   

   
   
   
   
   
   
   
   
   
   1. 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

   
   
   

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

   
   
   
   
   

   CODE Kopieren

       --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à:

   
   
   
   
   

   Fluid Typography

   Vollständiger Original-Bericht

   Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

   ↗ Original-Artikel auf dev.to lesen