Under udviklingen af dette site har jeg eksperimenteret med de nye muligheder for variable fonts i CSS – her med Roboto Flex. Fontens egenskaber kan justeres dynamisk ud fra brugerens skærmbredde, fx bredde, x-højde og vægt. Det giver bedre læsbarhed og udnytter skærmens bredde mere effektivt.
Prøv selv:
Juster størrelsen på dit browservindue for at se, hvordan typografien ændrer sig.
Bemærk: Denne side er skabt som en typografisk test på forskellige skærmstørrelser. Hvis du bruger mobil, eller ikke kan ændre størrelsen på dit browservindue, vil du ikke opleve den fulde dynamik.
Typografisk test:
Headline 1 er den mest markante med dynamisk bredde og lav x-højde.
Heading 1 har en høj værdi i Optical Size, hvilket tydeligt adskiller den fra brødteksten, der også bruger Roboto Flex – men med en lavere værdi i Optical Size. Det giver en højere x-højde og mere åbne inderformer, som øger læsbarheden.
Heading 2 har samme karakter som ovenfor, men med en lidt nedtonet effekt
Mauris in dui odio. Donec in dolor non felis convallis ultrices quis id neque. Nulla vel egestas dolor. Morbi augue arcu, aliquam ut justo sed, ullamcorper maximus orci. Duis a aliquet neque.
Heading 3 er endnu en nedskalering af effekten.
Mauris in dui odio. Donec in dolor non felis convallis ultrices quis id neque. Nulla vel egestas dolor. Morbi augue arcu, aliquam ut justo sed, ullamcorper maximus orci. Duis a aliquet neque.
Heading 4 nærmer sig brødtekstens x-højde og optiske størrelse.
Her er en længere brødtekst til at illustrere en artikeltekst: This increases the fine typographic control available to typographers and enables a new kind of “parametric” typography. Lorem ipsum dolor sit amet, adipiscing elit. Donec volutpat posuere volutpat. Mauris in dui odio. Donec in dolor non felis convallis ultrices quis id neque. Nulla vel egestas dolor. Morbi augue arcu, aliquam ut justo sed, ullamcorper maximus orci. Duis a aliquet neque. Praesent vel dui vel mauris ultrices mollis.
Om teknikken bag variable fonts:
Variable fonts gør det muligt at styre typografiens egenskaber direkte i CSS ved hjælp af fontakser som weight, width, slant, x-height og optical size. I stedet for at indlæse flere faste fontfiler, kan man med én enkelt fil variere udtrykket dynamisk.
Optical Size justerer fontens proportioner, så den tilpasses skriftstørrelsen: store overskrifter får mere karakter og kontrast, mens mindre tekst bliver mere åben og læsbar. I dette eksempel bruges CSS-variabler til at ændre værdierne flydende efter skærmbredden, så typografien forbliver balanceret og funktionel – uanset device.
