SF Font: Den Ultimative Guide til iOS Typografi

Når du designer en app til iPhone eller iPad, er valget af typografi afgørende for brugeroplevelsen. Apple har sine egne retningslinjer for fontstørrelser og -typer, som sikrer et ensartet og professionelt udseende på tværs af platformen. Denne guide dykker ned i de officielle iOS App Font Size Guidelines, med særligt fokus på SF Pro og SF Pro Display, den standard skrifttype, der definerer det karakteristiske iOS-look.

Hvad er SF Font?

SF, eller San Francisco, er Apples officielle systemskrifttype. Den er designet specifikt til at fungere optimalt på Apples enheder og giver en ren, læsbar og moderne æstetik. San Francisco-familien består primært af to varianter: SF Pro Display og SF Pro Text. SF Pro Display anbefales til større skriftstørrelser (20pt og derover), mens SF Pro Text er optimeret til mindre brødtekster og detaljer (19pt og derunder). At bruge disse skrifttyper er ikke et absolut krav, men det er den mest effektive måde at opnå det autentiske iOS-design på.

iOS Typografi Retningslinjer: En Oversigt

Apples retningslinjer for typografi er omhyggeligt udarbejdet for at sikre klarhed og konsistens. Lad os se på de mest almindelige elementer og deres anbefalede størrelser:

Titler (Sider eller Modaler)

Titler på sider eller i modaler er typisk de største teksttyper, du vil se. De bruger en Medium fontvægt for at skille sig ud. Før scrolling er titler ofte sat til 34pt. Når brugeren begynder at scrolle, skrumper titlen typisk ned til 17pt, hvilket er standardstørrelsen for mange andre elementer.

Brødtekst og Links

Standard brødtekst og links bør generelt være sat til 17pt. Dette giver en god læsbarhed på tværs af forskellige iPhone-modeller.

Sekundær Tekst

Til sekundær information, som f.eks. en e-mail-preview eller en beskrivelse, anbefales en størrelse på 15pt. Ofte bruges en lettere farve til at differentiere denne tekst fra den primære brødtekst.

Tertiær Tekst, Underskrifter og Segmenterede Knapper

For mindre elementer som tredjegrads tekst, underskrifter eller labels på segmenterede knapper, foreslås en størrelse på 13pt. Det er en god praksis at have en forskel i skriftstørrelse mellem sekundær og tertiær tekst for at skabe visuel hierarki.

Form Kontroller (Knapper, Tekstfelter)

Formularfelter som knapper og tekstinputfelter bruger ofte 17pt skrift. Det er vigtigt at fremhæve vigtige knapper eller aktive segmenter i segmenterede knapper med en Medium fontvægt.

Tab Bar

Teksten i tab-baren nederst på skærmen er typisk den mindste. Den anbefalede størrelse er 10pt. Det frarådes generelt at gå under denne størrelse for at opretholde læsbarhed.

Visuel Reference og Dybdegående Forklaring

Lad os se nærmere på, hvordan disse størrelser anvendes i praksis:

Titler og Skrolling

Forestil dig en app som Mail. Titlen på indbakken kan være imponerende stor (34pt) i starten. Men i takt med at du scroller ned gennem dine e-mails, skrumper titlen til en mere beskeden 17pt. Selvom størrelsen ændrer sig, bevarer titlen sin identitet som titel gennem dens placering (typisk øverst og centreret) og en tungere fontvægt. Dette er en subtil, men effektiv måde at guide brugerens opmærksomhed på.

Listevisninger

Lister er rygraden i mange mobilapps. I en e-mail-liste kan afsenderens navn være sat til standard 17pt, mens emnet og en kort preview-tekst kan være i 15pt. Dette kan virke kontraintuitivt, da man måske ville forvente, at afsenderen fremhæves yderligere. Men Apples filosofi her er at skabe et balanceret hierarki, hvor den primære information (emne og preview) kan have en lidt mindre, men stadig tydelig, størrelse.

På indstillingssider kan sektionstitler som "Systemlyd & Haptik" være mindre (f.eks. 13pt og i versaler) end de enkelte indstillingsmuligheder (17pt). Dette viser, hvordan kapitalisering og fontvægt kan bruges til at skabe visuelt hierarki, selv med mindre skriftstørrelser.

Form Kontroller i Detaljer

Når vi ser på segmenterede knapper, kan disse nogle gange have tekst på 13pt, selvom andre kontroller bruger 17pt. Dette skyldes sandsynligvis, at segmenterede knapper kan have mange muligheder, og en mindre skriftstørrelse hjælper med at passe teksten uden at kræve for meget plads.

Søgefelter bruger standardstørrelsen og vægten, men farven kan være lysere, før brugeren begynder at skrive. Dette indikerer, at feltet er aktivt, men endnu ikke udfyldt.

Modaler og Deres Typografi

Modaler, eller pop-up-vinduer, er illustrative eksempler på Apples typografiske tilgang. Titlen i en modal kan være i standard 17pt, men for at give den vægt, bruges en federe fontvægt. Den ledsagende forklarende tekst kan være 13pt, hvilket er mindre end de 15pt, der bruges i e-mail-previews. Dette kan skyldes et ønske om at holde teksten på en enkelt linje.

Inputfelter til adgangskoder bruger 17pt, som forventet. Knapper som "OK" og "Annuller" bruger også standardstørrelsen, men "OK"-knappen kan have en federe vægt for at signalere dens vigtighed som den primære handling.

iPad vs. iPhone Typografi

Generelt er fontstørrelserne på iPad næsten identiske med dem på iPhone. Dette skyldes primært to faktorer:

1. iPads har en lavere pixeltæthed (pixels per square inch) end iPhones. Det betyder, at elementer, der er målt i punkter, vil fremstå en smule større på en iPad.
2. Brugerne holder typisk iPads en smule længere væk fra øjnene end iPhones. Disse to faktorer udligner hinanden, hvilket gør det muligt at anvende de samme fontstørrelser på begge enheder.

Den primære forskel ses i tab-baren. På grund af iPads horisontale layout er label-teksten i tab-baren større, typisk 13pt i stedet for iPhones 10pt.

SF Typografi Retningslinjer: Detaljeret

Når du bruger San Francisco-skrifttypen, er der et par ekstra regler, Apple gerne vil have, du følger for at opnå det mest autentiske look:

SF Pro Display vs. SF Pro Text

• Brug SF Pro Display til skriftstørrelser på 20pt og derover.
• Brug SF Pro Text til brødtekst og alle størrelser under 20pt.

Karakterafstand (Tracking)

San Francisco er designet med varierende karakterafstand ved forskellige størrelser for at optimere læsbarheden. Selvom du kan justere dette manuelt, er det ofte bedst at overlade det til systemet eller følge Apples anbefalinger for at opnå det "standard iOS"-look. Her er et eksempel på Apples anbefalede karakterafstand:

Det er vigtigt at bemærke, at du altid kan vælge at bruge andre skrifttyper i dine iOS-apps. Vær dog opmærksom på, at andre skrifttyper kan fremstå større eller mindre, eller være mindre læsbare, selv ved samme angivne størrelse. SF-familien er optimeret til platformen.

Konklusion

At mestre iOS' typografi med SF-skrifttyperne er essentielt for at skabe apps, der føles hjemme på platformen. Ved at følge Apples retningslinjer for fontstørrelser, vægte og anvendelse af SF Pro Display og SF Pro Text, kan du sikre en konsekvent, læsbar og æstetisk tiltalende brugeroplevelse. Husk at teste dine designs på forskellige enheder og størrelser for at sikre optimal performance.

Ofte Stillede Spørgsmål (FAQ)

Er SF Pro den eneste font, jeg kan bruge til iOS?

Nej, du kan bruge enhver font, du ønsker. SF Pro er dog Apples standard og anbefales for at opnå det mest autentiske iOS-look og den bedste læsbarhed på Apples enheder.

Hvad er forskellen på SF Pro Display og SF Pro Text?

SF Pro Display er optimeret til skriftstørrelser på 20pt og derover, mens SF Pro Text er designet til mindre størrelser, typisk under 20pt, for at forbedre læsbarheden.

Hvorfor skifter titler størrelse, når jeg scroller?

Dette er en designkonvention i iOS for at spare plads og fokusere brugerens opmærksomhed, når de interagerer med indholdet. Den større titel tiltrækker opmærksomhed i starten, mens den mindre størrelse giver mere plads til indholdet, når man scroller.

Skal jeg bekymre mig om karakterafstand?

Hvis du sigter efter det præcise "standard iOS"-look, kan du overveje Apples anbefalinger for karakterafstand. Men for de fleste apps er systemets standardjusteringer tilstrækkelige.

Hvis du vil læse andre artikler, der ligner SF Font: Den Ultimative Guide til iOS Typografi, kan du besøge kategorien Teknologi.