you’re reading Font Sizes in UI Design: The Complete Guide. Navegar rapidamente para outros capítulos: Intro * iOS * Android * Web * Principles

projetando um aplicativo de iPhone ou iPad e não ter certeza de que tamanhos de Fonte usar? Aqui está o resumo rápido e sujo dos tamanhos de letra assumindo (a) que está a usar o tipo de letra predefinido da Apple, San Francisco (ou similar) e (B) que deseja corresponder às convenções do iOS.

iPhone Typography Guidelines

Aqui está um rápido resumo dos estilos., Veja abaixo para referências visuais e diretrizes mais aprofundadas.,

texto Secundário 15pt cor mais clara, como bem Terciário de texto,
Legendas,
Segmentado botões 13pt Ignorar um tamanho de fonte entre o secundário e o terciário texto controles de Formulário
(Botões,
Texto entradas) 17pt Destaque importante botões com média de peso da fonte barra de Ação 10pt não vá mais pequeno

Vamos quebrar esse baixo elemento-por-elemento e olhar para exemplos ilustrados., Vamos cobrir não apenas os tamanhos de letra reais, mas também como a Apple pensa sobre os estilos de texto.

títulos

iOS tem alguns grandes títulos chunky, como “Inbox” abaixo-em 34pt, é sobre o maior texto que você vai ver em um iPhone.

Mas, depois de deslocar-se, títulos de morph para 17pt, o tamanho padrão para texto baseado em ações.,

Note que o título reduzido para o mesmo tamanho de texto padrão, mas eles usam um peso a mais e superior-e-centro de colocação, para distingui-la como um título. Esta foi uma pequena revelação para o designer inicial-Erik, como eu sempre esperava que os títulos seriam maiores do que o texto normal (não simplesmente mais ousado).

List Views

Lists are the bread and butter of phone apps. Nunca se sabia quantas coisas eram listas até se começar a mostrá-las num ecrã alto e fino. Vamos ver esses a seguir.,

in a list view – in this particular example, emails – iOS treats the sender’s name as normal-sized text (17pt), and the subject and preview as secondary, smaller text (15pt). Eu acho que isso vale a pena notar, porque novamente, começando como um designer, meu instinto foi fazer o oposto: fazer o corpo o tamanho padrão e fazer o nome do remetente ainda maior. Nota uma tendência aqui? o iOS não estiliza os tamanhos das fontes como se espera ingenuamente.,

Na página de configurações, as opções são escritos no estilo de texto padrão, mesmo que os títulos de seção (por exemplo, “AirDrop”) são menores (caraca!). Mas note que mesmo que o título seja menor, é um peso de fonte mais grosso, o que significa que você ainda pode reconhecê-lo como um título. Subtil.

As notas abaixo das configurações (“AirDrop permite que você compartilhe instantaneamente…”) são escritas em fonte 13pt, que é o menor que vimos em qualquer um destes exemplos UI.,

Controle de forma

vamos olhar para alguns controles muito rápido.

Este deve estar começando a se sentir muito simples agora. A única surpresa é o botão segmentado no tamanho de 13pt (parece muito pequeno)., Meu palpite é que, uma vez que a Apple sabia que alguns desses botões teriam muitas opções, eles simplesmente não cumpriram um tamanho de texto menor para o controle, mesmo que haja apenas duas opções.

a Pesquisa utiliza o padrão de tamanho e peso, embora a cor é um pouco mais leve antes de começar a escrever.

Modals

Este pequeno popup é um exemplo Super ilustrativo de como o texto do Apple styles.

• o título é o tamanho padrão., O que não seria suficiente, mas o que vimos antes? Um peso de fonte mais grosso para compensar por não ser maior.
• o texto explicativo é 13pt. Eu teria adivinhado que seria 15pt, como o texto do E-mail corpo, mas talvez eles só queriam que ele se encaixasse em uma linha?
• A entrada de senha é 13pt, o que seria muito pequeno para uma entrada de texto normal, embora o meu palpite seja porque você só vai ver um monte de círculos pretos, ele não precisa ser o tamanho padrão.,
• “OK” e “cancelar” são o tamanho padrão, mas como ” OK ” é o que você vai pressionar, a Apple chama um pouco mais de atenção para ele, tornando-o um peso mais espesso.

estes tamanhos de letra seguem um padrão claro, e ilustram alguns belos truques de estilo de texto, mas há algumas inconsistências estranhas com certeza.

barra de Acção

finalmente temos a barra de acção no fundo da tela. Este é o menor texto que eu poderia encontrar em todo o UI-10pt. Eu ficaria longe de tamanho tão pequeno quanto possível.,

iPad Tipografia Diretrizes

Como última atualização (Maio de 2020), os iPads têm, geralmente, menores densidades de pixel de iPhones. Uma vez que os iPads têm menos pixels por polegada, qualquer coisa que seja dimensionada em “pixels” ou “pontos” será ligeiramente maior em um iPad. Porque mantemos iPads um pouco mais longe dos nossos olhos do que iPhones, isso equilibra – se bem-você pode manter a maioria dos mesmos tamanhos de fonte em iPad e iPhone. Então inicie qualquer trabalho de tipografia iPad lendo a seção iPhone acima.,dito isto, a maior diferença é com os títulos. Como você tem uma tela maior para trabalhar, um tamanho de letra corpo ideal permanece ideal-mas você tem muito mais espaço para títulos maiores.

Assim, enquanto algumas aplicações ainda usar o iPhone em estilo 17pt títulos…

os Outros são maiores.,

Então, em geral, para iPad, você vai estar depois de um monte de iPhone estilos, mas com um pouco mais de espaço para ser criativo nos seus cabeçalhos.

San Francisco Guidelines

the default iOS font is San Francisco. Você pode baixar San Francisco gratuitamente. Não é necessário usar San Francisco ao criar um aplicativo iOS, mas se você quiser que ele tenha aquele olhar padrão iOS, então SF é o seu novo melhor amigo.,

Apple gostaria que você fosse uma boneca e seguisse algumas regras extras ao usar San Francisco.em primeiro lugar, use o SF Pro Display com tamanhos de letra 20 ou superiores. Use apenas texto SF Pro para texto corporal e menor.,

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., Então, se você quiser perfeitamente imitar o padrão “iOS” olha, tem algumas opções:

1. Mão-ajustar o espaçamento entre caracteres, dependendo do seu tamanho de tipo de letra de acordo com a tabela abaixo
2. Use estilos de texto diretamente do Apple iOS UI Esboço de Projeto (barra Photoshop slash XD) biblioteca
3. Use este prático Esboço plugin automaticamente, têm SF espaçamento de caracteres definido corretamente, dependendo do tamanho do tipo de letra

Ou simplesmente ignorar o fato de que a Apple diz-lhe para alterar o espaçamento entre caracteres para baixo para o centésimo de um pixel. Vive livre ou morre, meu.,

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 é a fonte padrão para iPhone e iPad. Então, se você está usando, é melhor saber sobre essas restrições. No entanto, você pode, é claro, projetar aplicativos iOS em qualquer tipo de letra que você quiser. Tenha cuidado para que outros possam parecer maiores ou menores, ou menos legíveis, mesmo com o mesmo tamanho.,

Continue para o Capítulo 2: Android/Design de Material de Fonte Tamanho de Diretrizes

Uma Observação Final 😎

Se essa é sua primeira vez aqui, você também pode estar interessado em:

• Aprender Design de INTERFACE do usuário, o meu full-length de vídeo on-line o curso de design de interface de usuário
• Design Boletim informativo, um 40,000+ pessoa newsletter com design original artigos destinados a dar-lhe conselhos táticos para melhorar o seu UX/UI habilidades.algumas pessoas têm coisas muito boas a dizer sobre a newsletter.,
  Praise for the Design Newsletter

  obrigado pela sua newsletter. É possivelmente a melhor newsletter que recebi desde 1999, quando comecei a trabalhar por conta própria.

  Tricia Littlefield
  Founder, TheSimpleWeb

  cada vez que recebo um e-mail de você, Eu sou como ‘Damn, este é um e-mail longo! De maneira nenhuma vou ler tudo isto, depois comecei a ler e pensei: “raios, isto é tão brilhante” e li tudo.,

  Jean-Philippe
  UX Estrategista, Freelance

  Mais de 40.000 inscritos.não há spam. Cancelar subscrição a qualquer hora.