A formula for responsive font-size
source link: https://jameshfisher.com/2024/03/12/a-formula-for-responsive-font-size/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A formula for responsive font-size
This CSS is now part of most websites I make:
:root {
font-size: calc(1rem + 0.25vw);
}
This rule is an alternative to @media
rules like this from nytimes.com:
p { font-size: 1.125rem; }
@media (min-width: 740px) {
p { font-size: 1.25rem; }
}
This pattern is the norm: a small font size, a large font size, and a breakpoint. Here’s a sample of common sites:
Small font-size | Large font-size | Breakpoint | |
---|---|---|---|
Medium.com | 1.125rem |
1.25rem |
728px |
Substack.com | 1.125rem |
1.25rem |
768px |
Nytimes.com | 1.125rem |
1.25rem |
740px |
But breakpoints are mathematically ugly!
Instead of defining font-size
piecewise,
can’t we use one linear function?
Here’s the line I believe they’re trying to approximate:
With modern CSS, we can just write that function!
It’s calc(1.0625rem + 0.2604vw)
.
I round this to 1rem + 0.25vw
.
Sharp-eyed readers might wonder:
doesn’t my CSS have circular reasoning?
If rem
is defined as “Font size of the root element”,
how can we use 1rem
in the definition of font-size
on the root element?!
It turns out it’s a special case:
When specified in the
font-size
property of the root element, or in a document with no root element,1rem
is equal to the initial value of thefont-size
property.
Tagged #programming, #web. All content copyright James Fisher 2024. This post is not associated with my employer. Found an error? Edit this page.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK