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 Today I want to remind about important topic - Accessibility . It's a community-driven effort to make digital accessibility easier. Accessibility Small part of this topic is typography. The text should look good with any browser font-size. 100% 200% 100% 200% 100% 200% 100% 100% 200% 200% Before all: font-size: 20px - bad practice font-size: 20px 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. px rem - font sizes to make it accessible to users who have changed their browser's default font size. rem vw / vh - elements sizing sticking with viewport size vw / vh % - 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. clamp() Make sure you set global font-size to 16px. And line-height at least 1.2 Make sure you set global font-size to 16px . And line-height at least 1.2 font-size 16px line-height 1.2 html { font-size: 16px; /* 1 rem */ line-height: 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 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. h1 50px 90px Go to https://utopia.fyi/type/calculator and put your values there https://utopia.fyi/type/calculator Scroll down to CSS Generator. We need --step-0 value Scroll down to CSS Generator. We need --step-0 value --step-0 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); } 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. Put clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem); as font-size of your text. clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem); font-size Result : 320px 1920px 1920px(200% zoom) 320px 1920px 1920px(200% zoom) 320px 1920px 1920px(200% zoom) 320px 320px 1920px 1920px 1920px(200% zoom) 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: h1 https://utopia.fyi/type/calculator This would be my p, h1-6, span and label text sizes p, h1-6, span label --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); --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 My reusable typography components for React Inspired by Using REM Doesn't Make Your Website Responsive - Here's Why Using REM Doesn't Make Your Website Responsive - Here's Why Fluid Typography Fluid Typography
