7 formas para crear contrastes en textos

Bien sabido por muchos es que en la actualidad debido a las prisas más que leer los diferentes blogs y webs lo que se hace es echarles un vistazo rápido, de lo que se deriva que la vista del usuario recaerá en el primer sitio que toque si no le dejamos claro donde queremos nosotros que mire. Dentro de una web no todo el contenido tiene la misma importancia, por diferentes circunstancias podemos querer que algún texto destaque sobre el resto, por ser informativo, por ser publicidad o cualquier otra razón.

Existen varias formas de conseguirlo, desde WebDesignerWall nos explican 7 que yo voy a interpretar muy libremente en español para que tenga más difusión:

1. Tamaño

Obviamente, cuanto mayor sea el texto, más destacará sobre el que tenga cerca, por esto se suelen poner lo títulos en un tamaño mayor que el resto del contenido, para que el usuario encuentre rápidamente el tema que le puede interesar sin tener que leer todo.

Otra forma es combinar un tamaño pequeño y otro grande para que el primero destaque. El clásico texto que se coloca debajo del titulo de un post con la fecha de la entrada, el autor o cualquier otra información.

2. Tipo de letra

Mediante el uso de diferentes fuentes también conseguimos el efecto de contraste deseado. Aquí mucho cuidado con cuantas diferentes metes, mi consejo es no más de tres. Nos topamos con el problema de los diferentes SO,s ya que cada uno interpreta las letras un poco por su cuenta, es recomendable pues que usemos siempre dos tipos, serif y sans-serif, la primera para títulos y la segunda para texto más largo, o al revés.

3. Color

Indudable aliado es el color, podremos usarlo de varias formas para destacar lo que necesitemos. Por ejemplo poner en un color diferente los enlaces dentro de un texto, usar un mismo color en diferentes intensidades para marcar un objeto en su estado presionado y sin presionar. Puede ser sustituto también del primer punto, en vez de usar tamaños usaremos colores, por ejemplo el texto en color gris y el título en rojo.

4. Clase CSS text-transform

Las mayúsculas son otra variante interesante para nuestro objetivo. Por ejemplo puede que queramos usar el mismo tipo de letra para el texto y para el título. Usaremos las mayúsculas para diferenciarlos, poniendo los títulos en este estado con la propiedad text-transform: uppercase. Esta forma no es conveniente usarla a la inversa, si ponemos un texto largo todo en mayúsculas perderá legibilidad.

5. Decoración y estilos

Cuidado con la opción de subrayar texto, es un uso peligroso. El usuario en la web está acostumbrado a asociar automáticamente el texto subrayado con un enlace, por esto es recomendable no usar la opción css underline en texto que no sea enlace. Si queremos hacer destacar una palabra o línea usaremos la opción de poner la fuente en italic.

6. Negrita

Muy usado por todos es la opción de poner texto en negrita, pero cuidado con el abuso. Si dentro de una frase ponemos la mayoría en negrita pierde su efecto de contraste.

7. Espacios

Los espacios son parte primordial, se encargan de indicarle al lector por donde va el flujo del diseño, donde empieza, donde tiene que parar, donde termina etc. Tenemos varias formas de crear espacios:

  • Romper bloques: mediante la propiedad margin o padding
  • Romper apartados: el espacio que metemos después de un párrafo, podemos usar las dos características citadas antes, margin o padding
  • Tracking: espacio entre letras, se consigue mediante letter-spacing
  • Leading: espacio entre lineas, se consighe mediante line-height
  • Indentación: normalmente se usa en listas, lo conseguiremos mediante padding o margin

Finalmente aquí podéis ver una imagen que acompaña al artículo original donde se ve en uso todo lo dicho hasta aquí (click sobre la imagen para ampliar):

Typographic Contrast

Enlace: Typographic Contrast and Flow

Ir arriba