Conceptos básicos de tipografía en el diseño web: Estos son los aspectos que debes tener en cuenta

Mark Max Henckel Última actualización 21.10.2020
14 min.
fundamentos de la tipografía diseño web
Última actualización 21.10.2020

Lo simple es difícil. Ese es mi principio rector. Y lo mismo ocurre con el uso de la tipografía en el diseño web, de las fuentes en el sitio web, en realidad bastante sencillo y a la vez bastante complicado. Por eso hoy me gustaría mostrarte qué principios tipográficos debes seguir para mostrar el texto en tus de la mejor manera posible.

No es ningún secreto que a muchas personas les resulta difícil expresarse de forma clara y comprensible. ¿Por qué debería ser más fácil a través de los medios de comunicación? Para facilitar la comunicación, existe la tipografía. Por un lado, es el estudio de los tipos de letra y, por otro, es un elemento de diseño para presentar textos o contenidos de forma inteligente, adecuada o "estéticamente agradable". El hecho de que se distinga entre microtipografía y macrotipografía no es relevante aquí.

La tipografía en el diseño web: ¿por qué es tan importante?

fundamentos de la tipografía fuentes web

No hay duda de que las fuentes pueden animar y enriquecer visualmente un sitio web. Los tipos de letra son elementos importantes de cualquier diseño. En Internet, es decir, en el diseño de páginas web, la cuestión de la tipografía está sujeta a condiciones especiales, que me gustaría iluminar aquí y que deberían ayudarle a entender mejor la cuestión de las fuentes en las páginas web.

"La buena tipografía no busca todo lo que aún es posible, sino que pide lo necesario".
- – Kurt Weidemann

A menudo, las páginas web no están hechas por diseñadores gráficos o diseñadores de medios de comunicación formados, sino que son diseñadas y puestas en marcha por personas con una carrera profesional. Esto puede explicar por qué en muchas páginas no se respetan ni siquiera las normas gráficas más sencillas. Especialmente cuando se trata de la tipografía, esto se hace evidente rápidamente. El uso desenfrenado de VERSALIEN poco legible, la falta de contraste entre el color de la fuente y el fondo, así como la estructura confusa de los textos dificultan la lectura de los usuarios.

Pero en eso consiste la tipografía: en la legibilidad de los textos. ¿Por qué iba a tener textos en su sitio web si no son buenos y agradables de leer? Supuestamente, las opiniones difieren en cuanto a cómo deben ser los buenos textos legibles al final. No puedo entenderlo, porque tenemos en el gráfico simple, probado y reglas tipográficas muy sensataspara crear textos bien legibles. Tipografía justa.

Uno de ellos es el contraste, es decir, la relación cromática entre el color de la fuente y el fondo. En un foro había criticado una vez un diseño de web presentado con orgullo exactamente por esta razón. En el gráfico, llamamos al fenómeno que el supuesto diseñador de la web intentaba vender aquí "águila blanca sobre fondo blanco". En este caso, tenía un cuerpo de texto gris oscuro sobre un fondo gris claro, por lo que el contraste es muy pobre.

Eso puede parecer bastante bonito -cuestión de gustos probablemente- pero es extremadamente malo de leer. Me informé de esto y descubrí que no era un buen diseño para mí si sólo puedo leer el texto con dificultad. Y todavía tengo los ojos sanos. ¿Qué hacen los que tienen una visión limitada? También es un problema a menudo subestimado: la accesibilidad de las palabras clave. En cualquier caso, el diseñador consideró que era su diseño y que lo haría así. Todos hemos oído eso antes: "Puedes hacerlo así, pero entonces es una mierda".

Para mí, esto es una prueba más de lo poco que se sabe sobre la legibilidad de los textos, es decir, sobre la buena tipografía. En mi formación como diseñador de medios (impresos), hace muchos años, tuve un experimentado diseñador gráfico y tipógrafo del que pude aprender mucho.

Diseño web y tipografía: los requisitos especiales

fundamentos de la tipografía fuentes web

Sin embargo, en el diseño web tenemos otros requisitos para los gráficos tipográficos además de la legibilidad, concretamente los técnicos. Una buena legibilidad en Internet significa también que sitio se carga rápidamente. Por lo tanto, cuando se trata de integrar fuentes, estamos tratando con el rendimiento del sitio web.

Además, hay que garantizar que los textos sean lo más legibles posible en todos los dispositivos de salida, lo que supone otro reto. Al final, con las posibilidades del lenguaje de marcado CSS, tienes tantas formas de intervenir en la tipografía de un sitio web que las cosas se vuelven rápidamente más complejas de lo esperado.

Y, por supuesto, queremos tener un texto bien estructurado, lo que también aumenta la legibilidad, evita la fatiga y tiene un efecto en Google, es decir, en la clasificación en el motor de búsqueda. Por ejemplo, las etiquetas de encabezamiento H1, H2, H3, etc., el uso de listas y marcas como Bold/Strong y em/i, así como las marcas de párrafo y otros elementos HTML significativos.

Soy un fanático de las fuentes estándar. Eso para empezar. Es decir, no es realmente necesario integrar fuentes propias especiales en un sitio web. Como ejemplo, por qué se integra una fuente propia, se menciona aquí la fuente CI. Es decir, un tipo de letra especialmente desarrollado para la empresa, que tiene una función importante en la identidad corporativa. O uno es un diseñador, artista o fotógrafo realmente bueno y le da importancia a una apariencia extravagante o de diseño muy individual. Pero no se trata necesariamente de grandes bloques de texto o información escrita.

Una fuente propia de CI es utilizada sobre todo por las grandes empresas que operan con su propio departamento de TI y una granja de servidores. Entonces no hay problemas de rendimiento y la incrustación de las fuentes CI está técnicamente controlada.

Si eres un diseñador y quieres mostrar lo que sabes hacer, es aconsejable utilizar los servicios existentes para la tipografía - en fuentes web probadas - para integrar la fuente deseada de forma segura y eficaz en su propio sitio web.

A veces también parece que hay que convertir el estilo de letra deseado en formatos adecuados para la web e integrarlos individualmente. Que esto funcione siempre y a largo plazo a la perfección, es otra cuestión. Por lo tanto, prefiero en estos casos Fuentes de Googleporque es rápido, seguro y fácil de usar. Pero esto es quizá también una cuestión de gustos.

Estas 10 reglas tipográficas le ayudarán

fundamentos de la tipografía fuentes web

Reglas superiores y muy sencillas: Menos es más. Tenga en cuenta los hábitos de lectura de la gente. Oriéntese a los sitios web que presentan amplios textos editoriales y aprenda.

La legibilidad de los textos está sujeta a ciertas reglas con base científica. Se refieren no sólo al tipo de letra en sí, sino también a su entorno, el contraste, la claridad y la estructura de los textos, y la nitidez de sus bordes.

1. tamaño de letra

Depende de la fuente y se basa en el diseño básico del sitio web. Tenga en cuenta que el usuario siempre tiene la posibilidad de cambiar el tamaño de la letra en su navegador o smartphone. Intente tomar tamaños de letra relativos, es decir, %, EM/REM o pequeño/normal/mediano/grande.

2. ancho de línea

Esto está claramente subestimado. Se determinó qué anchura de texto sigue gustando a la gente: Es un ancho hasta un máximo de unos 70 caracteres, por lo que un ancho de texto A4 estándar de un documento de Word. De nuevo, basta con mirar a SPIEGEL ONLINE y compañía para ver lo amplios que son sus bloques de texto.

3. espacio entre líneas

Para lograr una legibilidad óptima, es muy importante el llamado bleed-through, es decir, la distancia entre las distintas líneas de un texto -también la altura de un párrafo-. Dependiendo del tipo de letra, un buen 140-150% de "line-height" ha sido probado en la web.

4ª anchura del barril

Se trata del espacio entre las letras, que se manipula con "letter-spacing". Debe tener mucho cuidado en este punto y utilizar esta opción de diseño sólo con precaución, por ejemplo, con determinados títulos. En caso de duda, no lo ajuste.

5. contraste

La relación entre el color y el color de fondo se llama contraste. Esto debería ser muy alto para el texto continuo. El máximo contraste es, por supuesto, el texto negro sobre fondo blanco. Esto es fácil de leer.

6. estructura

Esto significa: bien y textos correctamente estructurados semánticamente! En HTML, esto significa, por ejemplo, las etiquetas de encabezamiento H1/H2/H3, las marcas de párrafo, las marcas de lista, el uso inteligente del resaltado mediante negrita, cursiva y color, y mucho más. Esto tiene un efecto directo en la legibilidad y también en el ranking de Google.

7. un máximo de dos tipos de letra

A menudo basta con una fuente por página web, libro o documento. En casos especiales, pueden funcionar más, pero debe tener cuidado con el uso de más de 2 fuentes por documento.

8. capitales

Absténgase de utilizar las mayúsculas en los títulos y en el menú. Son muy difíciles de leer. Pero si se trata de palabras sueltas, por ejemplo en la NAVEGACIÓN, puede utilizar las mayúsculas. Pero no los escribas en mayúsculas, sino que utiliza CSS con "transformación-texto:mayúsculas".

9. fuentes estándar

En caso de duda y como recurso, debería elegir fuentes de sistema probadas. Arial, Verdana, Georgia son fuentes de sistema muy legibles, que tienen casi todos los dispositivos de salida y siempre se muestran bien.

Una alternativa está en el CSS de la fuente sucesora, como BMW: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif; Aquí, Arial, Helvetica y Sans-Serif (la primera fuente debajo de Sans-Serif) son las fuentes que se muestran si la fuente anterior es ("bmwTypeWebBoldAll") no está disponible.

10. formación

Mi consejo: Infórmese sobre la tipografía a través de talleres, libros y revistas, o incluso viendo un vídeo de YouTube sobre el tema. Puedo, por ejemplo este video recomendada. Aunque Sven Wolfermann desaconseja las fuentes del sistema en su presentación en la "MobileTechCon" -al contrario que yo-, ¡aquí ofrece mucha información valiosa sobre el tema!

Diseño de fuentes con CSS: ¿Tiene sentido?

Unas palabras sobre el diseño o la configuración de las fuentes mediante CSS: No en vano, desde la introducción de CSS3 Los desarrolladores tienen a su disposición sutiles opciones de ajuste para las fuentes de sitio . Pero, ¿realmente tienen siempre sentido? ¿Para qué las utilizo y cuándo? ¿Qué quiero conseguir? ¿Lectura? ¿Bonito diseño? No todos los programadores -o sus clientes- parecen pensar en ello. A veces hacen todo lo posible. No sólo cambian la altura de la línea, lo que a veces causa problemas con las alturas, el espaciado y el posicionamiento, sino que también cambian la espaciado de letras o poner sombras alrededor del texto ("sombra de texto“). Mal, lo que se puede ver a veces.

Por lo tanto, te aconsejo que tengas mucho cuidado con estos ajustes y que utilices estas técnicas con precaución. No funcionan en todas partes e incluso dificultan la visualización en pantallas pequeñas. Luego hay que retomar las instrucciones para el escritorio a través de "Media Queries", lo que de nuevo cuesta tiempo y código. ¿Tiene esto realmente sentido? La respuesta debe ser muy clara y precisa.

Estilos de letra para la web: Las fuentes web

fundamentos de la tipografía fuentes web

Por cierto: BMW lo utiliza en su página web, como acabas de ver: font-family: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif;font-weight: normal; - en el cuerpo del texto bastante normal Arial. Amazon también utiliza Arial en la tiendasitio. Apple, por su parte, utiliza su propia la propia fuente como webfont. La empresa petrolera TEXACO utiliza fuentes de Adobe. Sólo como pequeños ejemplos.

Afortunadamente, ahora hay muchos proveedores de fuentes web que funcionan bien y suelen ser fáciles de integrar. Desgraciadamente, estas "fuentes web" suelen ser de pago, con precios muy variados. Como ejemplos, además de Fuentes de Googleson los siguientes: Fuentes de Adobe (Typekit), Tipo de web, Fuentes web Adobe Edge y muchos más - cuestión de gustos.

La ventaja de estos servicios es obvia: no tiene que preocuparse por las licencias (véase más abajo "Atención: ¡Las licencias!"), las fuentes funcionan y hay ayuda o instrucciones para integrar las fuentes en su propio sitio web (es decir, soporte o foros). Las tarifas suelen ser ampliables y se puede elegir entre una serie de fuentes interesantes.

El malentendido con Google Fonts

Cuando el llamado GDPR se hizo obligatorio para todo el mundo en mayo de 2018, la comunidad de la red se resistió al uso de Fuentes de Google con pánico. La gente temía que el uso de Google Web Fonts - – Google como el "pulpo de los datos" contra el que se dirigía esta legislación- no cumpliría las leyes de protección de datos y, por tanto, se arriesgaría a recibir costosas advertencias.

Este temor, aún muy extendido, pone de manifiesto la gran confusión que, desgraciadamente, sigue existiendo en torno al RGPD. En beneficio de los abogados y los bufetes de abogados de la web, por supuesto. Si le preocupa el uso de Google Analytics con Google para el uso de Google Analytics y referirse al uso de las fuentes -y en caso de duda a las cookies- en la política de privacidad, el problema está fuera de la mesa.

Si todavía tiene miedo, puede utilizar todos los Google Fonts también a nivel localdescargue las Google Web Fonts y guárdelas en su propio espacio web.

Además, se denunció repetidamente el rendimiento, que supuestamente era tan malo cuando se utilizaban las fuentes a través de Google cargas. Queda sin mencionar que Google tiene una arquitectura de servidores rápida y extremadamente estable y que todavía hay fallas (ver arriba). Además, se cargan las fuentes desde una URL diferente, lo que puede ocurrir al mismo tiempo que se cargan los archivos desde el propio servidor. Pero una vez más depende de Google.

Atención: ¡Tiempo de carga!

La cuestión es sencilla. Las fuentes web integradas externamente pueden aumentar el tiempo de carga de sitio . El código necesario para integrar sus propias fuentes en el sitio también. Sólo las fuentes estándar, las fuentes del sistema en los ordenadores y smartphones de los usuarios, no requieren ningún tiempo de carga, porque no se cargan a través de un servidor, no a través de Internet.

O dicho de otro modo: si tu sitio necesita tiempos de carga rápidos, tal vez el correspondiente Hosting no esté detrás y la empresa no tenga una fuente CI que deba integrarse absolutamente, yo siempre optaría por el estándar. Así que en las fuentes del sistema, como hace Amazon con Arial lo hace. Eso ya tiene su sentido.

Por supuesto, no se trata de los kilobytes de las fuentes a cargar. Se trata del hecho de que vienen encima, por lo que tienen que ser descargados adicionalmente y que el servidor que se supone que los entrega puede estar debilitándose. Esto no tiene buena pinta y es... evitable.

Atención: ¡licencias!

Lo que hay que tener en cuenta en cualquier caso son las licencias de las fuentes utilizadas. Si utiliza Fuentes de Google o las fuentes del sistema, que se cargan desde el ordenador del usuario, está en el lado seguro sitio. Para todas las demás fuentes que utilice en su sitio web, tiene que asegurarse de que, o bien tiene la licencia para ellas -y eso puede llegar a ser rápidamente bastante caro- para utilizarlas en su propio sitio web, o bien si se trata de una fuente gratuita que a veces causa otros problemas, como las diéresis alemanas y la Eszett (ß).

Para evitar todos estos problemas, sólo uso las fuentes del sistema o Fuentes de Google. Si el cliente quiere absolutamente su propio tipo de letra, debe incluir el esfuerzo para ello generosamente en el cálculo, porque la integración de fuentes externas en el sitio web puede causar a veces algunos problemas. Por ejemplo, con las instrucciones de CSS y aquí, por ejemplo, lo que siempre encuentro muy mal, cuando se busca el nombre de la fuente correcta, para poder controlar correctamente la fuente para la visualización de las etiquetas HTML.

Integre sus propias fuentes

fundamentos de la tipografía fuentes web

Con las fuentes de la web y/o las fuentes propias que ha hecho utilizables a través de una herramienta para tu sitio , puede encontrarse rápidamente con una serie de problemas para tu sitio . No es raro que se produzcan los siguientes fenómenos:

  • Fuente parpadeante al cargar sitio (no es infrecuente, a veces se ve una fuente diferente hasta que el CSS la sobrescribe con la webfont.
  • Tiempos de carga más largos debido a fuentes muy complejas (bastante raras).
  • Más comunes son Desenfoque de la fuentedistorsión debida a un renderizado defectuoso (en ciertos sistemas).

Para poder mostrar la fuente deseada en el mayor número posible de dispositivos de salida, se necesitan diferentes variantes de la misma. "TTF" es claro y conocido, pero también necesitas "EOT" y las dos variantes de "WOFF". Esto es esencial si quiere incluir sus propias fuentes en tu sitio . Puede crear estos formatos usted mismo gratis con el generador de fuentes web para generarlos. Después se cargan todos los formatos de fuente tus en un directorio del servidor tu y se enlazan en tu Stylesheet (archivo CSS) con la siguiente ruta:

@font-face {
font-family: 'Dein Font';
font-style: normal;
font-weight: normal;
src: local('Dein Font'),
      url('/deinfont.woff2') format('woff2'),
      url('/deinfont.woff') format('woff'),
      url('/deinfont.ttf') format('ttf'),
      url('/deinfont.eot') format('eot');
}

@font-face {
font-family: 'Dein Font';
font-style: italic;
font-weight: normal;
src: local('Dein Font Italic'), vbx
      url('/deinfont-italic.woff2') format('woff2'),
      url('/deinfont-italic.woff') format('woff'),
      url('/deinfont-italic.ttf') format('ttf'),
      url('/deinfont-italic.eot') format('eot');
}

Puede ver en esto Código @font-faceque integra tu fuente, lo complejo que es el asunto - y por lo tanto lo propenso a errores.

A continuación, puede utilizarlos en su código CSS y asignarlos a clases e identificadores. Puede haber algunos errores en el camino, que no voy a cubrir aquí. Como he dicho, recomiendo las fuentes estándar o del sistema o Fuentes de Googleque puede añadir simplemente al archivo vinculado en la cabecera de su sitio web:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i' rel='stylesheet' type='text/css'>

Tipografía y visualización móvil

fundamentos de la tipografía fuentes web

Este aspecto está básicamente descuidado. Desde mi punto de vista, no es en absoluto necesario cargar una fuente especial en una pantalla pequeña o en un smartphone. ¿Qué pasa con las fallas, las fuentes del sistema de los teléfonos móviles? Cuando hago un móvil sitio o tengo que optimizar el móvil, lo primero que ahorro por el tiempo de carga es, por supuesto, descargar una fuente web o una fuente personalizada.

Aunque se trata de una decisión estratégica que, obviamente, debe discutirse con el cliente, no veo ningún argumento a favor de una fuente web o una fuente personalizada en la representación móvil.

Por supuesto, no todas las fuentes del sistema que existen para el escritorio están disponibles en el smartphone. Pero desde mi punto de vista, no importa si tienes esta o aquella fuente para el sistema Android. Se trata de información rápida y buena legibilidad. Esto está definitivamente garantizado en Android y Apple con sus fuentes web-safe.

Si analizamos la cuestión desde dos puntos de vista esenciales, a saber, la velocidad de carga y el diseño, tenemos que llegar a la conclusión de que una fuente separada para la visualización en móviles es superflua. Por un lado, el tipo de letra afecta a la velocidad de carga del móvil sitio, lo que es especialmente importante cuando se recupera en la parada del autobús. Por otro lado, hemos reducido (con suerte) el contenido y el diseño de la versión móvil del sitio web a lo esencial precisamente por estas razones. ¿Por qué cargar una fuente web sofisticada?

Lo esencial es siempre la legibilidad o lo que queremos conseguir: impartir conocimientos, entretenimiento literario, comprar un producto, hacer un contacto, pedir una newsletter o ver una dirección. Y para eso, creo, no se necesita ninguna fuente especial ni webfont.

Fuentes seguras para la web

Debería comprobar si una de las fuentes del sistema es adecuada para el proyecto tu . Una colección completa de las llamadas instrucciones CSS para fuentes del sistema o fuentes seguras para la web puede encontrarse en www.cssfontstack.com.

¿Qué son las fuentes seguras para la web? Las fuentes seguras para la web son fuentes que vienen preinstaladas en muchos sistemas operativos. Aunque no todos los sistemas tienen instalados los mismos tipos de letra, puede utilizar un bloque de configuración CSS para seleccionar varios tipos de letra de aspecto similar y que estén instalados en los diferentes sistemas que desee admitir. Si desea utilizar fuentes distintas de las preinstaladas a partir de CSS3, puede utilizar la función Configuración de estas fuentes web configuración de la fuente.

Conclusión

Debe considerar muy cuidadosamente si una fuente del sistema lo hará igual de bien o incluso mejor que una fuente web o una fuente personalizada. Fuentes probadas como Verdana, Arial, Trebuchet, Georgia, Times New Roman, etc. y otros se pueden utilizar sin dudarlo, ya que siempre son bien legibles. Y ni siquiera hemos hablado de la calidad del contenido de los textos, que por supuesto juega un papel decisivo. Pero ese es otro tema. No subestime la cuestión de la tipografía en los sitios web. Tenga en cuenta los aspectos técnicos, como el tiempo de carga o las diéresis de las fuentes, pero también la facilidad de uso tu del diseño tipográfico, es decir, la legibilidad, el contraste y la altura de las líneas.

Piensa bien si quieres usar tu propia fuente o una externa, o si quieres usar fuentes estándar o fuentes del sistema. Si decide utilizar su propio tipo de letra, pregúntese si quiere utilizar esta fuente o una variante similar con Fuentes de Google se puede utilizar. O si realmente quieres incrustar las fuentes a mano a través de CSS y cargarlas en el servidor en todos los formatos de antemano. Las fuentes estándar que el usuario tiene en el ordenador o el smartphone y que se cargan desde allí están probadas y no necesitan ningún tiempo de carga. Esto es aún más cierto para la carga móvil, cuando se muestra tus sitio en los smartphones.

Para mí, personalmente, no hay mucho que decir sobre el uso de una fuente externa o una fuente web. Si un WordPress -Theme Google Fonts ya tiene a bordo, lo uso por supuesto. Porque si no, tengo que fastidiarlo todo o sobrescribirlo. Eso no tiene mucho sentido.

Si no está claro para el identidad corporativa de una empresa, un tipo de letra personalizado es un truco. Y la mayoría de los clientes no tienen ni tiempo ni dinero para eso. Muchos caminos conducen a Roma, pero el uso incorrecto de la tipografía en un sitio web y en el diseño web probablemente no. Con las fuentes del sistema, con las fuentes estándar, se pueden crear y llenar maravillosos diseños y grandes sitios web. Utilizarlos es el camino más seguro, y seguirá siéndolo durante bastante tiempo. Tal vez sea una cuestión de gustos, pero quizá este sea el enfoque más sensato para el tema de las fuentes en los sitios web.

Imagen aportada: Ksenia Makagonova [Unsplash]
Otras imágenes: Alexander Andrews [Unsplash], rawpixel [Pexels], Magda Ehlers [Pexels], Kristian Strand [Unsplash], Aaron Burden [Unsplash], RAIDBOXES

Mark Max Henckel - Diseñador web de Hamburgo. Diseñador de medios de comunicación de formación (impresión), trabaja como diseñador de páginas web desde el año 2000. Primero en mobile.de, desde 2003 autónomo. De 2005 blogger sobre diferentes temas en diferentes blogs propios. Como freelance desde 2007 y 2008 en SPIEGEL ONLINE, participó en el lanzamiento de einestages.de en la interfaz entre programación y edición. Más tarde, en la empresa de marketing SPIEGEL Quality Channel (Spiegel QC/Spiegel Media). Trabajador autónomo para libri.de y varias agencias gráficas e informáticas. Desde 2008 especializada en WordPress .

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

Tu dirección de correo electrónico no se publicará. Los campos obligatorios están marcados con *.