Css - global -Typogryphy

/* Typography | Global */
:root {
  /* body font size */
  --text-base-size: 1em;
 
  /* type scale */
  --text-scale-ratio: 1.2;
  --text-xs: calc((--text-base-size / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
}
 
@media (min-width: 64rem) { /* responsive decision applied to all text elements */
  :root {
    --text-base-size: 1.25em;
    --text-scale-ratio: 1.25;
  }
}
 
h1, .text-xxl   { font-size: var(--text-xxl, 2.074em); }
h2, .text-xl    { font-size: var(--text-xl, 1.728em); }
h3, .text-lg    { font-size: var(--text-lg, 1.44em); }
h4, .text-md    { font-size: var(--text-md, 1.2em); }
.text-base      { font-size: --text-base-size; }
small, .text-sm { font-size: var(--text-sm, 0.833em); }
.text-xs        { font-size: var(--text-xs, 0.694em); }

Source: css-tricks.com

Similar codes

0 vote347 views1 answer
Format hexagonal css get
CSS
0 vote392 views1 answer
Shrink a div by 50%
CSS
61 votes492 views2 answers
Bootstrap flex direction column
CSS Bootstrap
0 vote371 views1 answer
All ipad Resolutio css
CSS
0 vote357 views1 answer
100vh doesn't fill the page
CSS
62 votes349 views3 answers
Css root variables
CSS
10 votes334 views6 answers
Css hover change another element
CSS
80 votes363 views2 answers
Text-transform
CSS
1 vote346 views1 answer
How to change color of element when hovering over div
CSS
0 vote339 views1 answer
How to make a width infinite and hidden using css
CSS