From 4e04adecf9cdea5e6744916e2f99194e9597eba4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 21 May 2021 02:31:10 +0200 Subject: [PATCH] Increase font size on extra large screens Nowadays there are many users with a screen of 1920px (or higher) width but who don't change their font-size preferences and keep them at 16px, which is the default in most browsers. On pages which use the whole window width, that results in unreasonably long lines which are very hard to read. That's the main reason why many sites (including CONSUL) use rules like `max-width: 75rem` for the body or other elements. However, on extra large screens this causes the content to be in the middle of the screen while most of the screen is empty, and the text might also be too small for that resolution, making it harder to read. There are a few approaches to solve this problem. Using just viewport units like `font-size: calc(4vw + 4vh + 2vmin);` is indeed responsive, but it's got an important flaw: it ignores user preferences, and so the font size will be the same for users who prefer a 16px size and for users who prefer a 32px size. Using `calc(1em + 0.2vw)` or similar might make the text too big on small screens. Finally, using `max(1em, 1vw)` would work in a similar way to what we're doing, but zooming in and out would only work when the viewport width is less than 100em (at that moment, 1em == 1vw). So we're taking an approach where zooming in and out always works at least to a certain degree (due to the 0.25em part) and the font size is increased gradually when we reach the point where the viewport width is bigger than 100em. We're using 0.25em since it will be exactly 4px with the default browser configuration, and so calculations are easier than with (for example) 0.3em. Disclaimer: I've tested this feature on several devices with different screen sizes and resolutions, but I must admit there might be cases I'm unaware of where there are side effects for certain combinations of screen size/resolution/dpi. In general, though, the side effects should be similar to what happens when users increase the font size in their browser's preferences. Note we're using `Max` instead of `max` because Sass can't handle the CSS `max` function, as mentioned in commit cdfa23fc6. --- app/assets/stylesheets/layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index d94a1224b..2cbd47922 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -33,6 +33,10 @@ @include normal-selection; } +html { + font-size: calc(0.25em + Max(0.75em, 0.75vw)); +} + html, body { height: 100%;