Absatz – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Absatz – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Vorformatiert - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
| Tag | Min Width Px | Min Font Size | Max Width Px | Max Font Size | html {font-size:16px;} | ||
| h1 | 380 | 32 | PX | 1600 | 54 | PX | h1 {font-size: clamp(2rem, 1.57179rem + 1.803vw, 3.375rem);} |
| h2 | 380 | 26 | PX | 1600 | 40 | PX | h2 {font-size: clamp(1.625rem, 1.35235rem + 1.148vw, 2.5rem);} |
| h3 | 380 | 22 | PX | 1600 | 32 | PX | h3 {font-size: clamp(1.375rem, 1.18025rem + 0.82vw, 2rem);} |
| h4 | 380 | 19 | PX | 1600 | 26 | PX | h4 {font-size: clamp(1.1875rem, 1.05118rem + 0.574vw, 1.625rem);} |
| h5 | 380 | 18 | PX | 1600 | 23 | PX | h5 {font-size: clamp(1.125rem, 1.02763rem + 0.41vw, 1.4375rem);} |
| h6 | 380 | 16 | PX | 1600 | 20 | PX | h6 {font-size: clamp(1rem, 0.9221rem + 0.328vw, 1.25rem);} |
| body | 380 | 16 | PX | 1600 | 20 | PX | body {font-size: clamp(1rem, 0.9221rem + 0.328vw, 1.25rem);} |
| p | 380 | 16 | PX | 1600 | 20 | PX | p {font-size: clamp(1rem, 0.9221rem + 0.328vw, 1.25rem);} |
| Clamp Calculator for Fluid Typography | Built by Web Squadron | info@websquadron.co.uk | ||||||
| Root HTML | 16 | Default for Most Browsers is 16PX. This can be altered to any PX value; eg: 10. | Copy and Paste into your chosen CSS Location | ||||
| Tag | Min Width Px | Min Font Size | Max Width Px | Max Font Size | html {font-size:16px;} | ||
| h1 | 380 | 32 | PX | 1600 | 54 | PX | h1 {font-size: clamp(2rem, 1.57179rem + 1.803vw, 3.375rem);} |
| h2 | 380 | 26 | PX | 1600 | 40 | PX | h2 {font-size: clamp(1.625rem, 1.35235rem + 1.148vw, 2.5rem);} |
| h3 | 380 | 22 | PX | 1600 | 32 | PX | h3 {font-size: clamp(1.375rem, 1.18025rem + 0.82vw, 2rem);} |
| h4 | 380 | 19 | PX | 1600 | 26 | PX | h4 {font-size: clamp(1.1875rem, 1.05118rem + 0.574vw, 1.625rem);} |
| h5 | 380 | 18 | PX | 1600 | 23 | PX | h5 {font-size: clamp(1.125rem, 1.02763rem + 0.41vw, 1.4375rem);} |
| h6 | 380 | 16 | PX | 1600 | 20 | PX | h6 {font-size: clamp(1rem, 0.9221rem + 0.328vw, 1.25rem);} |
| body | 380 | 16 | PX | 1600 | 20 | PX | body {font-size: clamp(1rem, 0.9221rem + 0.328vw, 1.25rem);} |
| p | 380 | 16 | PX | 1600 | 20 | PX | p {font-size: clamp(1rem, 0.9221rem + 0.328vw, 1.25rem);} |
Fluid Standard:
https://www.fluid-type-scale.com/
Small: clamp(0.8rem, 0.14vw + 0.77rem, 0.89rem);
Base: clamp(1rem, 0.29vw + 0.93rem, 1.19rem);
Titel 4: clamp(1.25rem, 0.51vw + 1.12rem, 1.58rem);
Titel 3: clamp(1.56rem, 0.84vw + 1.35rem, 2.11rem);
Titel 2: clamp(1.95rem, 1.32vw + 1.62rem, 2.81rem);
Titel 1: clamp(2.44rem, 2.01vw + 1.94rem, 3.75rem);
XXXL: clamp(3.05rem, 2.99vw + 2.3rem, 5rem);
Aktuell eingestellt: Variante WebSquadron:
https://websquadron.co.uk/font-clamp-generator/
h1 font-size: clamp(2rem, 1.68864rem + 1.311vw, 3rem);
h2 font-size: clamp(1.625rem, 1.50815rem + 0.492vw, 2rem);
h3 font-size: clamp(1.375rem, 1.2971rem + 0.328vw, 1.625rem);
h4 font-size: clamp(1.125rem, 1.0471rem + 0.328vw, 1.375rem);
h5 font-size: clamp(1rem, 0.96105rem + 0.164vw, 1.125rem);
h6 font-size: clamp(1rem, 1rem + 0vw, 1rem);
body font-size: clamp(1rem, 1rem + 0vw, 1rem);
p font-size: clamp(1rem, 1rem + 0vw, 1rem)
Clamp Repeat Size
html {font-size:16px;}
h1 {font-size: clamp(2rem, 1.68864rem + 1.311vw, 3rem);}
h2 {font-size: clamp(1.625rem, 1.50815rem + 0.492vw, 2rem);}
h3 {font-size: clamp(1.375rem, 1.2971rem + 0.328vw, 1.625rem);}
h4 {font-size: clamp(1.125rem, 1.0471rem + 0.328vw, 1.375rem);}
h5 {font-size: clamp(1rem, 0.96105rem + 0.164vw, 1.125rem);}
h6 {font-size: clamp(1rem, 1rem + 0vw, 1rem);}
body {font-size: clamp(1rem, 1rem + 0vw, 1rem);}
p {font-size: clamp(1rem, 1rem + 0vw, 1rem);}
Some good practice is:
below shows Desktop and then Mobile – by using Font Clamp we can make it responsive for any screen size.
H1= 48px 32px
H2= 32px 26px
H3= 26px 22px
H4= 22px 18px
H5= 18px 16px
H6= 16px 16px
Body = 16px 16px