From 1e80ab31eec0f2e7f50ce99ed4b5f302ee949997 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 21 May 2021 03:21:11 +0200 Subject: [PATCH] Use relative units as base font size Using pixels to define font sizes has an important problem: it ignores user settings. No matter whether users set their font size to 16px (the default font size in most browsers), to 18px (like I do) or to 32 px (like users with huge screens or with a visual disability); the size will not change. Even if most browsers can zoom to somehow overcome this issue, it's still annoying. And, in our case, we use relative units most of the time but absolute units in some places. This leads to situations where some of the text gets larger when users increase their font size while some of the text remains the same. Sometimes this results in titles having a smaller size than regular text below it. The solution is using relative units everywhere. Quoting the Web Accessibility Initiative guide for styles [1]: > The user needs to be able to resize the text to 200% of its size > anywhere on the page, without the text being cut off or overlapping > other text. The font size should be defined in relative units, such as > percentages, em or rem. It is not possible to zoom text set in pixels > independently from the rest of the page in some browsers. [1] https://www.w3.org/WAI/tutorials/page-structure/styling/ --- app/assets/stylesheets/_consul_settings.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 9bfa4fdc3..49341ef02 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -10,7 +10,7 @@ // 1. CONSUL variables // -------------------- -$base-font-size: 17px; +$base-font-size: rem-calc(17); $base-line: rem-calc(26); $small-font-size: rem-calc(14); $line-height: rem-calc(24);