Responsive Typography – min and max font-size
Setting min and max font-size via CSS #
Learnings from Design Meets Code LAB: #Responsive Typography
6th June 2019 in Leipzig, Germany
font-size:
calc(
[minimum font size]
+ ([maximum font size] - [minimum font size])
* (
(100vw - [minimum viewport width])
/ ([maximum viewport width] - [minimum viewport width])
)
);
Example #
- minimum viewport width: 320px
- minimum font size: 14px
- maximum viewport width: 1600px
- maximum font size: 24px
font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1600 - 320)));
It's really important to skip the units in the first and last bracket.
Also make sure that the spaces are preserved.
SASS Mixin #
There are also several SASS Mixins:
// @include fluid-type(
[minimum viewport width],
[maximum viewport width],
[minimum font size],
[maximum font size]
);
body {
@include fluid-type(320px, 1600px, 14px, 24px);
}