La tipografía responsiva: conceptos básicos
Equipo editorial de IONOS6 mins
El uso adecuado de las fuentes tipográficas tiene hoy un rol decisivo en el diseño web, y lo mismo se puede afirmar en el caso del diseño responsivo, ya que el tipo de letra influye mucho en la percepción de una página. En las tres partes de esta serie tratamos la tipografía responsiva en la web, te explicamos cómo puedes integrarla en tu página y te asistimos en la búsqueda de fuentes web adaptativas. Pero ahora introduciremos algunos conceptos básicos sobre tipografía en el diseño web responsivo.
Algunos datos interesantes sobre la tipografía
Originariamente, la tipografía se refería al arte de imprimir textos con letras móviles, los llamados “tipos”. Desde el punto de vista histórico este término está íntimamente ligado al desarrollo de la escritura y su reproducción técnica mediante la imprenta. Con el paso del tiempo, la definición se ha ido ampliando y, a grosso modo, hoy en día se entiende como tipografía el diseño de fuentes y su aplicación –aunque también el de fuentes digitales usadas en páginas web o en programas informáticos.
En el amplio campo de la tipografía suelen diferenciarse dos grandes áreas, la microtipografía y la macrotipografía. En la primera se incluye la configuración de los tipos de letra en sí y los espacios entre caracteres y palabras. La macrotipografía engloba todos los aspectos del diseño de una página digital o impresa: formato, justificación, tamaño de letra, interlineado, y el tamaño, la amplitud y la colocación de otros elementos gráficos como las imágenes.
La tipografía en los medios digitales y en Internet
El término “font” –que se usa por ejemplo en los archivos HTML– designa un caracter digital, es decir, a una determinada fuente informática. El diseño de fuentes para documentos de texto digitales y para la web se denomina tipografía web. Esta se basa principalmente en la tipografía clásica, pues su legibilidad depende aquí también del tamaño de la fuente, de la longitud de las líneas y del interlineado. Otros aspectos que se tienen que tener en cuenta en el caso de las fuentes para Internet son el formato de los archivos y la técnica con que se visualizan las fuentes.
La manera de usar los diferentes tipos de letra en la web ha cambiado mucho a lo largo del tiempo. Antes, la representación de las fuentes tipográficas en un navegador estaba extremadamente limitada y solo se consideraban universalmente compatibles tipos como Times New Roman o Arial, que estaban instaladas en la mayoría de ordenadores. Entretanto, se ha extendido el uso de distintos tipos de letra en la forma de fuentes web, tipos de letra que el ordenador descarga de Internet junto a la página web mediante CSS. En este caso, como en el de las fuentes instaladas localmente, se trata de fuentes vectoriales perfectamente escalables y representadas en el navegador por medio de una matriz de píxeles. Los formatos más habituales para fuentes vectoriales son TrueType (TTF) y OpenType (OTF).
La tipografía en el diseño web responsivo
El diseño de páginas web responsivas o adaptables plantea a los diseñadores nuevos retos, aún contando con el gran desarrollo que ha experimentado la tipografía web. Este ámbito del diseño web, hoy muy extendido, se ocupa de la creación de páginas cuya visualización se adapte a las características y al tamaño de la pantalla de cualquier dispositivo. Y es que una página se mostrará de forma diferente si la visualizamos en la pantalla de un smartphone, en la de una tablet, en la de un ordenador portátil o en el monitor de un equipo de escritorio. La adaptación de los contenidos de la página al tamaño de la pantalla correspondiente, también hace referencia a la fuente. Una tipografía responsiva ha de ser capaz de integrarse bien en la porción de texto mostrada y ser escalable, de la misma manera que los saltos de línea se han de adaptar también a todos los posibles formatos.
A continuación se detallan otros factores que hay que tener en cuenta en lo referente a la tipografía responsiva:
- El tamaño de la fuente no solo debe adaptarse al tamaño de la pantalla, sino que también ha de tener en cuenta la distancia normal que hay entre esta y el usuario. Seguramente dicha distancia será menor para la pantalla de un smartphone que para grandes monitores de un equipo de mesa.
- El tamaño de la fuente también depende de la resolución de la pantalla.
- El interlineado debería ajustarse siempre a la pantalla –el interlineado justo para una buena legibilidad depende, entre otras cosas, de la longitud de las líneas.
- El diseño de la página ha de dejar, asimismo, suficientes espacios tipográficos o áreas sin escritura en el fondo, ya que esto también repercute en la legibilidad de un texto.
No hay que olvidar, por otro lado, que el color de la fuente debería ser algo más intenso y el contraste algo más alto para una mejor visualización en pantallas pequeñas. Al contrario que las pantallas grandes, los dispositivos móviles no se usan siempre en espacios cerrados, sino precisamente en movimiento y en espacios abiertos, donde no siempre se pueden controlar las condiciones atmosféricas de luz. Por ello, una letra más saturada logrará que sea legible aún en situaciones de extrema claridad o de oscuridad y con reflejos.
Cómo ajustar la tipografía al diseño web responsivo
En diseño web responsivo, para poder mostrar la tipografía en todos los dispositivos de forma óptima se usan fuentes vectoriales, un tipo de gráfico que no pierde calidad al cambiar de tamaño. Esto las diferencia de las fuentes Bitmap, representadas sobre la base de puntos o píxels. Estas fuentes vectoriales y, en general, todas las gráficas vectoriales, no pueden mostrarse en la pantalla de un ordenador sin una previa transformación de formato, dado que estas solo pueden mostrar gráficos de píxeles. En última instancia, acaban siendo visualizadas como gráficos de píxeles. Pero, en el caso del diseño responsivo, el uso de fuentes vectoriales garantiza la legibilidad de una fuente en cualquier dispositivo móvil. Para no depender de las fuentes preinstaladas por defecto en la mayoría de estos y poder diseñar cada fuente de forma individual se pueden integrar las fuentes por CSS. En la última parte de la serie dedicada a la tipografía en el diseño web responsivo ilustramos cómo puedes integrar fuentes web en tu página capaces de responder a todos los formatos posibles de pantalla.
