Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Como representación visual del lenguaje, la tarea principal de la tipografía es comunicar información. El sistema de tipos de Windows 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 versión renovada del clásico Segoe y utiliza 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 grandes.
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 Segoe Fluent
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 que van desde Thin (100) hasta Bold (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 contornos de la tipografía, con el fin de priorizar la legibilidad en los tamaños pequeños y la personalidad en los tamaños grandes (para el escalado óptico de 8 pt a 36 pt).
Al usar controles comunes XAML, la fuente Segoe UI Variable 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 |
|---|---|---|
| Luz | 300 |
|
| Semilight | 350 |
|
| Regular | 400 |
|
| Seminegrita | 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.
| Atributo | Valor | Notas |
|---|---|---|
| Peso | Regular, Semibold | Utiliza el peso regular para la mayor parte del texto y el Semibold para los 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 Seminegrita, 12px Regular | El texto más pequeño que estos tamaños y pesos es ilegible en algunos idiomas |
| Mayúsculas y minúsculas | Mayúsculas al principio de cada palabra | Utiliza mayúsculas al principio de cada palabra en todo el texto de la interfaz de usuario, incluidos los títulos |
| Truncamiento | Puntos suspensivos y recortes | Utiliza puntos suspensivos en la mayoría de los casos; el recorte solo se utiliza en casos excepcionales |
Ejemplos
La aplicación Galería de WinUI 3 incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI. Obtenga la aplicación del Microsoft Store o 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, analizaremos cómo aplicar estilo a la tipografía en la aplicación de Windows para ayudar a los usuarios a comprender el contenido de forma fácil y eficaz.
Fuente
Debes usar una fuente en toda la interfaz de usuario de tu aplicación, y te recomendamos mantener la fuente predeterminada de 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.
Para mostrar idiomas que no son inglés o seleccionar una fuente diferente para tu aplicación, consulta Languages y Fonts para nuestras fuentes recomendadas para Windows aplicaciones.
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, siga la rampa de tipo Windows.
Escala tipográfica
La rampa de tipos de Windows establece relaciones cruciales entre los estilos de tipo de una página, lo que ayuda a los usuarios a leer contenido fácilmente. Todos los tamaños están en píxeles efectivos y están optimizados para las aplicaciones de Windows, ejecutándose 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 | Tamaño/altura de línea |
|---|---|---|
|
Pequeño | 12/16 epx |
|
Texto | 14/20 epx |
|
Texto semibolado | 14/20 epx |
|
Texto | 18/24 epx |
|
Texto semibolado | 18/24 epx |
|
Semigraso de pantalla | 20/28 EPX |
|
Semigraso de pantalla | 28/36 EPX |
|
Semigraso de pantalla | 40/52 epx |
|
Semigraso de pantalla | 68/92 EPX |
Estos estilos de tipo están disponibles como recursos estáticos XAML que siguen las convenciones de rampa de tipos XAML , por lo que puedes usarlos directamente en la aplicación.
Nota:
Los estilos negrita y cursiva no forman parte de la escala tipográfica de Windows. Utiliza Semibold en lugar de Negrita para darle énfasis. La cursiva se excluye porque puede reducir la legibilidad y claridad, especialmente para las personas con dislexia.
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 winUI.
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
Recorta el texto y ajusta el salto de línea si se han habilitado varias líneas.
No uses puntos suspensivos para evitar la saturación 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 escrituras de Norteamérica (Silabarios canadienses, Cherokee, Osage). |
| Interfaz de usuario de Leelawadee | Normal, Semilight, Negrita | Fuente de interfaz de usuario para escrituras del sudeste asiático (buginés, jemer, lao, tailandés). |
| Malgun Gótico | Regular | Fuente de interfaz de usuario para coreano. |
| interfaz de usuario de JhengHei de Microsoft | Normal, Negrita, Light | Fuente de interfaz de usuario para chino tradicional. |
| interfaz de usuario de Microsoft YaHei | Normal, Negrita, Light | Fuente de interfaz de usuario para chino simplificado. |
| Texto de Myanmar | Regular | Fuente alternativa para la escritura de Myanmar. |
| Interfaz de usuario de Nirmala | Normal, Semilight, Negrita | 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). |
| Interfaz de usuario de Segoe | Normal, Cursiva, Cursiva Light, Cursiva Negra, Negrita, Negrita Cursiva, Light, Semilight, Semibold, Negra | Fuente de interfaz de usuario para árabe, armenio, georgiano y hebreo. |
| SimSun | Regular | Fuente de interfaz de usuario china clásica. |
| 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 | Normal, Cursiva, Negrita, Negrita Cursiva, Negra | Admite alfabetos y sistemas de escritura europeos y de Oriente Medio (latino, griego, cirílico, árabe, armenio y hebreo). El peso Negra solo es compatible con las escrituras europeas. |
| Calibri | Normal, Cursiva, Negrita, Negrita cursiva, Ligera, Cursiva ligera | Admite sistemas de escritura europeos y de Oriente Medio (latino, griego, cirílico, árabe y hebreo). El árabe solo está disponible en los trazos verticales. |
| Consolas | Normal, Cursiva, Negrita, Negrita cursiva | Fuente de ancho fijo que admite scripts europeos (latino, griego y cirílico). |
| Interfaz de usuario de Segoe | Normal, Cursiva, Cursiva Light, Cursiva Negra, Negrita, Negrita Cursiva, Light, Semilight, Semibold, Negra | 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, Semiligera, Ligera, Negrita, Seminegrita | Una fuente de código abierto métricamente compatible con Segoe UI, destinada a aplicaciones en otras plataformas que no deseen incluir Segoe UI. Get 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, Negrita cursiva | Fuente serif de ancho fijo que admite scripts europeos y de Oriente Medio (latino, griego, cirílico, árabe, armenio y hebreo). |
| Georgia | Normal, Cursiva, Negrita, Negrita cursiva | Admite scripts europeos (latino, griego y cirílico). |
| Times New Roman | Normal, Cursiva, Negrita, Negrita cursiva | 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 |
|---|---|---|
| Iconos de Segoe Fluent | 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. |
Artículos relacionados
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
