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 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.
Métricas
Pesos
Nombre del peso | Valor del eje de peso | 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 Fluent de Segoe
Rampa de tipos
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 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
Sugerencia
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.
Comentarios
https://aka.ms/ContentUserFeedback.
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:Enviar y ver comentarios de