Estás leyendo tamaños de fuente en diseño de interfaz de usuario: la guía completa. Navega rápidamente a otros capítulos: Intro * iOS * Android * Web * Principles

diseñar una aplicación para iPhone o iPad y no estás seguro de qué tamaños de fuente usar? Aquí está el resumen rápido y sucio de los tamaños de fuente suponiendo (a) que está utilizando la fuente predeterminada de Apple, San Francisco (o similar) y (b) que desea coincidir con las convenciones de iOS.

pautas de tipografía de iPhone

Aquí hay un resumen rápido de estilos., Consulte a continuación para obtener referencias visuales y directrices más detalladas.,

texto secundario 15pt color más claro también texto terciario,
subtítulos,
botones segmentados 13pt omita un tamaño de fuente entre texto secundario y terciario controles de formulario
(botones,
entradas de texto) 17pt resalte botones importantes con peso de fuente medio barra de acción 10pt no vaya más pequeño que esto

-elemento y mirar ejemplos ilustrados., Cubriremos no solo los tamaños de fuente reales, sino también cómo piensa Apple sobre los estilos de texto.

títulos

iOS tiene algunos títulos grandes y gruesos, como» bandeja de entrada » a continuación – a 34pt, se trata del texto más grande que verás en un iPhone.

Pero una vez que se desplaza, los títulos de variación para 17pt, el tamaño predeterminado para el texto basados en acciones.,

tenga en cuenta que el título se reduce al mismo tamaño que el texto predeterminado, pero utilizan un peso más pesado y una ubicación superior y central para distinguirlo como un título. Esto fue una revelación para beginning-designer-Erik, ya que siempre esperé que los títulos fueran más grandes que el texto normal (no simplemente más audaces).

vistas de Lista

Las listas son el pan y la mantequilla de las aplicaciones del teléfono. Nunca sabías cuántas cosas eran realmente listas hasta que empezaste a mostrarlas en una pantalla alta y delgada. Veamos los siguientes.,

en una vista de lista – en este ejemplo en particular, correos electrónicos – iOS trata el nombre del remitente como texto de tamaño normal (17pt), y el asunto y la vista previa como texto secundario más pequeño (15pt). Creo que esto vale la pena señalar, porque de nuevo, al comenzar como diseñador, mi instinto fue hacer lo contrario: hacer que el cuerpo tenga el tamaño predeterminado y hacer que el nombre del remitente sea aún más grande. Nota una tendencia aquí? iOS no estiliza los tamaños de fuente de la manera que podría esperar ingenuamente.,

en la página de configuración, las opciones se escriben en el estilo de texto predeterminado, aunque los títulos de las secciones (por ejemplo, «AirDrop») son más pequeños (whoa!). Pero ten en cuenta que a pesar de que el título es más pequeño, es un peso de fuente más grueso, lo que significa que aún puedes reconocerlo como un título. De nuevo: sutil.

las notas debajo de la configuración («AirDrop le permite compartir al instante instantly») están escritas en fuente 13pt, que es la más pequeña que hemos visto en cualquiera de estos ejemplos de interfaz de usuario.,

controles de formulario

veamos algunos controles muy rápido.

Esto debería estar empezando a sentir bastante sencillo ahora. La única sorpresa es el botón segmentado en tamaño 13pt (parece demasiado pequeño)., Mi corazonada es que, dado que Apple sabía que algunos de estos botones tendrían muchas opciones, simplemente pasaron a un tamaño de texto más pequeño para el control, incluso si solo hay dos opciones.

la búsqueda utiliza el tamaño y el peso predeterminados, aunque el color es un poco más claro antes de comenzar a escribir.

Modals

Esta pequeña ventana emergente es un ejemplo súper ilustrativo de cómo Apple estilos de texto.

• El título es el tamaño predeterminado., Lo cual pensarías que no sería suficiente, pero ¿qué hemos visto antes? Un peso de fuente más grueso para compensar que no sea más grande.
• El texto explicativo es 13pt. Habría adivinado que sería 15pt, como el texto del cuerpo del correo electrónico, pero tal vez solo querían que encajara en una línea?
• La entrada de contraseña es 13pt, lo que sería demasiado pequeño para una entrada de texto normal, aunque mi corazonada es porque solo vas a ver un montón de círculos negros, no necesita ser el tamaño predeterminado.,
• «OK» y «Cancel» son el tamaño predeterminado, pero ya que «OK» es con suerte lo que va a presionar, Apple llama un poco más la atención al hacerlo un peso más grueso.

estos tamaños de fuente siguen un patrón claro, e ilustran algunos trucos de estilo de texto agradables, pero hay algunas inconsistencias extrañas con seguridad.

barra de acciones

Finalmente tenemos la barra de acciones en la parte inferior de la pantalla. Este es el texto más pequeño que pude encontrar en toda la UI – 10pt. Me mantendría alejado de un tamaño tan pequeño tanto como sea posible.,

pautas de tipografía de iPad

a partir de la última actualización (Mayo de 2020), los iPads generalmente tienen densidades de píxeles más bajas que los iPhones. Dado que los iPads tienen menos píxeles por pulgada, cualquier cosa que tenga el tamaño en «píxeles» o «puntos» será ligeramente más grande en un iPad. Debido a que mantenemos los iPads un poco más lejos de nuestros ojos que los iPhones, esto se equilibra muy bien: puede mantener la mayoría de los mismos tamaños de fuente en iPad y iPhone. Así que comience cualquier trabajo de tipografía de iPad leyendo la sección de iPhone anterior.,

dicho esto, la mayor diferencia es con los títulos. Como tiene un lienzo más grande para trabajar, un tamaño de fuente de cuerpo ideal sigue siendo ideal, pero tiene mucho más espacio para títulos más grandes.

Así, mientras que algunas aplicaciones todavía usar el iPhone de estilo 17pt títulos…

Otros son más grandes.,

Así que, en general, para el iPad, usted va a ser después de un montón de iPhone estilos, pero con un poco más de espacio para ser creativo en sus encabezados.

Directrices de San Francisco

la fuente predeterminada de iOS es San Francisco. Puedes descargar San Francisco gratis. No es necesario usar San Francisco al crear una aplicación para iOS, pero si quieres que tenga ese aspecto predeterminado de iOS, entonces SF es tu nuevo mejor amigo.,

A Apple le gustaría que fueras una muñeca y siguieras algunas reglas adicionales al usar San Francisco.

primero, use la pantalla SF Pro con tamaños de fuente 20 o superiores. Solo use SF Pro Text para texto de cuerpo y más pequeño.,

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., Por lo tanto, si desea imitar perfectamente el aspecto de «iOS predeterminado», tenga algunas opciones:

1. ajuste a mano el espaciado de caracteres según el tamaño de su fuente de acuerdo con la tabla a continuación
2. Use estilos de texto directamente desde la biblioteca de diseño de interfaz de usuario de Apple iOS Sketch (barra diagonal de Photoshop xD)
3. Use este práctico complemento de Sketch para configurar automáticamente el espaciado de caracteres de SF correctamente, según su tamaño de fuente

o simplemente ignore el hecho de que Apple le dice que cambie el espaciado de caracteres hasta la centésima de píxel. Vive libre o muere, hombre.,

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 es la fuente predeterminada para iPhone y iPad. Así que si lo estás usando, lo mejor es saber acerca de estas restricciones. Sin embargo, puede, por supuesto, diseñar aplicaciones iOS en cualquier fuente que desee. Tenga cuidado de que otros puedan parecer más grandes o más pequeños, o menos legibles, incluso del mismo tamaño.,

continúe con el Capítulo 2: pautas de Tamaño de fuente de Android/Material Design

una nota Final

Si esta es su primera vez aquí, también podría estar interesado en:

• Aprender diseño de interfaz de usuario, Mi curso completo de video en línea sobre diseño de interfaz de usuario
• El Boletín de diseño, un boletín de más de 40,000 personas con artículos de diseño originales destinados a darle consejos tácticos para mejorar sus habilidades de UX / UI.

algunas personas tienen cosas muy buenas que decir sobre el boletín.,

Gracias por su boletín. Es posiblemente el mejor boletín que he recibido desde 1999, cuando empecé a trabajar como freelance.

Tricia Littlefield
fundadora, TheSimpleWeb

cada vez que recibo un correo electrónico de usted, Estoy Como ‘Maldita sea, este es un correo electrónico largo! De ninguna manera voy a leer todo esto’, entonces empecé a leer y yo soy como ‘Maldita sea, esto es tan brillante maldita’ y lo leí todo.,

Jean-Philippe
UX Estratega, Freelance