Den här stilen definierar storleken med clamp-funktionen i CSS som ser ut så här:
font-size: clamp(32px, 5vw, 64px);
Webbläsaren börjar då med att sätta storleken på rubriken till 5% av bredden på webbläsarfönstret. Den ser dock till att storleken aldrig blir mindre än 32px på små skärmar samt att den aldrig blir mer än 64px på större skärmar.
Resultatet blir ett responsivt typsnitt som anpassar storleken efter bredden på skärmen.
För att använda det här i ett block kan du hoppa in i properties och lägga till följande:
<font mixin="title" default="sf-impact-heading" kind="title" enable-clamp="true" />
Vill du definiera en mindre storlek än standard från utseende kan du även lägga in t.ex. clamp="16,3,32"
<font mixin="title" default="sf-impact-heading" kind="title" enable-clamp="true" clamp="16,3,32 />
Då kommer CSSen se ut så här när användaren lägger in blocket:
font-size: clamp(16px, 3vw, 32px);
Sen går det givetvis fortfarande att redigera storleken via blockets designinställningar som vanligt.