Fuentes

Nota

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual.

Los usuarios interactúan con texto más que con cualquier otro elemento de Microsoft Windows. Segoe UI (pronunciado "SEE-go") es la fuente del sistema Windows. El tamaño de fuente estándar se ha aumentado a 9 puntos.

Fuente segoe UI.

Segoe UI y Segoe no son la misma fuente. Segoe UI es la fuente de Windows diseñada para cadenas de texto de interfaz de usuario. Segoe es una fuente de personalización de marca usada por Microsoft y asociados para producir material para impresión y publicidad.

Segoe UI es un tipo de letra accesible, abierto y descriptivo, y como resultado tiene una mejor legibilidad que Tahoma, Microsoft Sans Serif y Arial. Tiene las características de un humanista sans serif: los distintos anchos de sus mayúsculas (E y S estrechos, por ejemplo, comparados con Helvetica, donde los anchos son más iguales, bastante anchos); la tensión y las formas letras de su minúscula; y su verdadera cursiva (en lugar de un "oblicuo" o romano eslante, como muchos sans serifos de aspecto industrial). El tipo de letra está pensado para dar el mismo efecto visual en la pantalla y en la impresión. Fue diseñado para ser un humanista sans serif sin un carácter fuerte ni distraer la quirkiness.

Segoe UI está optimizado para ClearType, que está activado de forma predeterminada en Windows. Con ClearType habilitado, Segoe UI es una fuente elegante y legible. Sin ClearType habilitado, la interfaz de usuario de Segoe solo es marginalmente aceptable. Este factor determina cuándo debe usar la interfaz de usuario de Segoe.

Segoe UI incluye caracteres latino, griego, cirílico y árabe. Hay nuevas fuentes, también optimizadas para ClearType, creadas para otros juegos de caracteres y usos. Estos incluyen Meiryo para japonés, Malgun Gótico para coreano, Microsoft JhengHei para chino (tradicional), Microsoft YaHei para chino (simplificado), Gisha para hebreo y Leelawadee para tailandés, y las fuentes clearType Collection diseñadas para uso de documentos.

Meiryo incluye personajes latinos basados en Verdana. Malgun Gothic, Microsoft JhengHei y Microsoft YaHei usan una interfaz de usuario personalizada de Segoe. No se recomienda el uso de versiones cursiva de estas fuentes. Malgun Gothic, Microsoft JhengHei y Microsoft YaHei solo se proporcionan en estilos normales y negrita, lo que significa que los caracteres cursiva se sintetizan mediante la inclinación de los estilos verticales. Aunque Meiryo incluye cursiva verdadera y cursiva negrita, estos estilos solo se aplican a los caracteres latinos que los caracteres japoneses permanecen verticales cuando se aplica estilo cursiva.

Se prefiere una variación de Meiryo, denominada INTERFAZ de usuario de Meiryo, en la interfaz de usuario del comando ribbons .

Para admitir configuraciones regionales con estos juegos de caracteres, se reemplaza la interfaz de usuario de Segoe por las fuentes correctas en función de cada configuración regional durante el proceso de localización .

Para conceder licencia a Segoe UI y otras fuentes de Microsoft para su distribución con un programa basado en Windows, póngase en contacto con Monotype.

Nota: Las directrices relacionadas con el estilo y el tono y el texto de la interfaz de usuario se presentan en artículos independientes.

Conceptos de diseño

Fuentes, tipos de letra, tamaños de punto y atributos

En la tipografía tradicional, una fuente describe una combinación de un tipo de letra, un tamaño de punto y atributos. Un tipo de letra es el aspecto de la fuente. Segoe UI, Tahoma, Verdana y Arial son tipos de letras. El tamaño del punto hace referencia al tamaño de la fuente, medido desde la parte superior de los ascendentes hasta la parte inferior de los descendientes, menos el espaciado interno (denominado inicial). Un punto es aproximadamente de 1/72 pulgadas. Por último, una fuente puede tener atributos de negrita o cursiva.

Informalmente, las personas a menudo usan fuente en lugar de tipoface como se hace en este artículo, pero técnicamente, Segoe UI es un tipo de letra, no una fuente. Cada combinación de atributos es una fuente única (por ejemplo, 9 puntos Segoe UI normal, 10 puntos Segoe UI negrita, etc.).

Serif y sans serif

Los tipos de letra son serif o sans serif. Serif hace referencia a pequeños turnos que a menudo terminan los trazos de letras en una fuente. Un tipo de letra sans serif no tiene serifs.

Los lectores suelen preferir fuentes serif usadas como texto de cuerpo dentro de un documento. Los serifos proporcionan una sensación de formalidad y elegancia a un documento. Para el texto de la interfaz de usuario, la necesidad de una apariencia limpia y la menor resolución de monitores de equipo hace que los tipos de letra sans serif sean la mejor opción.

Compare

El texto es más fácil de leer cuando hay una gran diferencia entre la luminancia del texto y el fondo. El texto negro de un fondo blanco proporciona el texto oscuro de contraste más alto sobre un fondo muy claro también puede proporcionar contraste alto. Esta combinación es la mejor para las superficies principales de la interfaz de usuario.

El texto claro sobre un fondo oscuro ofrece un buen contraste, pero no tan bueno como texto oscuro en un fondo claro. Esta combinación funciona bien para superficies de interfaz de usuario secundarias, como paneles de tareas del Explorador, que desea desacentar en relación con las superficies de la interfaz de usuario principal.

Si desea asegurarse de que los usuarios lean el texto, use texto oscuro en un fondo claro.

Prestaciones

El texto puede usar las siguientes prestaciones para indicar cómo se usa:

• Puntero. El puntero I-bar ("text select") indica que se puede seleccionar el texto, mientras que el puntero de flecha que apunta a la izquierda ("selección normal") indica que el texto no es.
• Intercalación. Cuando el texto tiene el foco de entrada, el símbolo de intercalación es la barra vertical parpadeante que indica el punto de inserción o selección en texto seleccionable o editable.
• Caja. Cuadro alrededor del texto que indica que se puede editar. Para reducir el peso de la presentación, el cuadro solo se puede mostrar dinámicamente cuando se selecciona el texto editable.
• Color de primer plano. Gris claro indica que el texto está deshabilitado. Los colores no grises, especialmente azul y púrpura, indican que el texto es un vínculo.
• Color de fondo. Un fondo gris claro sugiere débilmente que el texto es de solo lectura, pero en la práctica el texto de solo lectura puede tener cualquier fondo de color.

Estas prestaciones se combinan para los siguientes significados:

• Editable. Texto mostrado en un cuadro, con un puntero de selección de texto, un símbolo de intercalación (en el foco de entrada) y normalmente en un fondo blanco.
• Solo lectura, seleccionable. Texto con un puntero de selección y un símbolo de intercalación (en el foco de entrada).
• Solo lectura, no seleccionable. Texto con un puntero de flecha.
• Deshabilitado. Texto gris claro con un puntero de flecha, a veces en un fondo gris.

El texto de solo lectura tradicionalmente tiene un fondo gris, pero no es necesario un fondo gris. De hecho, un fondo gris puede no ser deseable, especialmente para grandes bloques de texto, ya que sugiere que el texto está deshabilitado y desalenta la lectura.

Accesibilidad y fuente del sistema, tamaños y colores

Las directrices para hacer que el texto sea accesible para los usuarios con discapacidades o discapacidades se pueden reducir a una regla simple: Respetar la configuración del usuario siempre usando la fuente, los tamaños y los colores del sistema.

Si sólo haces una cosa...

Respeta la configuración del usuario usando siempre la fuente, los tamaños y los colores del sistema.

Desarrolladores: Desde el código, puede determinar las propiedades de fuente del sistema (incluido su tamaño) mediante la función de API GetThemeFont. Puede determinar los colores del sistema mediante la función api GetThemeSysColor.

Dado que no puede realizar ninguna suposición sobre la configuración del tema del sistema de los usuarios, debe hacer lo siguiente:

• Base siempre los colores de fuente y los fondos de los colores del tema del sistema. Nunca haga sus propios colores basados en valores RGB fijos (rojo, verde, azul).
• Siempre coincide con los colores de texto del sistema con sus colores de fondo correspondientes. Por ejemplo, si elige COLOR_STATICTEXT para el color del texto, también debe elegir COLOR_STATIC para el color de fondo.
• Cree siempre nuevas fuentes basadas en variaciones proporcionales de la fuente del sistema. Dadas las métricas de fuente del sistema, puede crear variaciones en negrita, cursiva, más grandes y más pequeñas.

Una manera sencilla de asegurarse de que el programa respeta la configuración de los usuarios es probar con un tamaño de fuente diferente y una combinación de colores de contraste alto. Todo el texto debe cambiar el tamaño y mostrarse correctamente en la combinación de colores elegida.

Patrones de uso

El texto tiene varios patrones de uso:

Uso	Descripción
Texto de la barra de título Texto de la barra de título que identifica la ventana.
Instrucciones principales Texto que explica qué hacer en una página, ventana o cuadro de diálogo.
Instrucciones secundarias Texto complementario que explica qué hacer en una página, ventana o cuadro de diálogo.
Texto normal Texto normal (de solo lectura) que se muestra en una interfaz de usuario.
Texto resaltado El texto en negrita se usa para facilitar el análisis y llamar la atención a los usuarios de texto. El texto cursiva se usa para hacer referencia al texto literalmente (en lugar de comillas) y para resaltar palabras específicas.
Texto editable El texto que los usuarios pueden editar se muestra en un cuadro. para reducir el peso de la presentación, el cuadro solo se puede mostrar cuando se selecciona el texto editable.
Texto deshabilitado Texto que no se aplica al contexto actual, como etiquetas para controles deshabilitados. el texto deshabilitado indica que los usuarios (normalmente) no deben molestarse en leer el texto.
Vínculos Texto usado para navegar a otra página, ventana o tema de ayuda, o iniciar un comando.
Encabezado de grupo Texto usado para agrupar elementos en una vista de lista.
Nombre de archivo Texto del nombre de archivo (solo en la vista de contenido).
Texto del documento Texto usado en documentos (en lugar de texto de la interfaz de usuario).
Encabezados de documento Texto usado como encabezado dentro de un documento.

Instrucciones

Fuentes y colores

• Las fuentes y colores siguientes son los valores predeterminados para Windows Vista y Windows 7.

Patrón	Símbolo del tema	Fuente, color
	CaptionFont	9 pt. negro (#000000) Segoe UI
	MainInstruction	12 pt. azul (#003399) Interfaz de usuario de Segoe
	Instrucción	9 pt. negro (#000000) Segoe UI
	BodyText	9 pt. negro (#000000) Segoe UI
	BodyText	9 pt. negro (#000000) Segoe UI, negrita o cursiva
	BodyText	9 pt. negro (#000000) Segoe UI, en un cuadro
	Disabled	9 pt. gris oscuro (#323232) Interfaz de usuario de Segoe
	HyperLinkText	9 pt. azul (#0066CC) Segoe UI
	Acceso frecuente	9 pt. azul claro (#3399FF) Segoe UI
		11 pt. azul (#003399) Segoe UI
		11 pt. negro (#000000) Segoe UI
	(ninguno)	9 pt. negro (#000000) Calibri
	(ninguno)	17 pt. negro (#000000) Calibri

• Elija fuentes y optimice los diseños de ventana en función de la tecnología de interfaz de usuario y la versión de destino de Windows:

Tecnología de interfaz de usuario	Versión de Windows de destino	Fuentes que se van a usar y optimizar para
Windows Presentation Foundation	Todo	Use elementos de tema de WPF.
Win32 o WinForms	Windows Vista o posterior	Use la fuente adecuada de la interfaz de usuario de Segoe.
	Componentes extensibles o pre-Windows Vista	Para dirigirse a Windows XP y Windows 2000, use la pseudo font de MS Shell Dlg 2 de punto, que se asigna a Tahoma. Para dirigirse a versiones anteriores de Windows, use la pseudo font de MS Shell Dlg de 8 puntos, que se asigna a Tahoma en Windows 2000 y Windows XP, y a MS Sans Serif en Windows 95, Windows 98, Windows Millennium Edition y Windows NT 4.0.

• Desarrolladores:
  • Para los elementos que usan el diseño fijo (como las plantillas de cuadro de diálogo de Windows y WinForms), codifique de forma rígida la fuente adecuada de la tabla anterior.
  • Para los elementos que usan el diseño dinámico (como Windows Presentation Foundation), use las fuentes del tema. Use api de tema como DrawThemeText para dibujar texto basado en el símbolo del tema. Asegúrese de tener una alternativa basada en las métricas del sistema en caso de que el servicio de tema no se esté ejecutando.
• Para segoe UI, use un tamaño de fuente de 9 puntos o mayor. La fuente segoe UI está optimizada para estos tamaños, por lo que evita el uso de tamaños más pequeños.
• Coincide siempre con los colores de texto del sistema con sus colores de fondo correspondientes. Por ejemplo, si elige COLOR_STATICTEXT para el color del texto, también debe elegir COLOR_STATIC para el color de fondo.
• Cree siempre nuevas fuentes basadas en variaciones proporcionales de la fuente del sistema. Dadas las métricas de fuente del sistema, puede crear variaciones en negrita, cursiva, más grandes y más pequeñas.
• Mostrar bloques grandes de texto de solo lectura (por ejemplo, términos de licencia) en un fondo claro en lugar de un fondo gris. Los fondos grises sugieren que el texto está deshabilitado y desaconseja la lectura.
• Considere una longitud máxima de línea de 65 caracteres para facilitar la lectura del texto. (Los caracteres incluyen letras, signos de puntuación y espacios).

Atributos

• La mayoría del texto de la interfaz de usuario debe ser sin formato sin atributos. Los atributos se pueden usar de la siguiente manera:
  • Negrita. Use en etiquetas de control para facilitar el análisis del texto. Use con moderación para llamar la atención a los usuarios de texto que deben leer. El uso de demasiada negrita reduce su impacto.
  • Cursiva. Use para hacer referencia al texto literalmente en lugar de comillas. Use con moderación para resaltar palabras específicas. Use para solicitudes en cuadros de texto y listas desplegables editables.
  • Cursiva en negrita. No lo use.
  • Subrayar. No use excepto para los vínculos. Use cursiva en su lugar para el énfasis.
• No todas las fuentes admiten negrita y cursiva, por lo que nunca deben ser cruciales para entender el texto.