Ricotero’s Blog

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):

Enlace: Typographic Contrast and Flow

written by RiCoTeRo X