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 con la fuente predeterminada para las 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 segoe UI 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 tipografías
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.
Consulte las instrucciones sobre el uso de la rampa de tipos XAML para obtener más detalles.
Asociació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">
Número 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.
Recortes 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 de 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.
Lenguajes
Segoe UI Variable es nuestra fuente para inglés, idiomas europeos, griego y ruso. Para otros idiomas, consulta las siguientes recomendaciones.
Globalizar y localizar fuentes
Usa las API de asignación de fuentes LanguageFont para acceder mediante programación al estilo, el espesor, el tamaño y la familia de fuentes recomendados para un idioma en particular. El objeto LanguageFont proporciona acceso a la información de fuente correcta para diversas categorías de contenido, como encabezados de interfaz de usuario, notificaciones, texto del cuerpo y fuentes de cuerpo de documento que los usuarios pueden editar. Para obtener más información, consulta Ajustar el diseño y las fuentes, y admitir la escritura RTL.
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 (Canadiense Syllabics, Cherokee, Osage). |
| Leelawadee UI | Normal, semidelgada, negrita | Fuente de interfaz de usuario para scripts del sudeste asiático (Buginese, Khmer, Lao, Thai). |
| Malgun Gothic | Normal | Fuente de interfaz de usuario para coreano. |
| Microsoft JhengHei UI | Normal, negrita, delgada | Fuente de interfaz de usuario para chino tradicional. |
| Microsoft YaHei UI | Normal, negrita, delgada | Fuente de interfaz de usuario para chino simplificado. |
| Myanmar Text | Normal | Fuente de reserva para el alfabeto birmano. |
| Nirmala UI | Normal, semidelgada, negrita | Fuente de la interfaz de usuario para scripts del Sur asiático (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Mongol, Telugu). |
| Segoe UI | Normal, cursiva, cursiva delgada, cursiva gruesa, negrita, negrita cursiva, delgada, semidelgada, seminegrita, gruesa | Fuente de la interfaz de usuario para árabe, armenio, georgiano y hebreo. |
| SimSun | Normal | 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 sin serifa
Las fuentes sin serifa son una buena opción para encabezados y elementos de interfaz de usuario.
| Familia de fuentes | Estilos | Notas |
|---|---|---|
| Arial | Normal, cursiva, negrita, cursiva negrita, gruesa | 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, negrita cursiva, delgada, cursiva delgada | Admite alfabetos europeos y de Oriente Medio (latino, griego, cirílico, árabe y hebreo). El árabe solo está disponible en formato vertical. |
| Consolas | Normal, cursiva, negrita, cursiva negrita | Fuente de ancho fijo que admite alfabetos europeos (latino, griego y cirílico). |
| Segoe UI | Normal, cursiva, cursiva delgada, cursiva gruesa, negrita, negrita cursiva, delgada, semidelgada, seminegrita, gruesa | Fuente de interfaz de usuario para alfabetos europeos y de Oriente Medio (árabe, armenio, cirílico, georgiano, griego, hebreo, latino) y también para el alfabeto lisu. |
| Selawik | Normal, semidelgada, delgada, negrita, seminegrita | 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. Obtenga Selawik en GitHub. |
Fuentes con serifa
Las fuentes con serifa son útiles para presentar grandes cantidades de texto.
| Familia de fuentes | Estilos | Notas |
|---|---|---|
| Cambria | Normal | Fuente con serifa que admite alfabetos 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 alfabetos europeos (latino, griego y cirílico). |
| Times New Roman | Normal, cursiva, negrita, cursiva negrita | Fuente heredada que admite alfabetos europeos (latino, griego, cirílico, árabe, armenio, hebreo). |
Fuentes de 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. |
Iconos y símbolos
| Familia de fuentes | Estilos | Notas |
|---|---|---|
| Segoe MDL2 Assets | Normal | Fuente de interfaz de usuario para iconos de aplicación. Para obtener más información, consulta el artículo Recursos de Segoe MDL2 . |
| Segoe UI Emoji | Normal | Fuente de interfaz de usuario para Emoji. |
| Segoe UI Symbol | Normal | Fuente de reserva para símbolos. |
Artículos relacionados
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de