Tipografía en Windows 11
Como representación visual del lenguaje, la tarea principal de la tipografía es comunicar información. El sistema de tipos de Windows 11 le ayuda a crear la estructura y la jerarquía en el contenido con el fin de maximizar la legibilidad en la interfaz de usuario.
Segoe UI Variable es la nueva fuente del sistema para Windows. Se trata de una experiencia actualizada del clásico Segoe y usa la tecnología de fuente variable para proporcionar dinámicamente una gran legibilidad a tamaños muy pequeños y contornos mejorados en tamaños de pantalla.
Métricas
Pesos
| Nombre del peso | Valor del eje de peso | Elemento visual |
|---|---|---|
| Claro | 300 |  |
| Semilight | 350 |  |
| Regular | 400 |  |
| Semibold | 600 |  |
| Negrita | 700 |  |
Eje óptico
Segoe UI Variable admite dos ejes: peso y tamaño óptico. El eje de peso es incremental, mientras que el eje de tamaño óptico es automático y activado de forma predeterminada. El eje de tamaño óptico 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.
Uso de la variable Segoe Fluent
Rampa de tipografías
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 |
Procedimientos recomendados de tipografía en Windows 11
Windows 11 usa segoe UI Variable con los siguientes atributos en función del contexto en el que se muestra el texto.
| Atributo | Value | Notas |
|---|---|---|
| Peso | Normal, 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 |
| Uso de mayúsculas y minúsculas | Caso de oración | Usar mayúsculas de oraciones 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
Sugerencia
La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtener la aplicación de Microsoft Store u obtener el código fuente en GitHub