1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

font-size, con 16px puedes leer mejorimagen de s2art

Relativa facilidad de lectura, por qué usar un font-size de 16px

Les cuento que acabo de aumentar el tamaño del texto en el blog, ahora los posts de Aprendiendo Web tienen un font-size de 16 píxeles, y el texto del sidebar es de 13px.

La razón es muy sencilla, hace unos minutos llegue al post Relative readability de Wilson Miner, en este explica por qué un texto de 16 píxeles en la pantalla se ve igual que uno de 11 puntos en texto impreso.

Un texto de 16 píxeles en la pantalla se ve igual que uno de 11 puntos en texto impreso.

¿No me creen?

Wilson Miner tuvo la gentileza de permitirme usar una de sus imágenes en mi blog para ilustrar este punto.

16 píxeles en la pantalla es igual a 11 puntos en texto impreso

Increíble (y muy lógico también), al momento de leer, los monitores están siempre a una distancia mayor que los libros...

Pueden hacer la prueba si gustan, se darán cuenta que es cierto, sólo tomen una revista a la distancia que la leen normalmente y comparen el tamaño del texto con el de este blog desde donde están sentados.

El estándar 100% fácil de leer

El post de Wilson enlaza a un artículo escrito en el 2006 por Oliver Reichenstein titulado The 100% Easy-2-Read Standard, es muy bueno, les recomiendo que lo lean. Aquí algunos puntos interesantes.

No nos digan que ajustemos el tamaño de letra

No queremos cambiar la configuración de nuestros navegadores cada vez que visitamos un sitio web.

No nos digan que hacer scroll está mal

Porque entonces, todos los sitios web están mal. No hay nada malo con hacer scroll, nada, así como no hay nada de malo en pasar las páginas de un libro.

No nos digan que usemos anteojos

Mejor, deja de lamer la pantalla, recuéstate en tu silla (!) y continúa leyendo en una posición relajada.

El artículo de Reichenstein nos da luego 5 simples reglas para hacer nuestros sitios más fáciles de leer, no se lo pierdan.

Al final la idea es que estén cómodos al leer en la pantalla, así que recuéstense en sus sillas, disfruten leyendo la web y pasen el mensaje ;)

¿Qué opinan de este cambio?

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Pablo Pablo

    Tu post de hoy me ha venido genial. He conseguido cambiar el tamaño de la fuente de mi blog a 16x, pero no sé que tipo de fuente (uso Arial, por el momento) le va bien, y no sé cuántos puntos debería usar de separación entre línea y línea, ni cómo cambiar. Tal y como está ahora, el texto aparece demasiado junto, no respira, como dice en el post que linkas.

    Un saludo y gracias.

  2. Avatar de Coffee Coffee

    Increible como un pequeño cambio puede dar mayor satisfacción al usuario.

    Felicitaciones.

  3. Avatar de Christian Christian

    La verdad es que este blog (no lo conocía antes) es muy como de leer. No se si la explicación me convence del todo porque las cosas se ven muy diferente según el tamaño de la pantalla y la resolución . Yo en mi ordenador portatil tengo una resolución de 1440x900 px en 15,1 pulgadas. Tu blog lo veo genial así, pero seguro que en una pantalla de 15 pulgadas a 1024x768 lo veo muy grande, y no te digo nada a menores resoluciones. En cualquier caso es cierto que por lo general los tipos de las webs son muy incómodos, quizá mis reticencias se deben a la costumbre... he incrementado un punto a la tipografía de mi blog a raíz del articulo.

    Por cierto, encantado de conocer tu blog.

  4. Avatar de moz667 moz667

    Hombre.... el standard de 16px dependera de medio que uses para acceder a la informacion. Por ejemplo tu blog con un eeepc se ve un poco descojonao (800x480 o asi no estoy seguro...) no se como se vera en una pda o en un movil...

    Salud3!

  5. Avatar de Otaku RzO Otaku RzO

    Esta genial tu sitio, realmente genial. El cambiar el tamaño de la fuente es lo más c00l que se puede hacer en los blog o sitio donde la lectura sea obligada. A partir de ahora usaré este tamaño como estándar :) . Saludos.

  6. Avatar de Hugo Hugo

    Un gran acierto.

  7. Avatar de Germán Germán

    Gracias a todos por sus comentarios, ya me acostumbré a leer mi blog con este font-size y me resulta muy cómodo :)

    Christian y moz667, quiero hacer la prueba con diferentes medios y a varias resoluciones, por lo pronto he cambiado el font-size base de 16px a medium.

    Saludos.

  8. Avatar de Luis Luis

    Este es uno de los mejores consejos que leido en mucho tiempo, siempre discutía con unos amigos sobre el tamaño de texto en una web y nunca quedabamos conformes, hoy tengo un verdadero motivo para respaldar este tamaño tan "grande".

    Aparte de que siempre que encuentro un sitio con texto pequeño lo primero que hago es "+++++" en opera.

  9. Avatar de Amy Amy

    Muy buen consejo, la lectura la sentí comoda y agradable , y sí, no me retorci en la Pc para leer el documento!!

    SAludos,

  10. Avatar de Asuknamun Asuknamun

    Hola, hace mucho Mauzzer me habló de ti y tu blog y te seré sincero lo he revisado poco, pero para compensar te diré que tienes un contenido muy bueno, pero bueno el motivo de este mensaje es para decirte que he seguido tu consejo y desde hoy en mi blog se lee con font de 16px.

    Y SÍ ¡¡ lo veo mejor ¡¡

    Saludos y éxitos.

  11. Avatar de Nds Nds

    Es una buena idea, no se si llegaré a 16 Px tengo que probarlo...supongo que también dependerá mucho, de la resolución de pantalla. :) Salu2

  12. Avatar de Rubén Rubén

    Gracias por el consejo. Soy nuevo en esto y he creado un par de blogs.
    la verdad que al principio tenía el tamaño a 12 y no me sentía nada cómodo. Me puse a buscar en la red y encontré tu artículo.
    No sé si poner 16 o 15 de tamaño. Ya veré cual veo mejor.
    De nuevo gracias

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910