Directrices sobre fuentes

Applies to Windows only

El uso correcto de los tamaños y espesores de fuente, colores, espaciado e interlineado puede conferir a tu aplicación de la Tienda Windows un aspecto ordenado y organizado que facilite su uso. Sigue estas directrices al seleccionar fuentes y al especificar tamaños y colores de fuente.

Existen recursos de estilo disponibles que facilitan el seguimiento de estas directrices:

Si buscas una lista de iconos Segoe UI Symbol, consulta Guidelines for Segoe UI Symbol icons.

Qué hacer y qué no hacer

Para lograr simplicidad y claridad, se necesita prestar mucha atención a los detalles tipográficos. Al desarrollar la interfaz de usuario de tu aplicación, te recomendamos que sigas estas normas:

  • Usa las fuentes recomendadas.
    • Usa Segoe UI (el tipo de letra principal de Windows) para los elementos de la interfaz de usuario como botones y selectores de fechas. Segoe UI es compatible con los alfabetos latino, cirílico, griego, árabe, hebreo, armenio y georgiano.
    • Usa Calibri para el texto que el usuario escribe y lee, como correo electrónico y chat. Calibri es compatible con los alfabetos latino, griego y cirílico. Consulta Para lectura y escritura en la sección Instrucciones de uso adicionales que aparece más abajo.
    • Usa Cambria para los bloques de texto más grandes, como un lector RSS o de revistas. Calibri es compatible con los alfabetos latino, griego y cirílico. Consulta Para lectura en la sección Instrucciones de uso adicionales que aparece más abajo.

    Nota  Hay idiomas y sistemas de escritura que usan otras fuentes y, por tanto, pueden requerir un tamaño y un espaciado diferentes. Cuando traduzcas el contenido de tu aplicación, si usas fuentes predefinidas, utiliza las API de Windows.Globalization.Fonts para identificar las fuentes de interfaz de usuario y de documento adecuadas de un idioma determinado.

  • Para los elementos de la interfaz de usuario, usa los siguientes estilos y tamaños de fuente:
    • Usa Segoe UI Semilight de 11 ptos para la mayor parte del texto.
    • Usa Segoe UI de 9 ptos, el tamaño más pequeño, para elementos de texto cortos, como títulos de botones.
    • Usa Segoe UI Light de 20 ptos para elementos de texto que deben ser claramente visibles y atraer la atención de los usuarios, pero que caben en una sola línea. Si la fuente de 20 ptos es demasiado grande, usa Segoe UI Semilight de 16 ptos. Por ejemplo, si tienes una lista que incluye muchos elementos, quizá sea mejor usar una fuente de 16 ptos. Lo que no debe hacerse es utilizar ambas fuentes de 20 y 16 ptos en la misma página.
    • Usa Segoe UI Light de 42 ptos para elementos de la interfaz de usuario destacados que tengan una o dos palabras en una sola línea.

    En la sección Instrucciones de uso adicionales encontrarás otras recomendaciones detalladas sobre grosor, opacidad, espaciado entre caracteres y conjunto de estilos de Segoe UI.

  • Usa contraste (de grosor, tamaño y posición) para distinguir claramente los elementos de la página.
  • Usa las siguientes opacidades:
    • El texto principal tiene una opacidad del 100%.
    • El texto secundario tiene una opacidad del 60%.
    • El texto en estado de desplazamiento tiene una opacidad del 80%.
    • El texto en blanco y negro en el estado presionado tiene una opacidad del 40%. El texto en otros colores tiene una opacidad del 60%.

    Para ver ejemplos de fuentes Segoe UI con diferentes tamaños y opacidades, consulta Tabla de tipos Segoe UI en la sección Instrucciones de uso adicionales.

  • Indica el foco del teclado con cuadrados de píxeles blancos y negros alternativos.

    Encabezado sobre un fondo oscuro con el foco del teclado

  • Si un encabezado o subencabezado de página es demasiado extenso para mostrarlo, usa puntos suspensivos (U+2026), no tres puntos seguidos. No dejes espacio entre el texto del encabezado y los puntos suspensivos. encabezado largo con puntos suspensivos
  • Sigue las directrices de diseño para las aplicaciones de la Tienda Windows. Para más información, consulta Diseñar una página de la aplicación.
  • No uses fuentes en cursiva.

Instrucciones de uso adicionales

Grosores predefinidos para Segoe UI

Segoe UI es la fuente más reconocible del sistema y la más representativa de la nueva interfaz de usuario de Windows. Use Segoe UI para todos los elementos de interfaz de usuario.

Las hojas de estilos de las aplicaciones de la Tienda Windows proporcionan cinco versiones distintas de Segoe UI, cada una con un grosor distinto:

  • Segoe UI Light

    Segoe UI con un grosor de 200.

  • Segoe UI Semilight

    Segoe UI con un grosor de 300.

  • Segoe UI

    Segoe UI con el grosor normal, 400.

  • Segoe UI Semibold

    Segoe UI con un grosor de 600.

  • Segoe UI Bold

    Segoe UI con un grosor de 700.

Para usar estos grosores predefinidos, establece la familia de fuentes en uno de estos nombres de fuente Segoe UI. En aplicaciones con JavaScript y HTML, usa la propiedad font-family de las hojas de estilo CSS. Si usas C#/VB/C++ o XAML, usa FontFamily.


<p style="font-family: 'Segoe UI Semibold'">Semibold text</p>


<TextBlock x:Name="semiBold" Text="Semibold font." FontFamily="Segoe UI Semibold"/>


Tabla de tipos Segoe UI

Esta tabla de tipos muestra los tamaños, grosores y colores que se deben usar para las distintas partes de la interfaz de usuario. Para cada parte de la interfaz de usuario, la tabla muestra los colores que se deben usar con una hoja de estilos oscura o con una hoja de estilos clara.

  • El texto principal tiene una opacidad del 100%.
  • El texto secundario tiene una opacidad del 60%.
  • El texto en estado de desplazamiento tiene una opacidad del 80%.
  • El texto en blanco y negro en el estado presionado tiene una opacidad del 40%. El texto en otros colores tiene una opacidad del 60%.

(La “clave de ilustraciones” de cada entrada identifica el estilo de texto de la imagen que sigue a esta tabla).

Vista predeterminadaEstado de reposoEstado de desplazamiento (opacidad: 80%)Estado presionado (opacidad: 40%)
Encabezado de página
  • No lo uses cuando el ancho de la aplicación es de 500 píxeles o menos.
  • Familia de fuentes: Segoe UI Light
  • Tamaño de fuente: 42 ptos
  • Clave de ilustraciones: A

Texto de encabezado de página con la hoja de estilos oscura

rgba(255, 255, 255, 1.0)

Texto de encabezado de página en el estado de movimiento del mouse

rgba(255, 255, 255, 0.8)

Texto de encabezado de página en el estado presionado

rgba(255, 255, 255, 0.4)

Texto de encabezado de página con la hoja de estilos clara

rgba(0, 0, 0, 1.0)

Texto de encabezado de página en el estado de movimiento del mouse

rgba(0, 0, 0, 0.8)

Texto de encabezado de página en el estado presionado

rgba(0, 0, 0, 0.4)

Subencabezado de página
  • Familia de fuentes: Segoe UI Light
  • Tamaño de fuente: 20 ptos
  • Clave de ilustraciones: B

Un subencabezado en la hoja de estilos oscura

rgba(255, 255, 255, 1.0)

Un subencabezado en el estado de movimiento del mouse

rgba(255, 255, 255, 0.8)

Un subencabezado en el estado presionado

rgba(255, 255, 255, 0.4)

Un subencabezado en la hoja de estilos clara

rgba(0, 0, 0, 1.0)

Un subencabezado en el estado de movimiento del mouse

rgba(0, 0, 0, 0.8)

Un subencabezado de página en el estado presionado

rgba(0, 0, 0, 0.4)

Subencabezado interactivo
  • Familia de fuentes: Segoe UI Light
  • Tamaño de fuente: 20 ptos
  • Glifo: Segoe UI Symbol U+E26B
  • Espaciado entre el texto y el glifo: 10 píxeles
Un subencabezado interactivo en la hoja de estilos oscura

rgba(255, 255, 255, 1.0)

Un subencabezado interactivo en la hoja de estilos oscura, estado de desplazamiento

rgba(255, 255, 255, 0.8)

Un subencabezado interactivo en la hoja de estilos oscura, estado presionado

rgba(255, 255, 255, 0.4)

Un subencabezado interactivo en la hoja de estilos clara

rgba(0, 0, 0, 1.0)

Un subencabezado interactivo en la hoja de estilos clara, estado de desplazamiento

rgba(0, 0, 0, 0.8)

Un subencabezado interactivo en la hoja de estilos clara, estado presionado

rgba(0, 0, 0, 0.4)

Título/encabezado de elemento
  • Subencabezado pequeño
  • Familia de fuentes: Segoe UI Semibold
  • Tamaño de fuente: 11 ptos
  • Clave de ilustraciones: C

Un elemento de título en la hoja de estilos oscura

rgba(255, 255, 255, 1.0)

Un elemento de título en el estado de movimiento del mouse

rgba(255, 255, 255, 0.8)

Un elemento de título en el estado presionado

rgba(255, 255, 255, 0.4)

Un elemento de título en la hoja de estilos clara

rgba(0, 0, 0, 1.0)

Un elemento de título en el estado de movimiento del mouse

rgba(0, 0, 0, 0.8)

Un elemento de título en el estado presionado

rgba(0, 0, 0, 0.4)

Título/encabezado de elemento, secundario
  • Familia de fuentes: Segoe UI Semibold
  • Tamaño de fuente: 11 ptos
  • Clave de ilustraciones: D

Un elemento de título en la hoja de estilos oscura

rgba(255, 255, 255, 0.6)

Un elemento de título en el estado de movimiento del mouse

rgba(255, 255, 255, 0.8)

Un elemento de título en el estado presionado

rgba(255, 255, 255, 0.4)

Un elemento de título en la hoja de estilos clara

rgba(0, 0, 0, 0.6)

Un elemento de título en el estado de movimiento del mouse

rgba(0, 0, 0, 0.8)

Un elemento de título en el estado presionado

rgba(0, 0, 0, 0.4)

Navegación
  • Título/encabezado de elemento, navegación
  • Familia de fuentes: Segoe UI
  • Tamaño de fuente: 11 ptos

Un elemento de navegación en la hoja de estilos oscura

rgba(255, 255, 255, 1.0)

Un elemento de navegación en el estado de movimiento del mouse

rgba(255, 255, 255, 0.8)

Un elemento de navegación en el presionado

rgba(255, 255, 255, 0.4)

Un elemento de navegación en la hoja de estilos clara

rgba(0, 0, 0, 1.0)

Un elemento de navegación en el estado de movimiento del mouse

rgba(0, 0, 0, 0.8)

Un elemento de navegación en el presionado

rgba(0, 0, 0, 0.4)

Texto de cuerpo
  • Familia de fuentes: Segoe UI Semilight
  • Tamaño de fuente: 11 ptos
  • Clave de ilustraciones: E

Texto de cuerpo en la hoja de estilos oscura

rgba(255, 255, 255, 1.0)

N/A

N/A

Texto de cuerpo en la hoja de estilos clara

rgba(0, 0, 0, 1.0)

N/A

N/A

Vínculos
  • Familia de fuentes: Segoe UI Semilight
  • Tamaño de fuente: 11 ptos
  • Clave de ilustraciones: F

Un vínculo en la hoja de estilos oscura

rgba(148, 102, 255, 1.0)

Un vínculo en el estado de movimiento del mouse

rgba(148, 102, 255, 0.8)

Un vínculo en el estado presionado

rgba(148, 102, 255, 0.6)

Un vínculo en la hoja de estilos clara

rgba(79,26,203, 1.0)

Un vínculo en el estado de movimiento del mouse

rgba(79,26,203, 0.8)

Un vínculo en el estado presionado

rgba(79,26,203, 0.6)

Info. terciaria
  • Familia de fuentes: Segoe UI
  • Tamaño de fuente: 9 ptos
  • Clave de ilustraciones: G

Info. terciaria en la hoja de estilos oscura

rgba(255, 255, 255, 1.0)

Info. terciaria en el estado de movimiento del mouse

rgba(255, 255, 255, 0.8)

Info. terciaria en el estado presionado

rgba(255, 255, 255, 0.4)

Info. terciaria en la hoja de estilos clara

rgba(0, 0, 0, 1.0)

Info. terciaria en el estado de movimiento del mouse

rgba(0, 0, 0, 0.8)

Info. terciaria en el estado presionado

rgba(0, 0, 0, 0.4)

Info. terciaria, secundario
  • Familia de fuentes: Segoe UI
  • Tamaño de fuente: 9 ptos
  • Clave de ilustraciones: H

Info. terciaria en la hoja de estilos oscura

rgba(255, 255, 255, 0.6)

Info. terciaria en el estado de movimiento del mouse

rgba(255, 255, 255, 0.8)

Info. terciaria en el estado presionado

rgba(255, 255, 255, 0.4)

Info. terciaria en la hoja de estilos clara

rgba(0, 0, 0, 0.6)

Info. terciaria en el estado de movimiento del mouse

rgba(0, 0, 0, 0.8)

Info. terciaria en el estado presionado

rgba(0, 0, 0, 0.4)

 

Puedes ver cómo se aplican el diseño y la tipografía de aplicaciones de la Tienda Windows en un artículo básico de un blog en esta ilustración:

Un ejemplo de uso de los estilos tipográficos recomendados.

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

Si decides diferir de la tabla de tipos recomendada, reduce al mínimo la variedad de estilos y tamaños de tipo.

Espaciado de Segoe UI (espaciado entre caracteres)

El espaciado entre caracteres (valor global) en la interfaz de usuario es importante para la legibilidad general del texto, sobre todo cuando aparece sobre fondos oscuros o complejos.

Los ajustes del espaciado entre caracteres suelen ser mínimos, casi no se perciben a menos que las letras sean muy grandes, pero pueden marcar una gran diferencia en la legibilidad de un párrafo o una página.

El espaciado entre caracteres se mide en unidades proporcionales, en lugar de unidades fijas como píxeles o milímetros. La unidad proporcional, llamada espacio largo, equivale al tamaño de tipo en puntos. Por ejemplo, el ancho de un espacio largo para un tipo de 11 ptos es 11 puntos. Para establecer el espaciado, debes establecer la propiedad letter-spacing de CSS.

Recomendamos estos valores de espaciado entre caracteres para Segoe UI, en función del grosor y el tamaño de la fuente:

TamañoGrosorValor del grosor (espaciado entre caracteres)
42 ptosLight0,00 espacios largos
20 ptosRegular0,01 espacios largos
Todos los demásTodos0,02 espacios largos

 

Al usar las hojas de estilos de la Biblioteca de Windows para JavaScript, estos valores de espaciado se establecen automáticamente.

Te recomendamos que mantengas el espaciado predeterminado de las fuentes Cambria y Calibri.

Cambios de Windows 8 en el conjunto de estilos de Segoe UI

Windows 8 usa una versión de Segoe UI en la que se han rediseñado varios caracteres predeterminados y que ofrece nuevos grosores, nuevas alternativas de Microsoft OpenType y compatibilidad con más idiomas. Ten en cuenta que estos caracteres rediseñados no cambian el ancho en los estilos normal y negrita. Eso significa que los cuadros de diálogo, los contenidos y los sitios web existentes no se tienen que redistribuir para usar la nueva versión de Segoe UI.

Esta ilustración muestra los principales caracteres que se han rediseñado.

Segoe UI en Windows 7Segoe en Windows 7
Segoe UI en Windows 8Segoe en Windows 8

 

Puedes usar los caracteres de Windows 7 con el conjunto de estilos SS01 OpenType. Para usar este conjunto en una aplicación con CSS, establece la propiedad -ms-font-feature-settings en 'ss01' 1, como se indica en este ejemplo:


<p style="font-family: 'Segoe UI'; -ms-font-feature-settings: 'ss01' 1;">
    Windows 7 Segoe UI
</p>

Si la aplicación usa C#/VB/C++ y XAML, utiliza el método Typography.SetStylisticSet1 para establecer el valor de la StylisticSet1 attached property en true para el dependency object deseado.

También puedes usar el conjunto de estilos SS20, que proporciona el diseño y espaciado preferidos. Esta ilustración destaca las diferencias entre la fuente Segoe UI predeterminada de Windows 8 y las versiones SS01 y SS20.

Versión predeterminada de Windows 8La fuente Segoe UI predeterminada
SS01 (compatible con Segoe UI de Windows 7)La fuente Segoe UI de Windows 7
SS20 (diseño y espaciado preferidos)La versión de SS20 de la fuente Segoe UI

 

Si no te preocupa la compatibilidad con las versiones anteriores, usa el conjunto de estilos SS20.

Para lectura: Cambria

La mayor parte de los medios impresos usan fuentes serif, por lo que los usuarios esperan una fuente serif al leer un libro o una revista. Cambria es una fuente serif diseñada para una lectura prolongada en pantalla. Usa Cambria para mostrar grandes cantidades de texto, como contenido de un libro o una revista.

Nota   Cambria es la fuente predeterminada para el contenido de libros electrónicos sin formato, por lo que puede que las aplicaciones de lectura electrónica permitan que el lector cambie la fuente. También esperamos que haya más contenido de libros electrónicos con un formato de fuente incrustada especificado por el diseñador.

Para las aplicaciones de lectura, sigue estas directrices:

  • Mantén un ancho de columna de texto suficiente para que las líneas de texto no sean demasiado largas para leerlas con comodidad. La cuadrícula tipográfica tiene especificaciones para esto.
  • Divide un texto largo en capítulos o secciones.
  • Incluye compatibilidad para continuar desde el punto en que lo dejó el lector.

Al usar la fuente Cambria, usa estos tamaños de fuente: 9 ptos, 11 ptos y 20 ptos. Puedes usar los grosores de fuente normal y negrita. Te recomendamos que mantengas el espaciado predeterminado.

A diferencia de la fuente Segoe UI, WinJS no proporciona distintas versiones de Cambria para distintos grosores de fuente. En lugar de ello, tienes que establecer el grosor de la fuente (propiedad de CSS font-weight o FontWeight para aplicaciones con XAML) en normal o negrita. Veamos un ejemplo de los tamaños y grosores recomendados para la fuente Cambria.

Grosores y tamaños estándar para la fuente Cambria

Para lectura y escritura: Calibri

Calibri es una familia de fuentes sans-serif diseñada para leer textos largos en una pantalla. Usa Calibri para texto que el usuario escribe o edita, como el texto de un mensaje de correo electrónico o de un cliente de chat. Es la fuente predeterminada en Microsoft Outlook, Microsoft Word y Microsoft PowerPoint.

Al usar Calibri debes establecer el tamaño de fuente en 13 y un grosor normal. Te recomendamos que mantengas el espaciado predeterminado para Calibri.

Veamos un ejemplo de la fuente Calibri:

La fuente Calibri con un tamaño de 13 ptos y un grosor normal

Nota  Calibri de 13 ptos tiene el mismo alto x que Segoe UI de 11 ptos, así que sus tamaños parecen uniformes cuando se usan juntas en la misma línea.

Temas relacionados

Para diseñadores
Diseñar una página de la aplicación
Directrices para tipografía
Etiqueta (o bloque de texto)
Iconos de Segoe UI Symbol
Para desarrolladores (HTML)
WinJS style sheets
Inicio rápido: Agregar estilos y controles de WinJS
Diseñar una página de la aplicación
Iconos de Segoe UI Symbol
font-family property
letter-spacing property
-ms-font-feature-settings
Para desarrolladores (XAML)
Referencia a recursos de temas en XAML
Diseñar una página de la aplicación
Iconos de Segoe UI Symbol
TextBlock.FontFamily property
Muestras
Muestra de visualización de texto XAML
Estilo CSS: personalización de marca de la aplicación
Muestra de asignación de fuentes por idioma

 

 

Mostrar:
© 2014 Microsoft