Tipografía en Windows
Como representación visual del lenguaje, la tarea principal de la tipografía es comunicar información. El sistema de tipos de Windows le ayuda a crear estructura y jerarquía en el contenido para maximizar la legibilidad y legibilidad en la interfaz de usuario.
Segoe UI Variable es la nueva fuente del sistema para Windows. Se trata de una experiencia actualizada en el clásico Segoe y usa la tecnología de fuentes variables para proporcionar dinámicamente una gran legibilidad a tamaños muy pequeños y contornos mejorados en tamaños de pantalla.
Sugerencia
En este artículo se describe cómo se aplica el lenguaje Fluent Design a las aplicaciones de Windows. Para obtener más información, consulte Fluent Design - Tipografía.
Uso de la variable Fluent de Segoe
Segoe UI Variable admite dos ejes para el control más fino del texto: peso y tamaño óptico.
- El eje de peso (
wght) es incremental con pesos de Fino (100) a Negrita (700). - El eje de tamaño óptico (
opsz) es automático y está activado de forma predeterminada. Controla la forma y el tamaño de los contadores de la fuente, para priorizar la legibilidad en los tamaños pequeños y la personalidad en los tamaños grandes (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.
Pesos
| Nombre del peso | Valor del eje de peso | Visual |
|---|---|---|
| Claro | 300 |  |
| Semilight | 350 |  |
| Regular | 400 |  |
| Semibold | 600 |  |
| Negrita | 700 |  |
Eje óptico
Procedimientos recomendados de tipografía en Windows 11
Windows 11 usa segoe UI Variable con los atributos siguientes en función del contexto en el que se muestra el texto.
| Attribute | Valor | Notas |
|---|---|---|
| Peso | Regular, Semibold | Usar el peso normal para la mayoría del texto, usar Semibold para títulos |
| Alineación | Izquierda, Centro | Alinear a la izquierda de forma predeterminada, Alinear el centro solo en casos poco frecuentes, como texto debajo de iconos |
| Valores mínimos | 14px Semibold, 12px Regular | El texto menor que estos tamaños y pesos son ilegibles en algunos idiomas |
| Cubierta | Caso de oración | Uso de mayúsculas y minúsculas para todo el texto de la interfaz de usuario, incluidos los títulos |
| Truncamiento | Puntos suspensivos y recortes | Use puntos suspensivos en la mayoría de los casos; El recorte solo se usa en casos poco frecuentes |
Ejemplos
La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.
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.
Tamaño y escalado
Los tamaños de fuente de las aplicaciones XAML se escalan automáticamente en todos los dispositivos. El algoritmo de escalado garantiza que una fuente de 24 px en una pantalla grande a 10 pies de distancia es tan legible como una fuente de 24 px en una pantalla pequeña que está a pocos pulgadas 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.
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 están en píxeles efectivos y están optimizados para las aplicaciones de Windows que se ejecutan en todos los tamaños de pantalla.
Windows 11 usa los siguientes valores para varios tipos de texto en la interfaz de usuario.
| Ejemplo | Peso | Alto de tamaño y línea |
|---|---|---|
 |
Pequeño | 12/16 epx |
 |
Texto | 14/20 epx |
 |
Texto semibolado | 14/20 epx |
 |
Texto | 18/24 epx |
 |
Mostrar semibolado | 20/28 epx |
 |
Mostrar semibolado | 28/36 epx |
 |
Mostrar semibolado | 40/52 epx |
 |
Mostrar semibolado | 68/92 epx |
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 fuente Segoe Fluent Icons . |
| 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. |
