Conceptos básicos de tipografía en el diseño web: Estas son las cosas que deberías considerar

Mark Max Henckel Actualizado por última vez el 21.10.2020
14 min.
fundamentos de tipografía diseño web
Actualizado por última vez el 21.10.2020

Lo simple es difícil. Ese es mi lema. 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 simple y sin embargo bastante complicado. Por eso quiero mostrarles hoy, qué reglas básicas de tipografía deben seguir para mostrar el texto en tus un sitio web 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 esto, la comunicación, hay una tipografía. Por un lado es la doctrina de las fuentes, por otro lado es un elemento de diseño para presentar textos o contenidos de una manera inteligente, apropiada o "estéticamente atractiva". La distinción entre microtipografía y macrotipografía no es relevante aquí.

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

tipografía básica webfonts

No hay duda de que las fuentes pueden animar y enriquecer visualmente un sitio web. Las fuentes - los tipos de letra - son elementos importantes de cualquier buen diseño. Pero 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 destacar aquí y que deberían ayudar a comprender mejor la cuestión de las fuentes en las páginas web.

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

Los sitios web no suelen estar hechos por diseñadores gráficos o diseñadores de medios de comunicación capacitados, sino que son diseñados e implementados por personas que cambian de carrera. Esto puede explicar por qué en muchos sitios incluso las reglas gráficas más simples son ignoradas. Especialmente cuando se trata de la tipografía, esto se aclara rápidamente. El uso irreprimible de VERSALIEN, mal legible, la falta de contraste entre el color de la letra y el fondo, así como la confusa estructura de los textos dificultan la lectura de los usuarios.

Pero de eso se trata exactamente la tipografía: la legibilidad de los textos. De lo contrario, ¿qué sentido tiene tener textos en el sitio web si no son buenos y agradables de leer? Se dice que hay una diferencia de opinión en cuanto a cuán bien deben verse los textos legibles al final. No puedo entenderlo, porque en los gráficos simple, probado y reglas tipográficas muy útilespara crear textos de fácil lectura. Tipografía.

Uno de ellos es el contraste - la relación de color entre el color de la fuente y el fondo. En un foro, una vez critiqué un diseño web presentado con orgullo, exactamente por esta razón. En los gráficos llamamos al fenómeno que el supuesto diseñador de la web quería vender aquí "águila blanca sobre fondo blanco". En este caso tenía un texto que fluía en gris oscuro sobre un fondo gris claro, por lo que el contraste era muy malo.

Esto puede parecer bonito, una cuestión de gusto, supongo, pero es extremadamente difícil de leer. Informé de esto y descubrí que no es 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 problemas de visión? También un problema a menudo subestimado: la accesibilidad de las palabras clave. En cualquier caso, el diseñador tomó la posición de que este era su diseño y lo haría de esa manera. Hemos escuchado el dicho: "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. Durante mi formación como diseñador de medios de comunicación (impresos) hace muchos años, tuve un diseñador gráfico y tipógrafo experimentado del que aprendí mucho.

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

tipografía básica webfonts

Sin embargo, en el diseño web tenemos otros requisitos para la tipografía además de la legibilidad, a saber, los técnicos. La buena legibilidad en Internet también significa que se carga sitio rápidamente. Así que cuando integramos las fuentes, estamos tratando con el rendimiento del sitio web.

Además, debe garantizarse que los textos sean igualmente legibles en el mayor número posible de dispositivos de salida, lo que representa un desafío adicional. Al final, con las posibilidades del lenguaje de marcas 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 que pensabas.

Y, por supuesto, queremos tener un texto bien estructurado que también aumente la legibilidad, evite el cansancio y tenga un efecto en Google, es decir, en el ranking del motor de búsqueda. Por ejemplo, las etiquetas de encabezado H1, H2, H3, etc., el uso de listas y formas de marcado como negrita/fuerte y em/i, así como las marcas de párrafo y otros elementos HTML útiles.

Soy amigo de las fuentes estándar. A ver si lo entiendo. Quiero decir, no es realmente necesario incluir fuentes especiales personalizadas en un sitio web. Como ejemplo de por qué deberías integrar tu propia fuente, aquí está la fuente CI. Se trata de un tipo de letra desarrollado especialmente para la empresa, que tiene una función importante en la identidad corporativa. O eres un muy buen diseñador, artista o fotógrafo y le das gran importancia a una apariencia extravagante o muy individual orientada al diseño. Pero entonces no se trata necesariamente de grandes bloques de texto o información escrita.

Una fuente de CI personalizada suele ser utilizada por las grandes empresas que operan con su propio departamento de TI y granja de servidores. Entonces no hay problemas de rendimiento y la incrustación de las fuentes de CI se controla técnicamente.

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

A veces también parece necesario convertir el tipo de letra deseado en formatos adecuados para la web e integrarlos individualmente. Si esto entonces siempre y a largo plazo funciona perfectamente es otra cuestión. Por lo tanto, prefiero en tal caso Fuentes de Googleporque es rápido, seguro y fácil de usar. Pero incluso esto es quizás una cuestión de gusto.

Estas 10 reglas de tipografía te ayudarán

tipografía básica webfonts

Reglas muy simples: Menos es más. Considere los hábitos de lectura de la gente. Oriéntese hacia los sitios web que presentan y aprenden extensos textos editoriales.

La legibilidad de los textos está sujeta a ciertas reglas con base científica. No sólo se refieren a la escritura en sí, sino también a su entorno, el contraste, la claridad y la estructura de los textos, así como la nitidez de sus márgenes.

1. tamaño de la fuente

Depende de la fuente y del diseño básico del sitio web. Por favor, tenga en cuenta que el usuario tiene la posibilidad de cambiar el tamaño de la fuente en su navegador o smartphone en cualquier momento. Intenta usar tamaños de fuente relativos, es decir, %, EM/REM o pequeño/normal/medio/grande.

2. ancho de la línea

Esto está claramente subestimado. Se determinó qué ancho de texto sigue siendo leído con gusto por la gente: Es un ancho de hasta un máximo de unos 70 caracteres, que es el ancho de texto estándar A4 de un documento de Word. Sólo echa un vistazo a SPIEGEL ONLINE y compañía para ver qué tan amplios son sus bloques de texto.

3. espaciado de líneas

Para una óptima legibilidad, el llamado "espacio entre las líneas", es decir, la distancia entre las líneas individuales de un texto - incluyendo la altura de un párrafo - es de gran importancia. En la red, dependiendo de la fuente, un buen 140-150% de "altura de línea" ha demostrado ser muy eficaz.

4. Distancia a pie

Esta es la distancia entre las letras, que es manipulada por el espaciado de las letras. Uno debe ser muy cuidadoso aquí y usar esta opción de diseño sólo con precaución - por ejemplo con ciertos titulares. 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 un fondo blanco. Esto es fácil de leer.

6. estructura

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

7. un máximo de dos fuentes

A menudo un documento por página web, libro o documento es suficiente. En casos especiales, pueden funcionar más, pero debe tener cuidado cuando utilice más de 2 fuentes por documento.

8. letras mayúsculas

No use mayúsculas en los encabezados y en el menú. Son muy difíciles de leer. Sin embargo, si se trata de palabras sueltas, por ejemplo en NAVEGACIÓN, se pueden usar mayúsculas. Pero no escribas en mayúsculas, sino usa CSS con "text-transform:mayúscula"Resolver".

9. fuentes estándar

En caso de duda y como alternativa, deberías elegir fuentes de sistema probadas. Arial, Verdana, Georgia son unas fuentes del sistema tan bien legibles, que tienen casi todos los dispositivos de salida y siempre se muestran bien.

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

10. formación adicional

Mi consejo: Edúquese sobre la tipografía a través de talleres, libros y revistas o incluso un video de YouTube sobre el tema. Puedo, por ejemplo este video recomendar. Aunque Sven Wolfermann aconseja en contra de las fuentes del sistema en su presentación en la "MobileTechCon" - a diferencia de mí - él proporciona mucha información valiosa sobre el tema aquí!

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

Unas palabras sobre el diseño de la fuente o la configuración usando CSS: No menos importante desde la introducción de CSS3 proporciona a los desarrolladores una sutil configuración de las fuentes de un sitio ¿Pero realmente siempre tienen sentido? ¿Para qué y cuándo los uso? ¿Qué quiero lograr? ¿Lectura? ¿Bonito diseño? No todos los codificadores - o sus clientes - parecen pensar en eso. A veces hacen todo lo posible. Cambiar no sólo la altura de la línea, que a veces causa problemas con las alturas, las distancias y la posición, sino también el espaciado de letras o poner sombras alrededor del texto ("text-shadow"“). Es malo lo que ves a veces.

Por lo tanto, le aconsejo que sea muy cuidadoso con estos escenarios y que use estas técnicas con precaución. No funcionan en todas partes y en las pantallas pequeñas incluso dificultan la visualización. Entonces tienes que deshacer las instrucciones para el escritorio a través de "Media Queries", lo que de nuevo cuesta tiempo y código. ¿Realmente tiene sentido? La respuesta debe ser muy clara y precisa.

Tipos de letra para la Web: Las fuentes de la Web

tipografía básica webfonts

Por cierto: BMW usa esto en su página web como se ha visto antes: Familia de fuentes: "bmwTypeWebBoldAll","Arial","Helvetica",sans-serif;font-weight: normal; - en el texto continuo bastante normal Arial. Amazon también utiliza Arial en la tiendasitio . Apple, por otro lado, utiliza por supuesto un propia fuente como fuente web. La compañía 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. Lamentablemente, estas "fuentes web" suelen estar sujetas a una tarifa, aunque los precios varían mucho. Como ejemplos, además de Fuentes de Google...se mencionará más adelante: Fuentes de Adobe (kit de tipo), Tipo de web, Fuentes web de Adobe Edge y muchos más - una cuestión de gustos.

La ventaja de estos servicios es obvia: no tienes que preocuparte por las licencias (ver más abajo "Atención: ¡Licencias!"), las fuentes funcionan, y hay ayuda o instrucciones para incrustar las fuentes en tu propio sitio web (es decir, soporte o foros). Los aranceles son a menudo ampliables y tienes una cierta elección de fuentes excitantes.

El malentendido con las fuentes de Google

Cuando en mayo de 2018 se introdujo el llamado obligatorio RGPD para todos, la comunidad de la red temía utilizar Fuentes de Google ...entró en pánico. Tenían miedo de que el uso de la Fuentes Web de GoogleGoogle como "pulpo de datos", contra el que se dirigía esta legislación, no cumplen las leyes de protección de datos y, por lo tanto, se correría el riesgo de que se produjeran advertencias costosas.

Este temor aún generalizado ilumina la gran confusión que lamentablemente sigue existiendo en torno a la RGPD. en beneficio de los abogados y los bufetes de abogados de la web, por supuesto. Si uno es acusado de usar Google Analytics con Google ha completado un procesamiento de pedidos y señala el uso de fuentes - y en caso de duda de las cookies - en la política de privacidad, el problema está fuera de la mesa.

Si todavía estás asustado, puedes tomar todo Integrar las fuentes de Google localmentees decir, descarga las fuentes web de Google y guárdalas en tu propio espacio web.

Además, la actuación fue denunciada repetidamente, lo que supuestamente fue tan malo cuando las fuentes se utilizaron a través de Google cargando. No se menciona que Google tiene una arquitectura de servidores rápida y extremadamente estable y que todavía hay fallos (ver arriba). Además, se cargan las fuentes desde una URL diferente, lo que puede hacerse al mismo tiempo que se cargan los archivos desde su propio servidor. Pero una vez más dependes de Google.

Atención: ¡Tiempo de carga!

Es muy simple. Las fuentes web integradas externamente pueden aumentar el tiempo de carga sitio del. El código necesario para integrar tus propias fuentes en elsitio , también. Sólo las fuentes estándar, las fuentes del sistema de las computadoras y los teléfonos inteligentes 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 para decirlo de otra manera: Si tu sitio se requieren tiempos de carga rápidos, tal vez no esté el hosting adecuado y la empresa no tenga una fuente de CI que deba integrarse absolutamente, yo siempre optaría por el estándar. Así que en las fuentes del sistema, como Amazon ha hecho con Arial lo hace. Tiene sentido.

Por supuesto que no se trata de los kilobytes de las fuentes a cargar. Se trata del hecho de que estas fuentes están en la parte superior, por lo que tienen que ser descargadas adicionalmente y que el servidor que se supone que las entrega puede ser débil por el momento. Esto no se ve bien y es... evitable.

Atención: ¡Licencias!

Lo que debe considerarse en cualquier caso son las licencias de las fuentes utilizadas. Si tú... Fuentes de Google o fuentes del sistema, que se cargan desde el ordenador del usuario, uno está en la caja fuerte sitio. Para el resto de las fuentes utilizadas en el sitio web, tienes que asegurarte de que tienes la licencia - y esto puede ser rápidamente bastante caro - para usarlas en tu propio sitio web, o si se trata de un fuente gratuita lo que a veces causa otras preocupaciones, por ejemplo cuando pensamos en las diéresis alemanas y el Eszett (ß).

Para evitar todos estos problemas, utilicé fuentes del sistema o Fuentes de Google. Si el cliente quiere absolutamente su propia fuente, el esfuerzo para ello debe ser generosamente incluido en el cálculo, porque la integración de fuentes externas en el sitio web a veces puede causar algunos problemas. Por ejemplo, con las instrucciones del CSS y aquí, por ejemplo, que siempre me parece realmente pésimo, cuando se busca el nombre correcto de la fuente para poder controlar la fuente para mostrar las etiquetas HTML correctamente.

Integrar sus propias fuentes

tipografía básica webfonts

Con las fuentes web y/o tus propias fuentes, que has hecho tu sitio utilizables a través de una herramienta, puedes obtener rápidamente una serie de problemas para tu sitio ti mismo. A menudo se producen los siguientes fenómenos:

  • Fuente parpadeante cuando se carga el sitio (no es inusual, a veces se ve una fuente diferente hasta que el CSS la sobrescribe con la fuente web.
  • Tiempos de carga más largos a través de fuentes muy complejas (bastante raras).
  • Más comunes son la borrosidad de la escrituraDistorsión debida a una representación defectuosa (en ciertos sistemas).

Para mostrar la fuente deseada en tantos dispositivos de salida como sea posible, se necesitan diferentes variantes de la misma fuente. "TTF" es claro y conocido, pero también necesitas "EOT" y las dos variantes "WOFF". Esto es esencial si quieres tu sitio incluir tus propias fuentes. Estos formatos pueden ser vistos gratis con el generador de fuentes web generada. Luego cargas todos los formatos de fuentes tus en un directorio tu del Servidor y los incluyes en tu la Hoja de Estilo (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'),
      formato url('/deinfont.ttf')('ttf'),
      formato url('/deinfont.eot')('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');
}

Puedes ver por esto Código de la cara de la fuenteLa forma en que la tu escritura integra cuán compleja es la materia y, por lo tanto, cuán propensa al error.

Entonces puedes usarlos en tu código CSS y asignarlos a clases e identificaciones. De esta manera puede que tengas algunos errores que no quiero tratar aquí. Como dije, recomiendo fuentes estándar o de sistema o Fuentes de Googleque simplemente se incluye en el encabezado del sitio web a través del archivo vinculado:

Tipografía y presentación móvil

tipografía básica webfonts

Este aspecto es generalmente descuidado. Desde mi punto de vista no es absolutamente necesario cargar una fuente especial en una pantalla pequeña o un smartphone. ¿Qué hay de los respaldos, las fuentes del sistema de los teléfonos móviles? Si tengo que crear sitio u optimizar un móvil, lo primero que me ahorro por el tiempo de carga es, por supuesto, la descarga de una fuente web o mi propia fuente.

Aunque es una decisión estratégica, que por supuesto debe ser discutida con el cliente, no veo un solo argumento a favor de una fuente web o una fuente separada para la presentación móvil.

Por supuesto, no todas las fuentes del sistema disponibles 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 una información rápida y de una buena legibilidad. Esto está definitivamente garantizado en Android y Apple con sus fuentes seguras para la web.

Si miramos el asunto desde dos puntos de vista principales, a saber, la velocidad de carga y el diseño, debemos concluir que una fuente separada para la visualización móvil es superflua. Por un lado, la fuente perjudica la velocidad de carga del móvilsitio, lo que es especialmente importante cuando se llama a la parada de autobús. Por otro lado, hemos (esperamos) reducido 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 sofisticada fuente web?

Lo esencial es siempre la legibilidad o lo que queremos lograr: impartir conocimientos, entretenimiento literario, comprar un producto, hacer contacto, pedir un boletín o ver la dirección. Y para eso, creo que no hay necesidad de una fuente especial o una fuente web.

Fuentes seguras para la web

En cualquier caso, deberías comprobar si una de las fuentes del sistema es adecuada para tu tu proyecto. Una colección completa de instrucciones CSS para fuentes del sistema o fuentes seguras para la web se puede encontrar en www.cssfontstack.com.

¿Qué son las fuentes seguras para la web? Las fuentes seguras para la web son fuentes preinstaladas en muchos sistemas operativos. Aunque no se instalan las mismas fuentes en todos los sistemas, puede utilizar un bloque de configuración CSS seguro para seleccionar varias fuentes que se vean similares y que estén instaladas en los diferentes sistemas que desee apoyar. A partir de CSS3, si quieres usar otras fuentes que no sean las preinstaladas, puedes usar el Configuración de estas fuentes web uso.

Conclusión

Debes considerar muy cuidadosamente si una fuente del sistema hace lo mismo o incluso mejor que una fuente web o tu propia fuente. Estableció fuentes como Verdana, Arial, Trebuchet, Georgia, Times New Roman entre otras cosas, puedes usarlas sin dudarlo, porque siempre son fáciles de leer. Y ni siquiera hemos hablado de la calidad de los textos, que por supuesto juega un papel decisivo. Pero eso es otra cosa. No subestime el tema de la tipografía en los sitios web. Considere los aspectos técnicos, como el tiempo de carga o las diéresis de las fuentes, pero también la utilidad tu de los diseños tipográficos, es decir, la legibilidad, el contraste y la altura de las líneas.

Piensa cuidadosamente si quieres usar una fuente propia o externa o si quieres usar fuentes estándar o del sistema. Si decides usar tu propia fuente, pregúntate si quieres usar esta fuente o una variante similar con Fuentes de Google puede ser usado. O si realmente quieres incrustar las fuentes a mano a través de CSS y subirlas al servidor en todos los formatos de antemano. Las fuentes estándar que el usuario tiene en su ordenador o 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, para la visualización tus sitio en los teléfonos inteligentes.

Para mí personalmente, no hay mucho que decir sobre el uso de una fuente externa o una fuente web. Si a WordPress -Theme Google ya tiene fuentes a bordo, por supuesto que las uso. Porque si no, tengo que desatornillar o sobrescribir todo el asunto. Esto no es realmente útil.

Si no está claro para el identidad corporativa propiedad de una compañía es un truco de fuente propia. Y la mayoría de los clientes no tienen ni tiempo ni dinero para esto. Muchos caminos conducen a Roma - pero el uso equivocado 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 puedes crear y llenar diseños maravillosos y sitios web estupendos. Usarlas es la forma más segura y esto seguirá siendo así durante bastante tiempo. Tal vez sea una cuestión de gustos, pero tal vez este es el enfoque más sensato para el tema de las fuentes en los sitios web.

Foto: Ksenia Makagonova [Unsplash]
Más fotos: Alexander Andrews [Unsplash], rawpixel [Pexels], Magda Ehlers [Pexels], Kristian Strand [Unsplash], Aaron Burden [Unsplash], RAIDBOXES

Mark Max Henckel - Diseñador de páginas web de Hamburgo. Diseñador de medios de comunicación entrenado (impreso), trabajando como diseñador de web desde 2000. Primero en mobile.de, desde 2003 trabaja por cuenta propia. Desde 2005, blogger de diferentes temas en diferentes blogs propios. Como freelancer de 2007 y 2008 en SPIEGEL ONLINE, participó en el lanzamiento de eintages.de en la interfaz entre la programación y la redacción. Más tarde en el canal de calidad de la comercializadora SPIEGEL (Spiegel QC/Spiegel Media). Trabaja como freelance para libri.de y varias agencias gráficas e informáticas. Desde 2008 se especializó en WordPress .

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con * marcado.