Alles in rem angeben ist am besten, es berücksichtigt die Browsereinstellungen des Users, wenn er größere Schrift gewählt hat.
Link zum Artikel hier.
Tool zum Generieren optimaler Font-Größen für headlines:
https://type-scale.com/
Schriftgrößen variabel fluiden lassen mit min(), max() und clamp():
https://kulturbanause.de/blog/min-max-und-clamp-drei-css-funktionen-fuer-dynamischere-websites/
Tool, um Schriftgrößen variabel und relativ zur Bildschirmgröße zu setzen:
https://modern-fluid-typography.vercel.app/
Auch interessant:
Aber:
Linien (border) u.ä. in px darstellen, damit sie scharf sind!
In Mediaqueries:
em verwenden!
Beispiel Agentur-Lorch-Seite:
html{
font-family: 'Open Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
h1{
font-size: 2.35rem;
@media screen and (max-width: 1024px){ // 85%
font-size: 2rem;
}
small{
font-size: 1rem;
font-family: 'Open Sans';
font-weight: 400;
line-height: 1.5;
}
}
h2{
font-size: 2rem;
@media screen and (max-width: 1024px){ // 83%
font-size: 1.66rem;
}
}
h3{
font-size: 1.7rem;
@media screen and (max-width: 1024px){ // 83%
font-size: 1.41rem;
}
}
h4{
font-size: 1.35rem;
@media screen and (max-width: 1024px){ // 83%
font-size: 1.12rem;
}
}
h5, h6{
font-size: 1rem;
}
