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 vote129 views1 answer
Request.env.cr.execute how to get the fetched data in dictionary
CSS
0 vote138 views1 answer
@fontface otf
CSS
0 vote125 views1 answer
How to make website using html and css
CSS
126 votes141 views7 answers
Css box shadow
CSS
0 vote161 views2 answers
Css hexagon with text inside
CSS
1 vote143 views2 answers
Scss exceeded maximum budget. Budget 7.00 kB was not met by 841 bytes with a total of 7.82 kB.
CSS
6 votes144 views2 answers
Css border opacity
CSS
0 vote135 views1 answer
Add more than 2 css jquery
CSS
0 vote131 views2 answers
Min font-size
CSS
1 vote139 views1 answer
Perimeter around my background image
CSS