Ikoner - system for størrelser

[Steinop]

Tidligere har vi vært inne på idéen om å lage en "bounding box" rundt ikonene slik at (den usynlige) innrammingen av ikonet har lik høyde/bredde. Dette skaper gjerne nye utfordringer mht høyre og venstrejustering ved at et smalt ikon dermed vil få visuelt større marg enn et ikon som er bredere.

Forslag til løsning:
Knytte ikonstørrelse (høyde) til fontstørrelse / 1em. Ikonets bredde avhenger av ikonets utforming (en nedoverpil er smalere enn et forstørrelsesglass).

På den måten vil ikonet alltid kunne venstre- eller høyrejusteres (eller i særtilfeller sentreres?).
Slik vil vi få et visuelt konsistent uttrykk basert på typografisk skala

Dette vil innebære at vi tar utgangspunkt i en gitt fontstørrelse (praktisk at denne er så stor som mulig) og visuelt tilpasser ikonene til fontens tykkelse, baseline, versalhøyde, etc. Kanskje vi trenger en regular og en bold versjon av ikonene (ref. skjemaer med 1 px checkmarks som kan oppfattes som spinkle)? Et annet alternativ kan til og med være å bake ikonene inn i fonten fremfor SVG-versjoner.

Ved å knytte ikonstørrelse opp mot fontsize får vi disse fordelene:
• Konsistent visuelt uttrykk basert på typografisk skala
• Én sannhet mht utforming ved at vi har én original av hvert ikon istedenfor tilpassede størrelser
• Lik avstand til omgivelser (margins, etc) uansett hvordan ikonet er utformet

Ulemper ved løsningen:
• Hvis vi outliner ikonene kan det muligens skape utfordringer ved evt. animasjon i ikonene, men det må vi teste ut. Trenger ikke bety noe.
• Antialiasing i ulike browsere/skjermer fordi fonten ikke går opp i 1px bredde uansett størrelse?

Figma:
Bytte av ikon-instances kan umiddelbart by på noen utfordringer i Figma men det ser ut til at løsningen er å bruke AutoLayout med kun én ikon-komponent instance (man må legge til to ikon-insances for å lage en autolayout - deretter fjerner man den éne instancen). Autolayoutframen venstre/høyrejusteres i komponent-framen.

Figmaskisser: https://www.figma.com/file/TkbB9ANfejDSjB2u4u1OEuqM/J%C3%B8kul-komponenter-byggesone?node-id=15067%3A48642