El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Maquetación y tipografía para web

Tamaño de lectura de los textos en pantalla

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una vez definida la página básica deberemos, antes de empezar con cosas más complejas, dejar bien definidos los tamaños de textos para que su lectura en pantalla sea cómoda para el usuario de nuestra web.
07:38

Transcripción

Vamos a definir el tamaño de texto. Vamos a por una de las partes más importantes dentro del trabajo con "web fonts" en una página web en cualquier trabajo tipográfico. Tan importante es escoger una buena tipografía como utilizarla al tamaño correcto. No sé si me estoy haciendo mayor o no, pero tal como lo tenemos ahora me tengo que acercar demasiado a la pantalla para leer con algo de comodidad. Este es un tamaño que, tal vez si imprimiéramos, –no sé, no he hecho la prueba– pero podría ser que fuera un tamaño bueno para su lectura, incluso el interlineado, pero como regla general, para pantalla tenemos que hacer un poquito más grandes las formas para que no se canse el ojo, y vamos a abrir un poquito el interlineado. Para ello, vamos a por nuestro código, recordamos que teníamos HTML básico con los párrafos, los títulos h1 y h2, y nuestras tipografías cargadas. Así pues, vamos directamente a trabajar sobre el CSS. La teoría dice que tenemos que tener entre 45-75 caracteres por línea. Vamos a ver que aquí, no nos vamos a poner a contarlos pero tenemos muchos más. Así que vamos a empezar a hacer pruebas. Así de primeras, veo que esto es un poquito ancho, el ancho de columna lo vamos a ajustar un poco. Y a partir de allí, bueno, vamos a hacer un poquito más grande la tipografía y vamos a ampliar el interlineado. Guardamos, recargamos. No nos vamos a fijar en esto, que en esto trabajaremos luego. Vemos que ya empieza a ser esto un poquito más interesante, aunque me he pasado de interlineado, siempre suelo trabajar con esos valores: 1,4; 1,5; 1,6. Y aquí le vamos a poner 130 %, siendo el 100 % 16 píxeles. Vemos que ahora sí que funcionó un poquito mejor, vamos a contar caracteres, así un poquito rápido... Sí, bueno, pues tenemos unos 60 caracteres, así que entre el estándar que dice que 45 y 75, estaríamos en los valores, de hecho ya se ve que esto se puede leer con mucha tranquilidad. Y el interlineado vemos que también maneja un ritmo bastante interesante. Y el ancho, es verdad que con 30 ems lo hemos dejado muy bien. Vamos ahora pues a por los títulos. Vamos a poner el h1 primero, vamos a definir la fuente, vamos a poner "font" y vamos a poner 400, por ejemplo, y el interlineado normal, luego ya lo ajustaremos. Y si no me equivoco era Cinzel Decorative la que hemos elegido: Cinzel Decorative, y si no me pones una "cursive" font-weight. Veamos, he seleccionado el peso 900, con lo cual, digamos que es el peso 900, y le damos a guardar y a recargar. Esta es la tipografía que he elegido, queda maravillosamente bien. Vamos a ver cómo queda en tamaños menores de pantalla, como por ejemplo este sería el tamaño del móvil, vemos que el texto queda genial aunque sí que voy a cerrar un poquito esto, el interlineado, para cuando se salta a dos líneas, y ya lo tendríamos. Lo mismo para h2, en este caso 'font', vamos a ponerlo en este caso con 200. Volvemos a utilizar Crimson Text, si no, me pones una Serif, Y en este caso, el otro peso que he cargado tenía 400 como normal, 700 como Bold, y lo vamos a poner en Itálica Font Style, Italic, y veamos, perfecto. Vemos que está muy bien, pero ahora ya que estamos, vamos a colocar mejor estos elementos. De hecho, creo que va a quedar mejor aunque no sea del todo ortodoxo, pero me da igual porque todo sea en pos del diseño del Quijote. Vamos a poner el h2 por encima del h1, veamos a ver cómo queda... perfecto –con un hueco enorme pero perfecto, me gusta–. Así pues, vamos a decirle al h1 que el 'margin-top' sea cero. Y al h2 le vamos a decir que 'margin-bottom' sea por ejemplo un em. No lo hemos acercado demasiado. Así pues, perfecto. Comprobamos siempre diferentes resoluciones. Perfecto. Y ya que estamos, ¿por qué no le cambiamos el color? Al Quijote le vamos a poner un gris. Bien. Y aquí le vamos a poner un rojo bonito que yo me sé. El Quijote debería ser... a ver... no, al revés tal vez... un poco más –yo si no pruebo todas las opciones no me quedo tranquilo– tal vez así. Podemos dejarlo con tres numerales, pero ya que estamos aquí, en vivo, vamos a hacerlo bien. Así pues, ya tendríamos el tamaño óptimo de lectura, tanto para el titular 1, el titular 2, como para el texto, que es realmente lo más importante. El texto corrido tenemos que estudiar, y ya has visto que en cinco minutos lo hemos hecho, y perder un poquito de tiempo en el ancho de la columna por una parte, y por otra parte el tamaño del texto. Por último, una vez que tengamos esas dos proporciones tanto el ancho de la columna como el tamaño del texto, trabajaremos sobre el interlineado, que también se hace en un momento. En pantalla, yo suelo trabajar entre 1.4, 1.6 de factor de multiplicación del interlineado, pero bueno es cuestión de probar con cada tipografía, cada una tiene sus propias características y puede variar. Así pues ya tendríamos nuestros tamaños de lectura óptimos para la lectura en pantalla.

Maquetación y tipografía para web

Aprende cómo seleccionar una fuente óptima para su lectura en pantalla y cómo exprimirla para aprovechar en tus proyectos web todas las posibilidades de las fuentes OpenType.

2:10 horas (25 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:30/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.