Directrices para tipografía

Artículo
05/15/2015

Descripción

La tipografía se encuentra en el corazón del lenguaje de diseño Microsoft. Cada principio de diseño de Microsoft refuerza la importancia de la tipografía. Por primera vez, los desarrolladores de aplicaciones tienen un conjunto de marcos que respaldan las características tipográficas avanzadas.

Qué hacer y qué no hacer

Usa una cuadrícula tipográfica para distribuir tu texto.
Utiliza Unicode para mejorar el texto.
Por lo general, aplica características Microsoft OpenType.
Usa mayúsculas y minúsculas como en una oración.
Utiliza un guion corto en vez de un guion en los intervalos numéricos.
No apliques ligaduras discrecionales si prescindes de las fuentes recomendadas.
No utilices texto justificado.

Instrucciones de uso adicionales

Segoe UI

La fuente de interfaz de usuario de firma de Windows, Segoe UI, se introdujo en la versión de Windows Vista/Office 2007. Se trata de un diseño sans serif desarrollado en la tradición de tipos de letra de orientación y de señalización. Desde su incorporación, Segoe UI ha definido la personalidad de todas las ofertas de Microsoft, lo que influyó en la apariencia no solo de los sistemas operativos, las aplicaciones y los dispositivos, sino también de los logotipos, las marcas, la publicidad y los paquetes. Este tipo de letra representa la voz tipográfica de Microsoft.

En Windows 8, se realizaron actualizaciones significativas en la familia de Segoe UI. Estos son los cambios principales:

Segoe UI Light y Segoe UI Semibold se volvieron a sugerir (ajustaron) para mejorar la calidad de su representación en pantalla.
Se ajustó el diseño de los numerales predeterminados y la "Q" y la "I" para que coincidieran con la versión para Windows Phone de Segoe. Puedes seguir usando las formas de Windows Vista originales utilizando un "conjunto de estilos" OpenType (SS01).
En Segoe UI Light, Semilight y Semibold, hicimos que el espaciado de los números fuera proporcional de forma predeterminada. Puedes acceder a números de grado fijo más tradicionales en las aplicaciones de la Tienda Windows si usas C#/VB/C++ y XAML y estableces la propiedad adjunta Typography.NumeralAlignment en "Tabular". Si usas JavaScript y HTML, establece la font-feature-settings property en “TNUM” para aplicar la característica OpenType de espaciado de números tabular (grado fijo).
Dado que los diseñadores con frecuencia usan Segoe UI Light con tamaños menores a 20 puntos, inferiores que lo previsto según su diseño, se agregó Segoe UI Semilight, una versión ligera de Segoe UI que se representa con belleza en tamaños pequeños, incluso inferiores a 11 puntos. Te recomendamos usar esta fuente cuando quieras darle un aspecto ligero al texto más pequeño.
En Windows Vista y Windows 7, Segoe UI admitía latino, griego, cirílico y árabe (únicamente en normal y negrita). En Windows 8, expandimos Segoe UI para incluir hebreo, armenio y georgiano, y actualizamos el árabe. Segoe UI ahora incluye cobertura para conjuntos de caracteres para todos los idiomas europeos y de Medio Oriente principales.
Aunque la interfaz de usuario de Windows no usa cursiva, agregamos variantes cursivas para los cinco grosores de Segoe UI para su uso por parte de las aplicaciones.
Agregamos variantes de OpenType avanzadas a las fuentes, incluso versalitas, ligaduras y estilos de números en todos los grosores.

En Windows 8.1, agregamos Segoe UI Black y Segoe UI Black Italic, con cobertura para todos los idiomas europeos, lo que amplía aún más el espectro de opciones de fuente disponibles.

Fuentes para otros idiomas

Windows 8 también incluye fuentes alineadas con Segoe UI para la mayoría de los demás idiomas. Están disponibles en dos grosores: normal y negrita. Aunque no se incluye una fuente alineada con Segoe UI para el japonés, la fuente de la interfaz de usuario en japonés (Meiryo UI) incluye números y caracteres latinos de estilo Segoe UI como conjunto de estilos OpenType (ss20).

Aquí te mostramos una lista de las fuentes recomendadas para los siguientes idiomas y scripts comunes:

Script	Fuente
Latino, griego, cirílico	Segoe UI
Árabe	Segoe UI
Hebreo	Segoe UI
Armenio y georgiano	Segoe UI
Chino simplificado	Microsoft YaHei UI
Chino tradicional	Microsoft JhengHei UI
Coreano	Malgun Gothic
Tailandés	Leelawadee UI
Khmer	Leelawadee UI
Lao	Leelawadee UI
Idiomas indígenas americanos, como el cheroqui	Gadugi
Idiomas de África	Ebrima
Idiomas de India	Nirmala UI
Japonés	Meiryo UI

Ten en cuenta que Windows 8.1 también ofrece las siguientes fuentes:

Microsoft YaHei UI Light (disponible para su uso a partir de 20pt)
Microsoft JhengHei UI Light (disponible para su uso a partir de 20pt)
Leelawadee UI Semilight (disponible para su uso a partir de 11pt)
Nirmala UI Semilight (disponible para su uso a partir de 11pt)

Si estás usando fuentes predefinidas para localizar tu aplicación, consulta las API de Windows.Globalization.Fonts para saber cuál es la interfaz de usuario recomendada y documentar fuentes para un sistema de escritura determinado.

Uso de fuentes alternativas

La asociación de Segoe UI con Windows 8 y Microsoft tiene sus ventajas y desventajas. Por un lado, a través del uso adecuado le agregas credibilidad instantánea a tu aplicación. Pero el uso de la fuente puede resultar desafiante para infundir tu propia personalidad o marca en tu aplicación.

Afortunadamente, Windows 8 se entrega con una variedad de alternativas de alta calidad para Segoe UI. Una fuente serif como Cambria tiene buena cobertura de idioma y proporciona una apariencia tradicional. Calibri, la fuente de creación predeterminada, resultará familiar para tus usuarios. En Windows 8, se ha agregado una versión Light de Calibri, lo que la convierte en una buena alternativa sans-serif frente a Segoe UI. Al igual que Segoe UI, Cambria y Calibri incluyen características avanzadas de OpenType. En Windows 8.1, también hemos agregado una nueva familia de tipo de letra llamada Sitka, disponible en diversos tamaños.

Cuando uses una fuente predefinida, pruébala en un equipo que tenga una instalación limpia de Windows 8, de manera que puedas comprobar que la fuente esté disponible y que no requiera la instalación de Microsoft Office u otra aplicación. Windows 8 y Windows 8.1 se suministran con el mismo conjunto de fuentes exacto, independientemente de la localización o edición.

Si el conjunto principal de fuentes de Windows no proporciona lo que necesitas, puedes incrustar fuentes alternativas dentro de tu aplicación. Sin embargo, ten en cuenta los posibles problemas de licencias y de representación, como estos:

La mayoría de las fuentes de terceros carece del mismo nivel de sugerencias que muchas de las fuentes predefinidas de Windows, de manera que debes asegurarte de probarlas completamente en los tamaños que te sean pertinentes.
Aunque la mayoría de las licencias de fuente permite algunas formas de incrustación de fuentes de documentos, prácticamente ninguna de ellas permite que la fuente se redistribuya ni se incruste dentro de una aplicación o un juego. Antes de incrustar una fuente, asegúrate de leer atentamente la licencia de la fuente y, si tienes dudas acerca de si puedes incrustarla, comunícate con el creador de la fuente.

Elección de los tamaños y grosores adecuados

Con la aparición de la creación de publicaciones, surgió un fácil acceso a una gran cantidad de tamaños y grosores de tipos. Los primeros creadores de publicaciones usaban a menudo una amplia variedad de tamaños y grosores de tipos en el mismo documento, una marca distintiva de la tipografía aficionada. Demasiados tamaños y grosores de tipos dificultan la posibilidad de establecer una jerarquía de información eficaz. Por ese motivo, la interfaz de usuario de Windows 8 usa solo algunos tamaños y grosores de fuentes:

Segoe UI Light de 42 puntos para los títulos
Segoe UI Light de 20 puntos para los encabezados
Segoe UI Semilight de 11 puntos para la copia del cuerpo
Segoe UI Regular de 9 puntos para leyendas

Para obtener la tabla de tipos completa, consulta Directrices para fuentes.

Nota La tabla de tipos de Windows está optimizada para texto claro en fondos oscuros, y usa de manera deliberada fuentes más ligeras. Si tu aplicación muestra principalmente texto oscuro en un fondo claro, puede que no sea adecuado usar esta tabla, porque las fuentes como Segoe UI Light o Semilight no funcionan bien en tamaños pequeños (texto gris oscuro en un fondo gris claro). Las fuentes más pesadas, como Regular o Semibold, son mejores para el texto oscuro en un fondo claro.

Si decides diferir de la tabla de tipos de Windows 8, mantén la variedad de estilos y tamaños de tipo al mínimo.

Diseño de la página de tu aplicación

La cantidad de espacio alrededor del texto es tan importante como el tamaño de fuente, y por este motivo te recomendamos usar una cuadrícula tipográfica para diseñar el texto. Para obtener más información acerca de cómo trabajar con la cuadrícula de Windows, consulta Diseñar una página de la aplicación. Además de usar la cuadrícula, presta especial atención a los márgenes y al espacio alrededor de las imágenes e ilustraciones. Un buen diseño puede arruinarse si el texto fluye alrededor de una imagen de manera deficiente o si los elementos de la página tienen márgenes incoherentes.

Ocho sugerencias para una buena tipografía

Para lograr una buena tipografía, no solo se trata de usar la fuente adecuada con los tamaños apropiados y un buen espaciado. Aunque hay muchos manuales sobre tipografía (consulta la sección Lectura sugerida), aquí se incluyen algunas sugerencias para que tu tipografía sea excelente.

1. Aplica las características de OpenType de manera global.

Si usas una de las fuentes UI recomendadas, aplica estas características de OpenType a todo el texto: interletraje (kern), ligaduras discrecionales (dlig) y conjunto de estilos 20 (ss20).

El interletraje mejora el espaciado entre letras de tu texto, y es más evidente con tamaños más grandes (por ejemplo, consulta "Para" en la ilustración de antes y después que aparece a continuación).
Las ligaduras son elementos clave de tipografía de alta calidad, pero para evitar que el diálogo se redistribuya en contenido heredado, codificamos las ligaduras estándar como ligaduras discrecionales en Segoe UI, de manera que debes activarlas para usarlas.
El conjunto de estilos OpenType 20 te permite acceder a espaciado y formas de letra preferidos. (Este conjunto de estilos resulta particularmente útil para los números). Como ventaja adicional, cuando aplicas este conjunto de estilos, se garantiza una representación de texto coherente en todos los grosores y estilos de Segoe UI.

Si no usas las fuentes UI recomendadas, es mejor aplicar únicamente interletraje (kern) y ligaduras estándar (liga). No apliques ligaduras discrecionales si has decidido prescindir de las fuentes recomendadas.

<p class='note'>
    6/16/2012<br />
    To: Simon Daniels<br />
    Please find enclosed five flashing baffles.
</p>

.note {
    font-family: 'Segoe UI';
    -ms-font-feature-settings: 'kern' 1, 'dlig' 1, 'ss20' 1, 'lig' 1
}

En estas ilustraciones se muestra el texto antes y después de aplicar características de OpenType.

Antes	Después

2. Aprovecha la eficacia de Unicode.

La manera principal de darle un aspecto más profesional a tu texto es evitar el texto ASCII sin formato a través del uso de caracteres adecuados:

Evita las comillas rectas y los apóstrofos.
Usa el símbolo de multiplicación en lugar de la "x" minúscula.
Considera el uso del símbolo de relación en lugar de dos puntos como delimitador de tiempo.
Emplea guiones adecuados en lugar del signo menos.

El uso inapropiado del guión más común es en los intervalos numéricos; usa un guión corto en su lugar. Como perfeccionamiento tipográfico adicional, usa un espacio muy fino antes y después de un guión corto. Finalmente, con las figuras de alineación o el texto en todo mayúsculas, eleva levemente el guión corto para que quede en el centro de la letra óptica.

Si tu aplicación muestra contenido que no controlas, como una fuente de noticias, puedes corregir automáticamente el contenido sobre la marcha usando técnicas básicas de búsqueda y reemplazo de cadenas.

Aquí hay algunos ejemplos de cómo puedes usar Unicode para mejorar tu texto.

Sin símbolos Unicode	Con símbolos Unicode	Puntos de código Unicode para usar
		U+201C, U+201D
		U+2019
		U+2236
		U+00D7
		U+00BD
		U+2026
		U+2013, U+200A (espacio muy fino)

Unicode también incluye miles de símbolos, incluidos 722 símbolos emoji que se agregaron al estándar. Puedes usar muchos de estos símbolos en lugar de texto y mapas de bits en tu aplicación. Consulta Directrices para iconos de Segoe UI Symbol para ver una lista de los símbolos disponibles.

3. Usa mayúsculas tipo oración

Al comunicarte mediante texto, el método aplicable de forma global consiste en usar las mayúsculas tipo oración convencionales. Aplicar estilo al texto de forma que esté todo en mayúsculas o todo en minúsculas no se traducirá en sistemas de escritura internacionales en los que se usa únicamente o mayúsculas o minúsculas. Si usas mayúsculas tipo oración estándar, tu aplicación podrá llegar a un público más amplio.

4. Usa las características de OpenType de manera selectiva.

Si sigues las primeras tres reglas, tu texto tendrá un buen aspecto. Pero si quieres mejorarlo aún más, puedes aplicar las características de OpenType en determinadas partes del texto. Por ejemplo, usa la característica de OpenType de versalitas para los acrónimos. Esta característica se aplica a versalitas reales (no a mayúsculas con escala). Si el texto contiene números, aplícale la característica de cifras de estilo antiguo. Esta característica usa números de estilo antiguo (también conocidos por algunos usuarios como números en minúsculas) que pueden adaptarse mejor al aspecto de tu contenido.

Este es un ejemplo:

<p style="font-family: ’Segoe UI’;" >
   In <span style="font-feature-settings: ’onum’ 1;">2012</span> <span style="font-feature-
   settings: ’c2sc’ 1;">NASA</span> sent <span style="font-feature-settings: ’onum’ 1;">5</span> 
   astronauts to the <span style="font-feature-settings: ’c2sc’ 1;">ISS</span>
</p>

Antes de aplicar la característica de cifras de estilo antiguo:

Texto antes de aplicar la característica de cifras de estilo antiguo

Después:

Texto después de aplicar la característica de cifras de estilo antiguo

5. Edita.

La edición es un aspecto de la tipografía que se olvida con frecuencia. Muchos diseñadores no consideran el texto en sí como algo que deban modificar. Pero si el texto no está bien escrito ni es fácil de comprender, no importa lo bueno que sea su aspecto.

6. Usa interletraje, espaciado entre caracteres, división de palabras y alineación de manera eficaz.

Como cualquier diseñador de tipos te dirá, el espacio entre las letras es tan importante como las formas de las letras. El interletraje (mencionado en la primera regla), aplica ajustes de espaciado entre pares específicos de letras para mejorar el espaciado de las letras. Te recomendamos aplicarlo a todo el contenido.

Por otro lado, el espaciado entre caracteres, agrega (o quita) espacio entre todas las letras de una cadena en la misma proporción. Dado que el espaciado de letras predeterminado de una fuente generalmente está optimizado con fines de legibilidad en un tamaño en particular, hay casos en los que puede resultar adecuado ensanchar levemente el espaciado. Los valores de espaciado entre caracteres de 0,01 em o 0,02 em pueden ser útiles.

El uso de texto completamente justificado dificulta la posibilidad de lograr un buen espaciado. Cuando el texto se fuerza para que se ajuste a un contenedor a través de la justificación, el espaciado siempre se ve alterado. El texto justificado generalmente tiene "ríos" de espacios en blanco (huecos significativos entre las palabras) en todo el contenido. Evita el texto totalmente justificado y mantén una alineación a la izquierda siempre que sea posible, y aplica división de palabras para evitar que el borde derecho del texto parezca demasiado desigual.

7. Usa controles basados en fuentes.

Uno de los secretos mejor guardados de la tipografía de Windows es que muchos de los botones, iconos y controles de la interfaz de usuario se basan en fuentes. No son mapas de bits ni Scalable Vector Graphics (SVG), sino glifos asignados al área de uso privado Unicode de la fuente Segoe UI Symbol. Diversas aplicaciones de exhibición usan el mismo enfoque para proporcionar sus iconos y controles.

La escala de iconos y controles basados en fuentes, como los caracteres de fuentes normales, puede colocarse en línea con otros elementos de texto y, a través de la disposición en capas, puede aparecer a color. Windows 8.1 admite las fuente a color completo, lo que amplía aún más las posibilidades de los controles basados en fuentes.

8. Permite que el lector personalice la experiencia de lectura.

Ofrece opciones de configuración que permiten a los usuarios cambiar el tamaño del texto del cuerpo, sin provocar un impacto en la configuración de todo el sistema. Se recomienda usar estos valores: pequeño (11 puntos), mediano (14 puntos) y grande (18 puntos). Además, la aplicación también puede permitir que los lectores elijan entre texto oscuro sobre un fondo claro, que es mejor para la lectura, y texto oscuro sobre un fondo con color o un texto claro sobre un fondo oscuro, que pueden ayudar a reducir la fatiga ocular en determinados entornos. En los dispositivos de lectura electrónica dedicados, los lectores acostumbrados a esta funcionalidad prefieren poder elegir entre diferentes opciones de fuente del cuerpo. Mantén la lista de opciones limitada y adecuada para el idioma.

Cuando crees una aplicación de lectura, considera agregar un control flotante en la barra de la aplicación inferior para permitir a los usuarios cambiar entre los tamaños de texto. Puedes usar el icono de tamaño de la fuente Segoe UI Symbol para lograr una experiencia predecible y uniforme para los usuarios. Para ver una introducción a los iconos estándar, consulta Directrices para iconos de Segoe UI Symbol.

En la siguiente imagen se muestra una aplicación de noticias con un control flotante para cambiar de tamaño el texto ubicado en la barra de la aplicación. Captura de pantalla de aplicación de noticias con un control flotante de tamaño de texto extendido

Lectura sugerida

Si sigues las sugerencias básicas que se describen aquí, tu aplicación tendrá una ventaja tipográfica. Pero apenas roza la superficie de las posibilidades que proporciona el uso de tipos de letra modernos y la eficacia de OpenType. Si se despertó tu interés, te recomendamos la lectura de estos libros:

The Elements of Typographic Style de Robert Bringhurst
Inside Paragraphs: Typographic Fundamentals de Cyrus Highsmith
Detail in Typography de Jost Hochuli
Thinking with Type de Ellen Lupton
Stop Stealing Sheep de Erik Spiekermann y E.M. Ginger

El artículo de IEBlogUso de fuente completa ofrece información básica que describe cómo aplicar características de OpenType de hojas de estilos en cascada (CSS), y las demostraciones vinculadas por Monotype, FontShop y Font Bureau muestran la extensión de las posibilidades que tiene el uso de la tecnología.