CSS Units and Fluid Typography

px is a fixed size, while rem is relative to the root font size, so layouts that use rem grow when users increase their browser's text size. em is relative to the current element's font size, which suits icons that should scale with their text. ch is the width of the 0 character, so max-width: 65ch keeps lines at a readable length. clamp(min, preferred, max) picks a fluid value between two limits, for example a heading that grows with the viewport width but never gets too small or too large. A unitless line-height scales with the font size.

html { font-size: 100%; }
body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  max-width: 65ch;
  margin-inline: auto;
  padding: 1rem;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.icon { width: 1.5em; height: 1.5em; }