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
Windows developer