Tipografía web efectiva: reglas, técnicas y diseño responsive

Valora este artículo

Definimos diseño web responsive o adaptativo a la técnica de diseño web que ofrece una visualización correcta de una misma web en distintos dispositivos: ordenadores de escritorio, tablets y móviles.

El diseño web responsive se basa no sólo en columnas, cuadrículas, imágenes e iconos; todo lo anterior no tendría sentido sin unos textos que completaran el contenido.

Cuando se trata de contenido, tenemos que hablar de tipografía web. Observando las nuevas tendencias de diseño web, nos damos cuenta de que contar con una tipografía responsive es un factor importante que todo diseñador o desarrollador web debería tener en cuenta.

Así pues, en este artículo hablaremos sobre la creación de tipografía web responsive y sobre los aspectos más destacados que hay que controlar.

1. Fundamentos de la tipografía.

Un buen uso de la tipografía consiste en seleccionar la tipo (o fuente) correcta para nuestro proyecto, ya esté destinado a una web o a impresión. Desde la familia tipográfica o el color del texto, hasta la longitud y el tamaño de la fuente en diferentes dispositivos, un buen uso de la tipografía nos garantizará que los textos finales generen un resultado de calidad.

Antes de profundizar en el proceso de creación de una tipografía web responsive y efectiva, hablemos primero de algunos términos que debemos manejar para no perdernos.

Tipo de letra.
Tipo de letra

También conocido como familia tipográfica (font-family en CSS). Es el diseño de caracteres entendido como un conjunto completo de letras, números, símbolos, caracteres especiales y peso (o grosor).

Fuente.
Fuente

Es el archivo que incluiremos en el código y que contiene toda la información acerca del tipo de letra utilizada, su peso, su ancho, su estilo, etc.

Línea base.
Línea base

Es la línea imaginaria donde descansan o terminan las letras y hasta la que se extienden los remates de cada tipo de letra.

Altura máxima.
Altura máxima

Es la altura máxima de las letras mayúsculas desde la línea base.

Altura X.
Altura X

También conocida como tamaño de cuerpo. Se trata de la distancia entre la línea base y la línea media (la mitad de la distancia desde la línea base hasta la altura máxima).

Tracking.

También conocido como espacio entre letras o caracteres (letter-spacing en CSS). Es el aumento o disminución constante y uniforme del espacio entre las letras.

Kerning.

Proceso de ajustar el espacio entre caracteres individuales aplicado a glifos (en una misma fuente, un mismo carácter puede tener asignado más de un glifo, siendo cada uno de ellos una variante de dicho carácter, esa es la diferencia entre carácter, entendido como cualquier símbolo de la comunicación escrita, y glifo.) de anchos variables.

Leading.

Interlineado. También conocido como altura de línea (line-height en CSS). Es la distancia entre la línea base de líneas o tipos escritos de forma sucesiva (un párrafo, por ejemplo).

2. Puntos a considerar en la tipografía web.

Puntos a considerar en la tipografía web

Las palabras, frases y párrafos tienen significado, pero cada carácter o letra por separado puede tener y transmitir emociones. Además de "ser responsive", un diseñador web también debe ofercer la mejor tipografía web posible a los usuarios. Un diseño efectivo no tiene sentido si tu público no entiende el contenido o no se siente atraído por él.

Hay 4 factores que te ayudarán a crear una tipografía web efectiva.

1. Elige la tipografía que mejor se adapte al tema de la web.

Hoy en día, la mayoría de los sitios están utilizando los mismos tipos de letra. Sin embargo, tiene mucho más sentido adaptar los tipos de letra al mensaje que queremos transmitir.

Por ejemplo, si estás haciendo una web para la presentación de un libro infantil, ¿sería conveniente usar una tipo como la DK Crayon Crumble o la Little Miss Priss en el texto del encabezado? No estoy sugiriendo que la emplees en toda la web, pero lo importante es asegurarse de que la tipografía vaya dirigida al público objetivo y que el texto sea claro y legible.

2. Usa "fuentes web".

Una de las mayores mejoras del diseño web hoy en día es la compatibilidad con las fuentes web en todos los navegadores modernos mediante el comando @import y la etiqueta de enlace estándar. Echa un vistazo al siguiente ejemplo:

Usando @import tag::

1
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Usando la etiqueta de enlace estándar:

1
2
<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css'>

Esto significa que puedes usar cualquier fuente disponible en sitios como Google Fonts y Typekit. Las ventajas cuando usamos fuentes web son las siguientes:

3. Usa combinaciones de colores adecuadas.

Uno de los principales errores que comenten actualmente los diseñadores web es emplear combinaciones de colores innecesarias. Recuerda que un buen diseño web se identifica por lo bien que funciona el sitio y por lo bueno que es el diseño.

No tienes que diseñar tus páginas web sin ningún criterio ni utilizando una gran cantidad de colores que ni combinan especialmente con el texto ni con el fondo de tu sitio. Esto sólo hará que el texto sea ilegible y causará dolor de ojos a tus visitantes.

Pero, ¿cómo utilizar combinaciones de colores adecuadas? Si bien no existe una regla general, sí que hay algunas pautas.

4. Usa texto en lugar de imágenes.

Como todos sabemos, las imágenes hacen que las páginas web sean más lentas. Habitualmente, las imágenes son la única forma de forzar al navegador web a mostrar una fuente personalizada y con el diseño exacto que deseas. Sin embargo, esto podría no funcionar. Usar texto real es la mejor manera de trabajar, especialmente con un diseño responsive. Recuerda: los motores de búsqueda no pueden leer imágenes, pero pueden leer texto.

3. Reglas básicas de tipografía responsive.

Reglas básicas de tipografía responsive

La mayoría de los elementos tipográficos fundamentales pueden ser manejados con CSS. Pero esto va más allá de, simplemente, adaptar u optimizar el tamaño del texto en cada dispositivo.

Ahora que ya hemos avanzado un poco en cómo puedes lograr una tipografía web presentable, es el momento de hablar sobre las reglas básicas que podemos aplicar para lograr una tipografía más responsive.

1. Usa unidades rem en vez de pixels o ems.

El uso de píxeles y ems es algo habitual. Mientras que los píxeles son fijos, los ems son unidades relativas al elemento padre. Esto significa que cuando cambia el tamaño del navegador, es difícil calcular el tamaño que necesitas para lograr el resultado deseado.

Es mejor opción usar rems. Los rems, también conocidos como "root em", son siempre iguales al tamaño de fuente del elemento HTML raíz y, lo que es todavía mejor, los navegadores modernos lo admiten.

1
2
3
4
5
6
7
8
9
html{
  font-size: 16px;   // 1rem = 16px
}
h1{
  font-size: 1.9rem // 19px
}
h2{
   font-size: 1.8rem // 18px
}

En este ejemplo, estamos definiendo un tamaño de fuente base de 16px que es la referencia del tamaño de fuente del otro elemento. El tamaño del h1 y del h2 cambiará a medida que cambie el tamaño de la pantalla.

Para versiones antiguas de Internet Explorer, podemos especificar primero el tamaño de fuente en píxeles y definir después las unidades rem para tener un texto resposive en todos los navegadores.

2. Experimenta con unidades rem en las diferentes vistas que ofrece cada dispositivo.

Ahora que sabes cómo usar las unidades rem, necesitas experimentar en diferentes tamaños de pantalla a través de consultas @media (media queries). El resultado dependerá del tipo de letra. También deberás usar tamaños de fuente reales y ver si obtienes el resultado deseado.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media (max-width: 640px) {
h1 {
    font-size:1.7rem
}
h2{
    font-size: 1.6rem
}
}
 
@media (min-width: 480) {
h1 {
    font-size:1.9rem
}
h2{
    font-size: 1.8rem
}
}

Ten en cuenta que, en pantallas más pequeñas, el tamaño de fuente será un poco más grande en comparación con las pantallas más anchas. Esto hará que el texto sea más legible cuando los usuarios lean textos en el móvil o en la tablet.

3. Utiliza pseudo clases CSS3 para especificar estilos concretos.

Una de las grandes características de CSS3 es que puedes localizar una letra, línea o párrafo específico y darle un estilo diferente. Esto ofrece a los diseñadores la libertad de cambiar o ajustar un texto a diferentes tamaños.

Así, podemos usar pseudo clases como las siguientes:

4. Controla la longitud del texto.

Como sugirió Robert Bringhurst, la longitud de línea ideal consta de 45 a 75 caracteres por línea. Para un diseño web responsive, la medida no es tan fácil de controlar, especialmente en los dispositivos más pequeños. Si no puedes controlar esta medida, no podrás controlar la legibilidad del texto.

Hay un buen artículo de Elliot Jay Stocks que habla sobre cómo usar las media queries para lograr una altura y medida de línea deseables.

4. El uso de Plugins.

El uso de Plugins

Si bien hay muchos plugins de jQuery que podemos usar para la tipografía web responsive, el más popular es FlowType.js. Este plugin cuenta los caracteres por línea y establece tamaños de fuente con una longitud de línea definida para cualquier dispositivo.

Veamos más en detalle cómo funciona.

Paso 1: Establece los valores de la tipografía.

Empieza a escribir el código con la configuración básica de CSS para FlowType.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
   font-size: 16px;
   line-height: 20px;
}
 
h1,h2,h3,h4,p {
   font-family: inherit;
   font-size: inherit;
}
 
h1 {
   font-size: 3em;
   line-height: 1em;
}
 
h2 {
   font-size: 2em;
   line-height: 1em;
}
 
p{
   font-size: 1em;
   line-height: 1em;
}

FlowType.js utilizará estos valores y cambiará cada uno de ellos a medida que se redimensione la web. Configurar el tamaño de fuente y la altura de la línea te permitirá acceder y configurar tu web cuando JavaScript esté deshabilitado.

Paso 2: Añade el link a FlowType.js en el head.

Descarga FlowType.js e introduce el código necesario en el head de tu documento html.

1
<script src="flowtype.jQuery.js"></script>
Paso 3: "Llama" a FlowType.js.

Únicamente es necesario añadir el siguiente código justo antes del cierre del body:

1
2
3
4
5
<script>
$(function () {
    $('body').flowtype();
});
</script>
Paso 4: Personaliza los valores de FlowType.js.

FlowType.js viene con unos valores predeterminados. Sin embargo, pueden ajustarse a la configuración que desees. Para hacer esto, sólo necesitas incluir algunas opciones en tu código jQuery.

1
2
3
4
5
6
7
8
$('body').flowtype({
   minimum   : 500,
   maximum   : 1920,
   minFont   : 16,
   maxFont   : 40,
   fontRatio : 34,
   lineRatio : 1.50
});

Además de flowtype.js, hay otros plugins de jQuery que pueden ayudarte a crear una tipografía web responsive. Estos son algunos de ellos:

5. ¿Qué nos espera?

El diseño responsive es cada vez más y más complejo. Podemos pensar que las imágenes, el diseño y las cuadrículas son lo que importa. Sin embargo, no debemos olvidar que el contenido o el texto es lo que leen las personas y los motores de búsqueda.

Al igual que debemos esforzarnos en el diseño y en las imágenes, también debemos poner algo de empeño en controlar cómo se mostrará el texto. En definitiva, lo más importante es que tus textos sean legibles, entendibles y fáciles de ver en todos los dispositivos.

Este artículo es una traducción del post "Effective Web Typography: Rules, Techniques and Responsive Design" escrito por Sam Norton para designmodo. Podéis ver el artículo original aquí.

SocialOnce Marketing&Internet

Contacto (Zaragoza)

Coso, 102, Oficina 11 · 50001 Zaragoza

+34 622 100 758 · +34 876 032 807

contacto@social11.es

Aviso Legal | Privacidad | Cookies

SocialOnce Internacional

Delegación en Perú

Malecón Balta, 720 · Nº 11-E
Distrito de Miraflores · 15074 Lima (Perú)

+51 992 759 920

bgarro@social11.es

Expertos en posicionamiento

En toda España

Agencia de Diseño y programación

Todo para tu negocio digital