Hopp til innhold

Ikon relatert til em-size

Stein Olav Pettersen

2020.09.07

Bakgrunn

Ikonbiblioteket i Jøkul har frem til nå bestått av desktop- og kompaktversjoner av ikonene og hatt varierende størrelser på innrammingen. Dette kan gi utfordringer mht plassering hvis man ønsker å bytte ut en instance av et ikon i Figma eller i kode.

Løsning

For å lage et enklere og mer fleksibelt prinsipp har vi valgt å basere ikonene på fontens em-size. Det betyr at alle ikonene er tegnet innenfor en ramme som matcher fontens høyde mens bredden tilpasses ikon- bredden. Slik følger vi samme prinsipp som for tegn med ulik bredde i et skriftsnitt. Ikonets baseline (grunnlinje) følger fontens baseline og ikonet kan i praksis skaleres opp relatert til fontens størrelse. På denne måten trenger vi ikke lenger én definert ikonstørrelse for desktop og en annen for kompakt fordi det samme ikonet følger fontstørrelsen.

(Her kan du enten stoppe å lese eller fortsette hvis du ønsker nerdete detaljer...)

Tykkelse

Ikonene er tegnet slik at de følger tykkelsen til fonten Fremtind Grotesk i størst mulig grad. I motsetning til fonten har ikonene samme tykkelse på horisontale og vertikale streker og er bygget opp med en strektykkelse tilsvarende Fremtind Grotesk satt i 20 px (desktop body size). 
Enkelte ikoner slik som Checkmark, Kryss og Pluss er i tillegg tegnet i bold og minuskel-versjoner. Dette for at de skal kunne fremstå som ekstra tydelige i sammenligningstabeller og gi større spillerom.

For vanlige ikoner er strektykkelsen satt til 1,2 px mens den for bold versjoner er satt til 2,0 px.

Men hvorfor …?

Strektykkelsene kunne variert kalligrafisk slik at de matchet fontens vekt både horisontalt og vertikalt og totalt sett vært justert slik at de optisk fremsto som like. For å ha et forvaltbart og enkelt system har vi besluttet å bruke de eksakte verdiene ovenfor. Med tanke på optisk justering har bold versjonene kun fått en tykkere strek selv om konsekvensen er at ikonet bygger lavere i forhold til optisk grunnlinje enn regular versjon gjør. Gevinsten er at ikonet får større muligheter for dynamisk animert strektykkelse.

Skalering i Figma

Hvis et ikon skaleres opp for å matche en gitt fontstørrelse er det viktig at du tar utgangspunkt i fontsize og ikke lineheight. Ikonet skaleres proposjonalt i høyde/bredderetning slik at det ikke blir strukket (hold inne shift-tasten). Merk at ved skalering i Figma må du bruke scale-funksjonen (keyboard-K) slik at også strektykkelsen skaleres sammen med størrelsen.

Og så videre ...

Prinsippene ovenfor er viktige å ta hensyn til ved design av nye ikoner slik at vi får et konsistent og funksjonelt ikonbibliotek: Design ikonet som en font med optiske justeringer i forhold til baseline og sett i forhold til fontens høyder på versaler og minuskler men bruk de definerte verdiene for strektykkelser.