Text Tokens
Dentro de los estilos tipográficos de Repsol hacemos dos distinciones:
- Estilos para componentes transaccionales - Aplicaciones y Herramientas
- Estilos para componentes editoriales - Portales públicos, Landings y Elementos de comunicación.
Ambas tipologías de estilos se basan en la escala misma escala tipográfica definida para Repsol
Los estilos de texto embebidos en los componentes transaccionales están definidos de forma particular para cada uno de ellos, encapsulándolos para romper dependencias en las herramientas de diseño. Su especificación se recoge en la propia página de cada uno de los componentes.
Las dos categorías de componentes definidas, asociadas a esas dos grandes categorías de producto, quedan determinados según la escala tipográfica, e intersectan en algunos estilos que son válidos para ambas categorías de productos.
Estilos para ambos tipos de producto
Display
El estilo Display se aplica a los encabezados más destacados de una interfaz. Deben llamar la atención utilizando una mínima cantidad de palabras. El uso de este tipo de estilo es limitado, pues sólo se debe utilizar para dar impacto visual.
Titles
Los titles se aplican a los encabezados que deben usarse para títulos de página o secciones de una pantalla.
Bodys
Los estilos de texto body se aplican al cuerpo y los párrafos de texto. Existen tres estilos definidos que se diferencian en el tamaño para adaptarlo a los diferentes elementos de la interfaz.
Caption
Por regla general el estilo caption se aplica a textos de apoyo con un tamaño más pequeño. En dispositivos móviles se crea una excepción, necesaria para garantizar una correcta legibilidad.
Estilos Transaccionales
Los estilos tipograficos transaccionales están pensados para productos donde el usuario tiene que completar tareas, fundamentalmente de intercambio de información, altamente interactivas.
En este tipo de productos, es muy importante que la jerarquía de elementos esté clara, y en este aspecto la tipografía juega un papel muy importante, aunque no necesitan de grandes bloques de texto, es importante que tengan variedad de estilos y tamaños.
Display
Large Device
Small Device
Titles
Large Device
Small Device
Bodys
En las aplicaciones transaccionales no hay grandes bloques de texto, pero en el caso que se necesiten, los estilos a aplicar son los que se recogen a continuación.
Large Device
Small Device
Caption
Large Device
Small Device
Estilos Editoriales
Los estilos de texto editoriales se usan principalmente para productos corporativos y de comunicación,los cuales demandan una fuerte carga de lectura al usuario. Los procesos internos de trabajo siguen, en general un proceso de publicación editorial.
En este tipo de productos se utiliza un mayor número de encabezados que en los transaccionales.
Display
Large Device
Small Device
Title
Small Device
Bodys
Large Device
Small Device
Caption
Large Device
Small Device
Quote
Elemento único y de uso exclusivo en los estilos editoriales.
Énfasis
Los estilos definidos son la forma estándar de utilizar la jerarquía visual tipográfica, pero es posible añadir o quitar énfasis a un texto en ambos tipos de producto digital.
Estilos de Énfasis
Bold
El uso de negritas crea un énfasis fuerte en el texto aumentando el contraste. El uso de bold se puede incluir en displays, titles y bodys.
El estilo de texto en negrita debe usarse con moderación, ya que los grandes bloques de texto configurados en negrita carecen de contraste.
Los títulos y subtítulos funcionan bien en negrita, así como el marcado de palabras claves con este estilo.
Itálicas
El estilo de texto cursiva da un énfasis suave en un bloque de texto. Este estilo de texto se utiliza para citar títulos, citas, nombres propios...
Se puede usar tantas veces como sea necesario, sin utilizarlo en grandes bloques de texto porque limita su legibilidad.
Subrayado
El subrayado tiene un significado funcional en web, por lo que este estilo de texto solo se utilizará para links y enlaces dentro de los bloques de texto.
Color
El color se puede utilizar para crear énfasis. En este apartado también entraría el estilo inverso que se utiliza para crear énfasis y armonía visual en fondos oscuros.
Marcar un texto en color ayuda al lector a reconocerlo como importante, pero hay que usarlo en combinación con los estilos estándares, puesto que tampoco queremos crear grandes abanicos de color.
Dentro de los bloques de texto no se recomienda usar color salvo que se quiera marcar un estado, ya que se puede confundir con links o enlances. Si es recomendable para displays y titles.
Para marcar los estilos de support (error, warning, info y succes) también utilizaremos el color en los textos.
Mayúsculas
El uso de mayúsculas en una palabra dentro de un texto es apropiado para crear un énfasis fuerte. También puede ser efectivo para titulares y subtítulos, pero hay que tener en cuenta que el uso de este estilo crea un efecto muy fuerte, por lo que se recomienda USAR CON MODERACION.
Este tipo de estilo también se puede utilizar en elementos como headers o tabs, para destacar la palabra asociada a la sección.
No es recomendable usarlo en bloques de texto completos.
Espaciado y Sangria
Es una de las formas más sutiles de crear contraste visual y aislar texto de los bloques.
Para destacar más los encabezados se puede añadir más espaciado entre estos y el cuerpo de texto.
La sangría también permite distinguir bloques de texto como citas o listados con bullets.
Alineado
Repsol utiliza tres tipos de alineado:
- Izquierdo: es la configuración predeterminada, ya que es la opción más legible.
- Derecho: el justificado al lado derecho sólo es recomendable usarlo cuando sea estrictamente necesario, ya que resulta de dificil lectura para contesistemas de escritura de izquierda a derecha.
- Centrado: texto centrado dentro de la página web. Se utiliza mayormente para textos en banners. No se recomienda usar en bloques de textos sin un formato adecuado ya que es dificil de leer.