Tipografía en aplicaciones de Windows

Como representación visual del lenguaje, la tarea principal de la tipografía es comunicar información. Su estilo nunca debe obstaculizar ese objetivo. En este artículo hablaremos de cómo aplicar estilo a la tipografía de tu aplicación de Windows para ayudar a los usuarios a comprender el contenido de forma sencilla y eficaz.

Fuente

Debes usar una fuente en toda la interfaz de usuario de la aplicación y te recomendamos seguir usando la fuente predeterminada para aplicaciones de Windows, Segoe UI Variable. Se ha diseñado para mantener la legibilidad óptima en tamaños y densidades de píxeles y ofrece una estética limpia, ligera y abierta que complementa el contenido del sistema.

Con el fin de mostrar idiomas que no son inglés o seleccionar una fuente diferente para tu aplicación, consulta Idiomas y Fuentes para nuestras fuentes recomendadas para aplicaciones de Windows.

Elija una fuente para la interfaz de usuario.

No mezcle varias fuentes.

Ejes de fuente variable

La fuente Variable de interfaz de usuario segoe contiene dos ejes para el control más preciso del texto. Esta fuente tiene un eje de peso (wght) con pesos de Fino (100) a Negrita (700). También tiene un eje de tamaño óptico (opsz) para el escalado óptico de 8pt a 36pt. Al usar controles comunes xaml, la fuente Variable de interfaz de usuario se seleccionará de forma predeterminada para los idiomas admitidos. Cuando se usa esta fuente u otra fuente variable con un eje óptico, el tamaño óptico coincidirá automáticamente con el tamaño de fuente solicitado. Al usar HTML, el escalado óptico también es automático, pero deberá especificar la fuente variable de interfaz de usuario segoe en CSS.

Tamaño y escalado

Los tamaños de fuente en las aplicaciones para UWP se escalan automáticamente en todos los dispositivos. El algoritmo de escalado garantiza que una fuente de 24px en un dispositivo Surface Hub a 3 metros de distancia sea tan legible como una fuente de 24px en un teléfono de 5 pulgadas a unos centímetros de distancia.

Debido a cómo funciona el sistema de escalado, diseñas en píxeles efectivos, no píxeles físicos reales y no tienes por qué modificar los tamaños de fuente para las resoluciones y los tamaños de pantallas diferentes.

Siga el ajuste de tamaño de la rampa de tipos de Windows.

No use un tamaño de fuente inferior a 12 px.

Jerarquía

Los usuarios dependen de la jerarquía visual cuando analizan una página: los encabezados resumen contenido y el texto del cuerpo ofrece más detalles. Para crear una jerarquía visual clara en la aplicación, sigue la rampa de tipos de Windows.

Rampa de tipos

La rampa de tipos de Windows establece relaciones cruciales entre los estilos de tipos de una página, lo que ayuda a los usuarios a leer fácilmente el contenido. Todos los tamaños se encuentran en píxeles efectivos y están optimizados para aplicaciones para UWP que se ejecutan en todos los dispositivos.

Consulta las instrucciones sobre cómo usar la rampa de tipos XAML para obtener más detalles.

Alineación

El valor predeterminado TextAlignment es Left y, en la mayoría de los casos, la alineación del texto a la izquierda con un margen irregular a la derecha proporciona un anclaje coherente del contenido y un diseño uniforme. Para idiomas de derecha a izquierda, consulta Ajustar el diseño y las fuentes para admitir globalización.

<TextBlock TextAlignment="Left">

Recuento de caracteres

Mantenga hasta 50–60 letras por línea para facilitar la lectura.

No use menos de 20 caracteres o más de 60 caracteres por línea, ya que es difícil de leer.

Recorte y puntos suspensivos

Cuando la cantidad de texto se extiende más allá del espacio disponible, se recomienda recortar el texto e insertar puntos suspensivos [...], que es el comportamiento predeterminado de la mayoría de los controles de texto de UWP.

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

Recorte del texto y ajuste si hay varias líneas habilitadas.

No use puntos suspensivos para evitar el desorden visual.

Nota:

Si los contenedores no están bien definidos (por ejemplo, no hay ningún color de fondo diferenciador), o cuando hay un vínculo para ver más texto, usa puntos suspensivos.

Idiomas

Segoe UI Variable es nuestra fuente para inglés, idiomas europeos, griego y ruso. Para otros idiomas, consulta las siguientes recomendaciones.

Globalización o localización de fuentes

Use las API de asignación de fuentes LanguageFont para el acceso mediante programación a la familia de fuentes, el tamaño, el peso y el estilo recomendados para un idioma determinado. El objeto LanguageFont proporciona acceso a la información de fuente correcta para varias categorías de contenido, incluidos los encabezados de la interfaz de usuario, las notificaciones, el texto del cuerpo y las fuentes del cuerpo del documento editables por el usuario. Para obtener más información, consulta Ajustar el diseño y las fuentes para admitir la globalización.

Fuentes para idiomas no latinos

Familia de fuentes	Estilos	Notas
Ebrima	Normal, Negrita	Fuente de interfaz de usuario para scripts africanos (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi	Normal, Negrita	Fuente de interfaz de usuario para scripts de Norteamérica n (canadienses, Cherokee, Osage).
Interfaz de usuario de Leelawadee	Normal, Semilight, Bold	Fuente de interfaz de usuario para scripts del sudeste asiático (Buginese, Khmer, Lao, Thai).
Malgun Gothic	Regular	Fuente de interfaz de usuario para coreano.
Interfaz de usuario de Microsoft JhengHei	Normal, Negrita, Claro	Fuente de interfaz de usuario para chino tradicional.
Interfaz de usuario de Microsoft YaHei	Normal, Negrita, Claro	Fuente de interfaz de usuario para chino simplificado.
Texto de Myanmar	Regular	Fuente de reserva para el script de Myanmar.
Interfaz de usuario de Nirmala	Normal, Semilight, Bold	Fuente de interfaz de usuario para scripts del Sur asiático (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Segoe UI	Regular, cursiva, cursiva ligera, cursiva negra, negrita, cursiva negrita, luz, semiligero, semibold, negro	Fuente de interfaz de usuario para árabe, armenio, georgiano y hebreo.
SimSun	Regular	Fuente de interfaz de usuario china heredada.
Yu Gothic UI	Delgada, semidelgada, normal, seminegrita, negrita	Fuente de interfaz de usuario para japonés.

Fuentes

Fuentes Sans-serif

Las fuentes Sans-serif son una excelente opción para encabezados y elementos de la interfaz de usuario.

Familia de fuentes	Estilos	Notas
Arial	Regular, cursiva, negrita, cursiva negrita, negro	Admite scripts europeos y de Oriente Medio (latino, griego, cirílico, árabe, armenio y hebreo). El peso negro solo admite scripts europeos.
Calibri	Normal, cursiva, negrita, cursiva negrita, luz, cursiva ligera	Admite scripts europeos y de Oriente Medio (latino, griego, cirílico, árabe y hebreo). Árabe disponible solo en los marcadores verticales.
Consolas	Normal, cursiva, negrita, cursiva negrita	Fuente de ancho fijo que admite scripts europeos (latino, griego y cirílico).
Segoe UI	Regular, cursiva, cursiva ligera, cursiva negra, negrita, cursiva negrita, luz, semiligero, semibold, negro	Fuente de interfaz de usuario para scripts europeos y de Oriente Medio (árabe, armenio, cirílico, georgiano, griego, hebreo, latino) y también script de Lisu.
Selawik	Normal, Semilight, Light, Bold, Semibold	Fuente de código abierto que es compatible métricamente con Segoe UI, diseñada para aplicaciones en otras plataformas que no quieren agrupar la interfaz de usuario de Segoe. Obtén Selawik en GitHub.

Fuentes serif

Las fuentes Serif son buenas para presentar grandes cantidades de texto.

Familia de fuentes	Estilos	Notas
Cambria	Regular	Fuente Serif que admite scripts europeos (latino, griego, cirílico).
Courier New	Normal, cursiva, negrita, cursiva negrita	Fuente de ancho fijo serif que admite scripts europeos y de Oriente Medio (latino, griego, cirílico, árabe, armenio y hebreo).
Georgia	Normal, cursiva, negrita, cursiva negrita	Admite scripts europeos (latino, griego y cirílico).
Times New Roman	Normal, cursiva, negrita, cursiva negrita	Fuente heredada que admite scripts europeos (latino, griego, cirílico, árabe, armenio, hebreo).

Fuentes variables

Las fuentes variables son adecuadas para controlar con precisión la apariencia del texto.

Familia de fuentes	Ejes	Notas
Bahnschrift	Peso, ancho	Fuente variable que admite latino, griego y cirílico.
Variables de Segoe UI	Peso, tamaño óptico	Fuente variable que admite latino, griego y cirílico.

Símbolos e iconos

Familia de fuentes	Estilos	Notas
Segoe MDL2 Assets	Regular	Fuente de la interfaz de usuario para los iconos de la aplicación. Para obtener más información, consulta el artículo Segoe MDL2 assets (Recursos de Segoe MDL2).
Emoji de la interfaz de usuario de Segoe	Regular	Fuente de interfaz de usuario para Emoji.
Símbolo de interfaz de usuario de Segoe	Regular	Fuente de reserva para símbolos.

Artículos relacionados

• Controles de texto
• Recursos de temas XAML
• Estilos XAML
• Tipografía de Microsoft
• Fuentes variables