innercircle-css-fluid-typography
/* This is inspired by https://type-scale.com/ & https://websemantics.uk/tools/responsive-font-calculator/ */
/* Use normal clamp function to determine range at https://websemantics.uk/tools/responsive-font-calculator */
/* Determine how your type scale, minor second 1.067 to golden ration 1.618 <--Don't use gold ratio */
/* Understand this font scaling is best used for desktop screen, there is a media query at 762 to change scaling*/
:root {
--font-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.3774)), 2rem); /* 16px - 20px*/
--type-scale: 1.333;
/* Calculate type size */
--text-xs: calc(var(--text-sm)/var(--type-scale));
--text-sm: calc(var(--h6)/var(--type-scale));
--text-lg: var(--h5);
--text-xl: var(--h4);
--text-xxl: var(--h3);
--hero-text: calc((var(--h1)* var(--type-scale))* var(--type-scale));
--h6: var(--font-size);
--h5: calc(var(--h6) * var(--type-scale));
--h4: calc(var(--h5) * var(--type-scale));
--h3: calc(var(--h4) * var(--type-scale));
--h2: calc(var(--h3) * var(--type-scale));
--h1: calc(var(--h2) * var(--type-scale));
}
html {font-size:62.5%;
}
h1 {
font-size: var(--h1);
}
h2 {
font-size: var(--h2);
}
h3 {
font-size: var(--h3);
}
h4 {
font-size: var(--h4);
}
h5 {
font-size: var(--h5);
}
h6 {
font-size: var(--h6);
}
p {
font-size: var(--font-size);
}
.hero-text{
font-size: var(--hero-text);
}
.text-xxl {
font-size: var(--text-xxl);
}
.text-xl {
font-size: var(--text-xl);
}
.text-lg {
font-size: var(--text-lg);
}
.text-sm {
font-size: var(--text-sm);
}
.text-xs {
font-size: var(--text-xs) ;
}
@media only screen and (max-width: 762px) {
:root {
--type-scale: 1.1;
}