Stai leggendo le dimensioni dei caratteri in UI Design: La guida completa. Passare rapidamente ad altri capitoli · Intro · iOS · Android · Web * Principi

Progettazione di un iPhone o iPad app e non sono sicuro di quali dimensioni dei caratteri da utilizzare? Ecco il riassunto rapido e sporco delle dimensioni dei caratteri supponendo (a) che stai usando il font predefinito di Apple, San Francisco (o simile) e (b) che desideri abbinare le convenzioni iOS.

Linee guida per la tipografia iPhone

Ecco un breve riassunto degli stili., Vedi sotto per riferimento visivo e linee guida più approfondite.,

Secondaria di testo 15pt colore più chiaro e Terziario testo,
Didascalie,
Segmentato pulsanti 13pt Saltare la dimensione di un carattere tra il secondario e terziario testo controlli per Formulario
(Pulsanti,
ingressi di Testo) 17pt Evidenziare i pulsanti principali con carattere medio peso Action bar 10pt non andare più piccolo di questo

Analizziamo questo elemento per elemento e guardare illustrato esempi., Tratteremo non solo le dimensioni effettive dei caratteri, ma anche il modo in cui Apple pensa agli stili di testo.

Titoli

iOS ha alcuni grandi titoli grossi, come “Posta in arrivo” qui sotto – a 34pt, si tratta del testo più grande che vedrai su un iPhone.

Ma una volta che si scorre, i titoli si trasformano in 17pt, la dimensione predefinita anche per le azioni basate sul testo.,

Si noti che il titolo si riduce alla stessa dimensione del testo predefinito, ma usano un peso più pesante e la posizione superiore e centrale per distinguerlo come titolo. Questa è stata un po ‘ una rivelazione per l’inizio-designer-Erik, dato che mi aspettavo sempre che i titoli sarebbero stati più grandi del normale testo (non semplicemente più audaci).

Visualizzazioni elenco

Gli elenchi sono il pane e il burro delle app del telefono. Non hai mai saputo quante cose erano effettivamente liste fino a quando non hai iniziato a visualizzarle su uno schermo alto e sottile. Diamo un’occhiata a quelli prossimo.,

In una vista elenco – in questo particolare esempio, le email – iOS considera il nome del mittente come testo di dimensioni normali (17pt) e l’oggetto e l’anteprima come testo secondario più piccolo (15pt). Penso che questo valga la pena notare, perché ancora una volta, partendo come designer, il mio istinto era quello di fare il contrario: rendere il corpo la dimensione predefinita e rendere il nome del mittente ancora più grande. Notare una tendenza qui? iOS non disegna le dimensioni dei caratteri come ci si potrebbe ingenuamente aspettare.,

Nella pagina delle impostazioni, le opzioni stesse sono scritte nello stile di testo predefinito, anche se i titoli delle sezioni (ad esempio “AirDrop”) sono più piccoli (whoa!). Ma nota che anche se il titolo è più piccolo, è un peso del carattere più spesso, il che significa che puoi ancora riconoscerlo come titolo. Ancora: sottile.

Le note sotto le impostazioni (“AirDrop ti consente di condividere istantaneamente instantly”) sono scritte in font 13pt, che è il più piccolo che abbiamo visto in uno di questi esempi di interfaccia utente.,

Controlli modulo

Diamo un’occhiata ad alcuni controlli reale veloce.

Questo dovrebbe essere iniziando a sentire abbastanza semplice ora. L’unica sorpresa è il pulsante segmentato a 13pt (sembra troppo piccolo)., La mia impressione è che, dal momento che Apple sapeva che alcuni di questi pulsanti avrebbero molte opzioni, hanno appena impostato di default una dimensione del testo più piccola per il controllo, anche se ci sono solo due opzioni.

La ricerca utilizza le dimensioni e il peso predefiniti, anche se il colore è un po ‘ più chiaro prima di iniziare a digitare.

Modali

Questo piccolo popup è un esempio super illustrativo di come Apple stili il testo.

• Il titolo è la dimensione predefinita., Che si potrebbe pensare non sarebbe sufficiente, ma che cosa abbiamo visto prima? Un peso del carattere più spesso per compensare non essendo più grande.
• Il testo esplicativo è 13pt. Avrei immaginato che sarebbe stato 15pt, come il testo del corpo dell’e-mail, ma forse volevano solo che si adattasse a una riga?
• L’input della password è 13pt, che sarebbe troppo piccolo per un normale input di testo, anche se la mia impressione è che vedrai solo un gruppo di cerchi neri, non ha bisogno di essere la dimensione predefinita.,
• “OK” e “Annulla” sono le dimensioni predefinite, ma dal momento che “OK” è speriamo che ciò che si preme, Apple attira un po’ più di attenzione su di esso rendendolo un peso più spesso.

Queste dimensioni dei caratteri seguono uno schema chiaro e illustrano alcuni bei trucchi di stile del testo, ma ci sono alcune strane incongruenze di sicuro.

Barra delle azioni

Finalmente abbiamo la barra delle azioni nella parte inferiore dello schermo. Questo è il testo più piccolo che ho trovato nell’intera UI – 10pt. Vorrei stare lontano da una dimensione così piccola, per quanto possibile.,

Linee guida per la tipografia dell’iPad

A partire dall’ultimo aggiornamento (maggio 2020), gli iPad hanno generalmente densità di pixel inferiori rispetto agli iPhone. Poiché gli iPad hanno meno pixel per pollice, tutto ciò che è dimensionato in” pixel “o” punti” sarà leggermente più grande su un iPad. Poiché teniamo gli iPad leggermente più lontani dai nostri occhi rispetto agli iPhone, questo si bilancia bene: puoi mantenere la maggior parte delle stesse dimensioni dei caratteri su iPad e iPhone. Quindi, avviare qualsiasi lavoro tipografia iPad leggendo la sezione iPhone sopra.,

Detto questo, la più grande differenza è con i titoli. Poiché hai una tela più grande con cui lavorare, una dimensione del carattere del corpo ideale rimane l’ideale, ma hai molto più spazio per i titoli più grandi.

Quindi, mentre alcune applicazioni usano ancora i titoli 17pt in stile iPhone

Altri sono più grandi.,

nel complesso, dunque, per iPad, si sta andando ad essere a seguito di un sacco di iPhone stili, ma con un po ‘ più di spazio alla creatività nelle intestazioni.

Linee guida di San Francisco

Il font iOS predefinito è San Francisco. È possibile scaricare San Francisco gratuitamente. Non è necessario utilizzare San Francisco quando si crea un’app iOS, ma se si desidera avere quell’aspetto iOS predefinito, SF è il nuovo migliore amico.,

Apple vorrebbe che tu fossi una bambola e seguire alcune regole extra quando si utilizza San Francisco.

In primo luogo, utilizzare SF Pro Display a dimensioni di carattere 20 o superiore. Utilizzare solo SF Pro Text per il corpo del testo e più piccolo.,

Font Size	Font Family
19 or smaller	SF Pro Text
20 or larger	SF Pro Display

Second, San Francisco is designed to have different character spacing at different sizes., Quindi, se si vuole imitare perfettamente il “default iOS” guarda, hanno un paio di opzioni:

1. Mano-regolare la spaziatura tra i caratteri a seconda della dimensione del carattere in base alla seguente tabella
2. Uso stili di testo direttamente da Apple iOS UI Schizzo di progetto (slash Photoshop slash XD) libreria
3. Utilizzare questo comodo plugin Sketch automaticamente SF carattere di spaziatura impostato correttamente, a seconda della sua dimensione del carattere

O semplicemente ignorare il fatto che Apple ti dice di cambiare la spaziatura tra i caratteri giù al centesimo di un pixel. Vivi libero o muori, amico.,

Font Style	Font Size	Character Spacing
Bold title	34pt	0.41
Body text	17pt	-0.41
Secondary text	15pt	-0.24
Tertiary text	13pt	-0.08
Smallest text	10pt	0.,12

San Francisco è il font predefinito per iPhone e iPad. Quindi, se lo stai usando, meglio sapere su queste restrizioni. Tuttavia, è possibile, naturalmente, progettare applicazioni iOS in qualsiasi tipo di carattere che si desidera. Fare attenzione che gli altri potrebbero apparire più grande o più piccolo, o meno leggibile, anche alla stessa dimensione.,

Continuare a Capitolo 2: Android/Materiale Design Font Size Linee guida

Una Nota Finale 😎

Se questa è la tua prima volta qui, si potrebbe anche essere interessati a:

• per Saperne di Progettazione dell’interfaccia utente, il mio full-length online video corso sulla progettazione dell’interfaccia utente
• Il Design Newsletter, una di 40.000 persona newsletter, originale, con articoli di design finalizzato a dare consigli tattici per migliorare il vostro UX/UI competenze.

Alcune persone hanno alcune cose davvero belle da dire sulla newsletter.,

Grazie per la vostra newsletter. E ‘ forse la migliore newsletter che ho ricevuto dal 1999, quando ho iniziato freelance.

Tricia Littlefield
Founder, TheSimpleWeb

Ogni volta che ricevo una e-mail da te, sono come ‘Dannazione, questa è una lunga e-mail! In nessun modo leggerò tutto questo’, poi ho iniziato a leggere e io sono come ‘Accidenti, questo è così dannatamente brillante’ e leggere tutto.,

Jean-Philippe
UX Strategist, Freelance