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.
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.
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).
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:
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.
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.
Con el término web safe fonts se hace referencia a la tipografía que se puede usar en Internet sin problemas. La clave es plantearse el número de navegadores en los que se puede visualizar la webfont seleccionada. ¿Por qué no paran de crecer las web safe fonts? ¿A qué se debe la importancia de la tipografía web en el éxito de una página web corporativa?
A menudo, se subestima a la tipografía web como parte fundamental del diseño responsivo de páginas web, a pesar de que la creación de fuentes adaptables no es ninguna ciencia inaccesible. ¿Cómo se aplican en la práctica? Y ¿qué fuentes web son las mejores para un diseño web responsivo? Te mostramos los aspectos técnicos fundamentales para la implementación de tipografía con CSS en una web...
La gran oferta de fuentes y familias tipográficas en Internet es cada vez mayor, incluyendo aquellas de código abierto que pueden ser descargadas de forma gratuita. La mayoría de estas fuentes web son adaptables, lo que las hace perfectas para su implementación en páginas web responsivas, es decir, aquellas que adaptan su visualización a diferentes dispositivos. Conoce algunas de las plataformas...
El desarrollo de nuevos productos digitales puede implicar una fuerte inversión económica. ¿Cómo se puede valorar con antelación si va a merecer la pena? Involucrar a los usuarios en el proceso de desarrollo del producto, el llamado user centerd design, es un nuevo enfoque que beneficia a la empresa y al cliente a partes iguales.
Las páginas web modernas se visualizan en una gran variedad de dispositivos, desde teléfonos inteligentes con pantallas pequeñas hasta monitores 4K de alta resolución. Un diseño responsivo es la clave para atender a esta gran variedad de medios. El diseño, la tipografía, las imágenes y la navegación están pensados para que funcionen sin problemas en cualquier dispositivo.
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
Ver packsTodo lo que necesitas para tu proyecto online más un asesor personal 24/7 que responda a tus preguntas.
IONOS Tú solución digital
