- Change from 15px to 1rem
- 1rem is 16px by default on browsers, AND “1rem” respects the browser’s font size setting, which “16px” does not
- Don’t shrink text for mobile
I kind of miss the smaller text, but this is more modern and easier to read.
Phone-width comparison
A notebook for the things I learn
This site is a place to keep notes worth finding again. Some entries are short answers to practical questions; others grow into longer explanations as I understand the subject better.
On a narrow screen, comfortable text matters more, not less. The measure is already short, so reducing the type does little to improve it—it mostly makes every line harder to read.
A notebook for the things I learn
This site is a place to keep notes worth finding again. Some entries are short answers to practical questions; others grow into longer explanations as I understand the subject better.
On a narrow screen, comfortable text matters more, not less. The measure is already short, so reducing the type does little to improve it—it mostly makes every line harder to read.
Both columns represent the same 360px-wide viewport and use the same font, weight, colors, padding, and unitless 1.6 line height. The proposal occupies more vertical space; that is the direct cost of making the text easier to read.
The whole scale
Small screens should not require small reading text.
Small screens should not require small reading text.
Small screens should not require small reading text.
Small screens should not require small reading text.
The 14px and 12px steps are the old responsive breakpoints. The 15px row is
the old desktop setting; 16px is the new baseline at every viewport. The live
setting is expressed as 1rem, allowing it to follow the browser’s preferred
default rather than fixing the baseline at 16 CSS pixels.