The CSS clamp function - an explanation.
Horizontal Scroll to see CLAMP in action!
( clamp() can be used on most HTML elements )
CSS CLAMP to select/set the default font. (clamp on font size & line-height)
* { font-family: <-- * Universal, targets everything,
aggressive. -->
'segoe UI Variable Display', system-ui, -apple-system, BlinkMacSystemFont, Ubuntu,
Roboto, Arial, Verdana, Helvetica, sans-serif;
font-size: clamp(0.9rem, 1.5vw + 0.5rem, 1.5rem);
font-kerning: normal; letter-spacing: normal; line-height: clamp(1rem, 2vw + 0.5rem, 1.5rem); word-spacing: 0.04rem;
word-wrap: break-word; }
- The clamp function - clamp (min, preferred, max)
- Preferred - the most important, sets the initial (base) font size for the default font by using VW (which is 1% of total width) and your adjustment ie 1.25vw
- min & max - Use REM(root EM). Values are calculated using Preferred(base) and are the min/max size that the font will shrink or grow to.
After "CLAMP" the default font will display - minimum - preferred/base - maximum - depending on the size of the Viewport (width).
CSS CLAMP to control fluid text size.
Using .smallest {font-size: clamp(.55rem, .65vw,
.70rem);} displays > Smallest
Using .smaller {font-size: clamp(.65rem, .75vw, .80rem);
} displays > Smaller
Using .small {font-size: clamp(.75rem, 1.05vw, 1rem); }
displays > Small
Using .big {font-size: clamp(1rem, 1.55vw, 1.5rem); }
displays > Big
Using .bigger {font-size: clamp(1.25rem, 2.05vw, 2rem); }
displays > Bigger
CSS REM (No clamp) to control text size. (the old way)
Using.smallest {font-size: .55rem;} displays > Smallest
Using
.smaller {font-size: .65rem;} displays > Smaller
Using
.small {font-size: .85rem;} displays > Small
Using
.big {font-size: 1.2rem;} displays > Big
Using
.bigger {font-size: 1.9rem;} displays > Bigger
HTML text elements - Note the font size and spacing. No text decoration applied.
<h1> Heading # 1 - Sample text - </h1>
<h2> Heading # 2 - Sample text - </h2>
<h3> Heading # 3 - Sample text - </h3>
<h4> Heading # 4 - Sample text - </h4>
<h5> Heading # 5 - Sample text - </h5>
<h6> Heading # 6 - Sample text - </h6>
<p> p - Block-level element - defines a paragraph. </p>
<span class="small"> span - Inline - Container for text styled by CSS. </span><pre> pre - Inline - Preformatted text - d o e s not collapse spaces </pre>
<blockquote> blockquote - Inline -Quoted from another source. L & R margins indented.</blockquote>
<code> code - Inline - Displays fragments of computer code in a
monospaced font. </code> <kbd> kbd - Inline -Represents user keyboard input. Dispalyed in monospace font. </kbd>
<samp> samp - Inline - Encloses sample output from a computer program</samp>
ins: Represents text that has been inserted or added to the document.