På responsive websites er tekststørrelsen ofte lidt et smertensbarn. Billeder kan automa­tisk resizes, så de hele tiden passer til skærmens størrelse, mens tekststørrelser via media queries ændres i ‘ryk’, så f.eks. overskrifterne på mobilskærme er 36px, på tablets 48px og på store skærme er 60px. Det er ikke altid lige kønt, men det er heller ikke til at arbej­de med, hvis der skal bruges alt for mange breakpoints.

Med Sass kan det dog lade sig gøre ændre skriftstørrelsen dynamisk.

Først laves en funktion, her kaldet ‘between’:

@function between($from, $to, $fromWidth, $toWidth) {
    $slope: ($to - $from) / ($toWidth - $fromWidth);
    $base: $from - $slope * $fromWidth;
    @return calc(#{$base} + #{100vw * $slope});
}

Dernæst defineres de ønskede breakpoints, f.eks.:

$smallscreen: 380px;
$largescreen: 1100px;

og herefter kan vi definere skalerbare skriftstørrelser, i dette tilfælde for h1:

h1 {
    font-size: 24px; 
    @media (min-width: $smallscreen) {
        font-size: between(36px, 96px, $smallscreen, $largescreen);
    }
    @media (min-width: $largescreen) {
        font-size: 96px;
    }

Skriftstørrelsen bliver dynamisk, når skærmstørrelsen er mellem to breakpoints.

• Skærm mindre end 380px bred => skriftstørrelse: 24px
• Skærm mellem 380px og 1100px bred => skriftstørrelsen er mellem 36px og 96px, afhængig af skærmens bredde
• Skærm over 1100px bred => skriftstørrelse: 96px.

OBS! Skriftstørrelsen skal angives i pixels, ikke i em eller rem.

Funktionen ‘between’ og brugen af den er beskrevet grundigt hos CSS Tricks og kan selvfølgelig bruges til meget andet end skriftstørrelser – det er dog et overskueligt sted at starte, og noget vi har savnet.

Links

• CSS Tricks: Between The Lines