El Interlineado en el diseño web

El Interlineado en el diseño web

Fecha: 14-Feb-2010 | Autor: .
Guardado en: Accesibilidad y Usabilidad, Diseño Web, HTML y CSS

El interlineado, o sea, el espacio entre cada línea de texto, es un elemento poco considerado en el diseño web, casi como si diera lo mismo el espacio que separe cada renglón de texto.

Sobre todo en artículos o noticias extensas puede influir en primer lugar en la facilidad de lectura del texto y en segundo (y como consecuencia de lo primero) en la cantidad de gente que opte por acabar de leer tu artículo.

Un ejemplo.

Quiero citar como ejemplo el caso que motivó mi interés en escribir este post, la web de la revista Muy Interesante, veamos sus contenidos y como se verían de hacer uso de un mejor interlineado:

Antes

Despueé


¿Por qué este anuncio?

Ver animación del antes/después.

La técnica.

El aspecto técnico relativo a la separación de líneas de texto en entorno web, es muy sencillo; tenemos una propiedad CSS que nos permite variarlo a nuestro gusto: line-height.

Podemos asignarle un valor en pixels, porcentaje o ems, y agrandará la separación entre líneas.

Otro aspecto importante a tener en cuenta, es la separación de los párrafos. Es muy importante y realmente ayuda a la lectura el separar nuestro contenido en párrafos y que estos párrafos estén sutilmente separados entre sí.


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , , , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

12 comentarios, participa!

  1. rbonfil

    14. Feb, 2010

    una simple linea en css puede marcar la diferencia.

    Perdón mi comentario tan corto.

  2. recursos humanos peru

    25. Feb, 2010

    Gracias, fue un gran ayuda memoria!

  3. user

    11. Mar, 2010

    muchas gracias!!!
    me va a servir mucho, no me habia dado cuenta de la importancia de usar line-height, los textos se ven mucho mejor

  4. Marcelo

    11. Mar, 2010

    Exacto, es un tip corto, tan sólo una línea, pero realmente puede cambiar el aspecto de una web con contenidos de texto ;)

  5. alxidest

    29. Dic, 2010

    Esto es lo primero que aprendi hace rato en el desarrollo web, muy importante.

  6. Proyectos web

    22. Mar, 2011

    Excelente publicación. Nunca me había parado a pensar en el interlineado y la importancia que tiene…

  7. Bcorazon

    31. Oct, 2011

    En un post de otra página encontré que el interlineado debería ser 20% superior al tamaño de la letra, esto es que si tenemos la letra de 10 puntos pondríamos 12 puntos de interlineado, pero realmente no entiendo cómo podría verse eso. Ni modos de preguntarle al tipo que realizó el articulo porque no permite colocar comentarios.. Pero usualmente en qué distancia de interlineado podríamos poner un texto de cuerpo para que se vea legible y agradable a la vista? Alguna recomendación? O podrías explicarme bien a qué podría referirse este tipo?

  8. johanso

    04. Nov, 2011

    gracias,, exactamente lo que estaba buscando… thank.

  9. Marcelo

    07. Mar, 2012

    Hola Bcorazon, yo creo que el 20% a veces se queda corto y se hace más cómodo con un interlineado aún mayor (quizá en el entorno de un 30/40%)… cuelgo esta imagen como ejemplo ;) Slds.

  10. diseño web sabadell

    20. Feb, 2013

    Muy interesante, me gusta mucho este blog.

  11. Muy buenos consejos, el ejemplo de la página web es bastante explicativo. Hay que mantener un buen diseño en nuestra web cuidando tanto la tipografía como el interlineado y su relación con las imágenes.

  12. niko ajucum

    30. Dic, 2016

    Muy interesante y su aplicaciòn es muy sincello y permite modificar el espaciado en todos los documentos.

Deja tu opinión