Curso de Tipografía Responsive

Menú

Webinar sobre Tipografía Responsive: mejora el diseño de tu web

Como miembro activo de la Comunidad WordPress, conozco personalmente a José Ramón Padrón, Country Manager de SiteGround, a quien podrás encontrar en cualquier WordCamp que se precie. Moncho me invitó a impartir un webinar en su canal de YouTube y no dudé ni un momento en aceptar la invitación, ya que soy muy fan de estos webinars y para mí ha sido todo un honor participar.

Para ti se ha quedado este vídeo de algo más de una hora, con un montón de consejos para componer correctamente los textos en la web, mejorando así el diseño, consiguiendo una tipografía responsive.

En este webinar doy un repaso a casi todos los puntos que se tratan en el temario del Curso de Tipografía Responsive.

Espero que lo disfrutes y, si tienes alguna duda, puedes dejarla en los comentarios y la resolveré encantada.

Ir al webinar en el blog de SiteGround >>

Ah, y si quieres contratar un plan de alojamiento web con SiteGround (es el que yo uso), aquí tienes mi enlace de afiliado, con descuento 🙂

Ana Cirujano.

Qué es la Tipografía Responsive

Qué es tipografía

Hay tipografía y tipografías.

Los tipos de letra, como Helvetica o Times New Roman (por citar dos de las conocidas mundialmente) son tipografías.

También se llama tipografía a la técnica de reproducción de caracteres: hay tipografías que no están compuestas por letras sino por dibujos, como por ejemplo los dingbats o The Guilty Hand (de Rubén Chumillas).

Al método de impresión con tipos de plomo también se le llama tipografía (o letterpress) y también al diseño de tipografías.

Tipos móviles
Fuente: Wikipedia

Se llama tipografía, además, a la técnica de elegir tipografías para componer textos y, también, a la composición misma de los textos, en armonía con las imágenes y otros elementos gráficos. Por lo tanto, tipografía es tanto el diseño como la elección de tipografías y el uso que se hace de ellas.

Además, diferenciamos entre microtipografía y macrotipografía.

Qué es la tipografía responsive

La tipografía responsive es la disciplina que se ocupa de mejorar la composición de los textos en la web responsive.

El tratamiento de los textos cambia en función del dispositivo que utilice el usuario y de sus propias preferencias.

Tipografía Responsive

Esto es algo que hacemos los diseñadores gráficos de toda la vida. Siempre que vamos a diseñar una pieza de comunicación para una campaña, tenemos en cuenta una serie de factores que van a afectar al formato, al tipo de letra, al tamaño… El diseño responsive es algo que se inventó en los inicios de la Historia del Diseño Gráfico.

Diseño responsive para la imprenta

Para diseñar una valla publicitaria, el diseñador tiene que tener en cuenta la distancia a la que se va a ver, la velocidad con la que las personas van a poder leer lo que esté escrito, entre otras variables y, en función de esto, definirá unas características concretas para los textos, imágenes y recursos gráficos que se van a utilizar en el anuncio.

Cuando diseñamos las piezas gráficas para una campaña de comunicación, no utilizamos el mismo diseño para un cartel o un folleto: diseñamos aplicaciones y realizamos los ajustes oportunos.

El mismo anuncio de la valla publicitaria, se deberá adaptar para que se imprima en un folleto de mano, que va a tener unas dimensiones mucho menores y se va a leer con mucho más tiempo y desde mucho más cerca. Aunque tenga los mismos elementos (textos, fotografías, etc.), las proporciones serán completamente distintas y es probable que elijamos un tipo de letra diferente para mejorar su legibilidad.

Siempre que diseñemos una nueva aplicación para ese mismo anuncio, tendremos en cuenta estas variables y tomaremos decisiones en base a estas diferencias.

Diseño responsive para la web

En la web ocurre exactamente lo mismo. Debemos adaptar la composición de los textos al dispositivo en el que se va a visualizar la página web. En función del tamaño de la pantalla, sabremos si se trata de un móvil, una tablet o un proyector, y tendremos que tomar las decisiones oportunas para que los textos se lean con facilidad en cada dispositivo. ¿A qué distancia se van a leer los textos? A mayor distancia de lectura, mayor tamaño de la letra.

Además, en los dispositivos móviles, como tienen una pantalla más estrecha, aprovecharemos todo el ancho de pantalla para que quepan cómodamente las frases, por lo que disminuiremos el tamaño de la fuente.

En los dispositivos móviles, evitaremos también que se produzcan cortes innecesarios o inapropiados en las palabras y en las frases, para que la lectura sea más fluida, mediante la utilización de entidades HTML como el espacio fino, el guion discrecional o el espacio de no separación.

Diseño responsive adaptado a todos los usuarios

Además, los usuarios pueden establecer un tamaño predeterminado en sus navegadores.

Nosotros, como maquetadores o desarrolladores frontend, a la hora de establecer los tamaños, los declararemos en unidades relativas, para que puedan adaptarse a las preferencias de cada usuario.

Por lo tanto, el diseño responsive no es solo el que se adapta a todos los dispositivos: el diseño responsive se adapta a todos los usuarios.

Ponencia sobre Tipografía Responsive

Puedes saber más viendo este vídeo de la WordCamp Zaragoza 2018 en el que explico algunas pautas que debemos seguir a la hora de maquetar textos para la web responsive:

Espero que te haya gustado el vídeo. Si tienes alguna pregunta o sugerencia, puedes dejarla en los comentarios.

×
¡Hola! ¿Te gusta el curso? ¿Tienes alguna duda? Estoy por aquí, dame un toque y hablamos.

Si continuas utilizando este sitio aceptas el uso de cookies. Más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar