fundamentos de la tipografía diseño web

Conceptos básicos de tipografía para el próximo proyecto de tu

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 los fundamentos de la tipografía que debes tener en cuenta para mostrar el texto en tusde 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; 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í.

¿Por qué los fundamentos de la tipografía en el diseño web?

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 todo buen 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

Las páginas web no suelen estar hechas por diseñadores gráficos o de medios de comunicación formados, sino que son diseñadas y ejecutadas por profesionales de la carrera. Esto puede explicar por qué incluso las normas gráficas más sencillas son ignoradas en muchos sitios web. Esto queda especialmente claro cuando se trata de la tipografía. El uso desenfrenado de VERSALES poco legibles, la falta de contraste entre el color de la letra 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. De lo contrario, ¿de qué sirve tener textos en la web si no son buenos y agradables de leer? Supuestamente, las opiniones difieren en cuanto a cómo deben ser los textos legibles al final. No puedo entenderlo, porque en los gráficos tenemos reglas tipográficas sencillas, probadas y muy sensatas para crear textos legibles. La tipografía, después de todo.

Uno de ellos es el contraste, es decir, la relación de color 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 quiso vender aquí "águila blanca sobre fondo blanco". En este caso, tenía un texto continuo gris oscuro sobre un fondo gris claro, es decir, un contraste insuficiente.

Puede parecer bonito -cuestión de gustos, supongo- pero es difícil de leer. Me informé de ello y descubrí que no era un buen diseño para mí si sólo podía leer el texto con dificultad. Y todavía tengo los ojos sanos. ¿Qué hacen los que tienen problemas de visión? También se trata de 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 diseñador gráfico y tipógrafo experimentado del que pude aprender mucho.

Diseño web y tipografía

fundamentos de la tipografía fuentes web

Sin embargo, en el diseño web tenemos otros requisitos para la tipografía además de la legibilidad, concretamente los técnicos. Una buena legibilidad en Internet significa que el sitio web se carga rápidamente. Así que cuando se trata de integrar fuentes, estamos tratando con el rendimiento de WordPress.

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 que también aumente la legibilidad, evite la fatiga y tenga 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 útiles.

Soy amigo de las fuentes estándar. Permítanme decir esto primero. Es decir, no es realmente necesario integrar sus propias fuentes especiales en un sitio web. Un ejemplo de por qué debería integrar su propia fuente es la fuente CI. Es decir, un tipo de letra que ha sido desarrollado especialmente para la empresa y que tiene una función importante en la identidad corporativa. O eres un diseñador, un artista o un fotógrafo realmente bueno y le das importancia a una apariencia extravagante o con un 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. No hay problemas de rendimiento y la incrustación de las fuentes CI está técnicamente controlada.

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

A veces también parece que hay que transformar el tipo de letra deseado en formatos compatibles con la web e integrarlos individualmente. Que esto funcione siempre bien a largo plazo es otra cuestión. Por eso prefiero Google Fonts en estos casos, porque es rápido, seguro y fácil de usar. Pero esto también es quizá una cuestión de gustos.

Consentimiento*
Este campo es de validación y no debe ser modificado.

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 utilizar 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ó el ancho de texto que a la gente le sigue gustando leer: Se trata de una anchura máxima de unos 70 caracteres, es decir, la anchura de texto estándar de un documento de Word en formato A4. Basta con echar un vistazo a SPIEGEL ONLINE y similares 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 de marcha

Se trata del espacio entre las letras, que se manipula mediante el "espaciado de letras". Debe ser muy cuidadoso en este aspecto 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. Eso es fácil de leer.

6. estructura

Esto significa: ¡textos bien estructurados y semánticamente correctos! 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. Esto tiene un efecto directo en la legibilidad y también en la clasificación de Google.

7. un máximo de dos tipos de letra

A menudo basta con una fuente por sitio 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

No utilice mayúsculas en los títulos ni en el menú. Son difíciles de leer. Sin embargo, si se trata de palabras individuales, por ejemplo en la NAVEGACIÓN, puede utilizar las mayúsculas. Pero no los escriba en mayúsculas, sino que utilice CSS para resolver el problema con "text-transform:uppercase".

9. fuentes estándar

En caso de duda y como recurso, debería elegir fuentes de sistema probadas y comprobadas. Arial, Verdana, Georgia son fuentes de sistema de excelente lectura, que están disponibles en casi todos los dispositivos de salida y siempre se muestran bien.

En CSS, un fallback es la fuente que le sigue, como por ejemplo para BMW: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif; aquí Arial, Helvetica y Sans Serif (es decir, la primera fuente disponible bajo Sans Serif) son los fallbacks que se muestran si la fuente que le precede ("bmwTypeWebBoldAll") no está disponible.

10. formación continua

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 recomendar este vídeo, por ejemplo. Aunque Sven Wolfermann desaconseja las fuentes del sistema en su conferencia 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 de las fuentes, o más concretamente sobre su configuración mediante CSS: No en vano, desde la introducción de CSS3, los desarrolladores disponen de sutiles opciones de configuración para las fuentes de un sitio web de WordPress. 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 el espaciado de las letras o ponen sombras alrededor del texto ("text-shadow"). Es terrible lo que a veces se puede ver.

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 mediante "media queries", lo que a su vez cuesta tiempo y código. ¿Tiene esto realmente sentido? La respuesta debe ser muy clara y precisa.

Fuentes para la web: las fuentes web

fundamentos de la tipografía fuentes web

Por cierto: BMW utiliza esto en su sitio web como se acaba 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 el sitio web de su tienda. Apple, en cambio, utiliza su propia fuente como fuente web. La empresa petrolera TEXACO utiliza Adobe Fonts. Estos son sólo algunos ejemplos.

Afortunadamente, ahora hay muchos proveedores de fuentes web que funcionan bien y suelen ser fáciles de integrar. Por desgracia, estas "fuentes web" suelen ser de pago y los precios varían mucho. Como ejemplos, además de Google Fonts, nos gustaría mencionar: Adobe Fonts (Typekit), Webtype, Adobe Edge Web Fonts y muchas más - cuestión de gustos.

La ventaja de estos servicios es evidente: no hay que preocuparse por las licencias (véase más abajo "Atención: ¡Las licencias!"), las fuentes funcionan y hay ayuda, o más exactamente, instrucciones sobre cómo integrar las fuentes en su propio sitio web (es decir, soporte o foros). Las tarifas suelen ser ampliables y se dispone de una cierta selección de fuentes interesantes.

El malentendido con Google Fonts

Cuando el llamado RGPDse hizo obligatorio para todos en mayo de 2018, la comunidad de la red entró en pánico por el uso de Google Fonts. La gente temía que el uso de Google Web Fonts -Google como el "pulpo de los datos" contra el que iba dirigida esta legislación- no cumpliera con las leyes de protección de datos y que, por tanto, se arriesgara a recibir costosas advertencias.

Este temor, aún muy extendido, pone de manifiesto la gran confusión que, por desgracia, sigue existiendo en torno a la página web RGPD. En beneficio de los abogados y los bufetes de abogados de la web, por supuesto. Si uno ha celebrado un acuerdo de tramitación de pedidos con Google por el uso de Google Analytics y hace referencia al uso de las fuentes -y en caso de duda a las cookies- en la política de privacidad, el problema queda fuera de la mesa.

Si todavía tienes miedo, también puedes integrar todas las Google Fonts localmente, es decir, descargar las Google Web Fonts y guardarlas en tu propio espacio web.

Además, se denunció repetidamente el rendimiento, que supuestamente era tan malo cuando las fuentes se cargaban a través de Google. 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 otra URL, 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!

El asunto es bastante sencillo. Las fuentes web integradas externamente pueden aumentar el tiempo de carga del sitio web de WordPress. El código necesario para integrar sus propias fuentes en el sitio web de WordPress también lo hace. Sólo las fuentes estándar, las 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, sino de Internet.

O dicho de otro modo: si el sitio web tude WordPress necesita tiempos de carga rápidos, tal vez el alojamiento de WordPress correspondiente no esté detrás y la empresa no tenga una fuente de IC que deba integrarse absolutamente, yo siempre optaría por el estándar. Es decir, las fuentes del sistema, como hace Amazon con Arial. Eso tiene sentido.

Por supuesto, no se trata de los kilobytes de las fuentes a cargar. Se trata del hecho de que vienen encima, es decir, que hay que descargarlos adicionalmente, y de que el servidor que debe entregarlos puede estar debilitándose. Esto no tiene buena pinta y es... evitable.

Atención: ¡licencias!

Una cosa que hay que tener en cuenta en cualquier caso son las licencias de las fuentes utilizadas. Si utiliza Google Fonts o fuentes del sistema, que se cargan desde el ordenador del usuario, está en un sitio web de WordPress seguro. Con todos los demás tipos de letra que utilices en tu sitio web, tienes que asegurarte de que tienes la licencia para ellos. Y esto puede resultar rápidamente bastante caro. Ya sea para utilizarla en su propio sitio web o si se trata de una fuente gratuita que a veces causa otras preocupaciones, si pensamos en las diéresis alemanas y la eszett (ß), por ejemplo.

Para evitar todos estos problemas, utilizo fuentes del sistema o Google Fonts. 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, que siempre me parece muy mal, con la búsqueda del nombre de la fuente correcta para poder acceder a la fuente correctamente para la visualización de las etiquetas HTML.

Integre sus propias fuentes

fundamentos de la tipografía fuentes web

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

  • Parpadeo de la fuente al cargar el sitio web de WordPress (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 raro).
  • Más comunes son el desenfoque del tipo, la distorsió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 fuente. "TTF" es claro y conocido, pero también necesitas "EOT" y las dos variantes de "WOFF". Esto es esencial si quiere integrar sus propias fuentes en el sitio web tuWordPress. Puede generar estos formatos de forma gratuita con el generador de fuentes web. Luego se cargan todos los formatos de fuente tusen un directorio del servidor tuy se incluyen en la hoja de estilo tu(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 este código @font-face, que integra la fuente tu, lo complejo que es el asunto y, por tanto, lo propenso a errores.

A continuación, puede utilizarlos en su código CSS y asignarlos a clases e identificadores. De este modo, pueden producirse algunos errores que no quiero tratar aquí. Como antes: Recomiendo fuentes estándar o de sistema o Google Fonts, que simplemente se incrustan a través del archivo vinculado en la cabecera del sitio web:

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

Tipografía y presentació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 creo un sitio web de WordPress para móviles o tengo que optimizarlo para móviles, lo primero que hago por el tiempo de carga es, por supuesto, ahorrarme la descarga de 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 pantalla del móvil.

Por supuesto, no todas las fuentes del sistema que están disponibles para el escritorio están disponibles en el smartphone. Pero desde mi punto de vista, no es importante aquí si ha proporcionado esta o aquella fuente para el sistema Android. Se trata de información rápida y buena legibilidad. Esto está 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 concluir que una fuente separada para la visualización móvil es superflua. Por un lado, el tipo de letra afecta a la velocidad de carga del sitio web de WordPress para móviles, 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 por estas razones. ¿Por qué cargar una fuente web sofisticada?

Lo esencial es siempre la legibilidad o lo que queremos conseguir: La transmisión de conocimientos, el entretenimiento literario, la compra de un producto, un contacto, el pedido a Newsletter o la visualización de la dirección. Y para eso, creo, no necesitamos una fuente especial o una fuente web.

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 seguras para la web para las fuentes del sistema, o más precisamente las fuentes seguras para la web, se puede encontrar en CSS Font Stack.

¿Qué son las fuentes seguras para la web? Las fuentes seguras para la web son fuentes preinstaladas en muchos sistemas operativos. Aunque no todos los sistemas tienen instalados los mismos tipos de letra, puedes 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 quieras soportar. Si quieres utilizar fuentes distintas de las preinstaladas a partir de CSS3, puedes utilizar la configuración de estas fuentes web.

Conclusión sobre los fundamentos de la tipografía

Debe considerar muy cuidadosamente si una fuente del sistema lo hará igual de bien o incluso mejor que una fuente web o su propia fuente. Fuentes probadas como Verdana, Arial, Trebuchet, Georgia, Times New Roman y otras pueden utilizarse sin dudarlo, ya que siempre son legibles. Y aún no 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 tudel 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 fuente externa, o si quieres usar fuentes estándar, o más precisamente, fuentes del sistema. Si decide utilizar su propia fuente, pregúntese si puede utilizar esta fuente o una variante similar con Google Fonts. O si realmente quiere integrar las fuentes manualmente 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 requieren ningún tiempo de carga. Esto se aplica aún más a la carga móvil, cuando se muestra el sitio web tusWordPress 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 un tema de WordPress ya tiene Google Fonts a bordo, por supuesto que lo uso. Porque si no, tengo que fastidiarlo todo o sobrescribirlo. Eso no tiene mucho sentido.

Si no forma parte claramente de la identidad corporativa de una empresa, tener un tipo de letra propio es un truco. Y la mayoría de los clientes no tienen ni tiempo ni dinero para eso. Muchos caminos conducen a Roma - pero probablemente no el uso incorrecto de la tipografía en un sitio web y en el diseño web. Con las fuentes del sistema, con las fuentes estándar, se pueden crear y llenar maravillosos diseños y grandes sitios web. Utilizarlos es la forma más segura y lo seguirá siendo durante bastante tiempo. Quizá sea una cuestión de gustos, pero tal vez sea el enfoque más sensato para el tema de las fuentes en los sitios web.

tuPreguntas sobre los fundamentos de la tipografía

¿Qué preguntas tiene sobre los fundamentos de la tipografía? No dude en utilizar la función de comentarios. ¿Quieres estar informado de los nuevos artículos sobre WordPress, diseño web y mucho más? Entonces síguenos en Twitter, Facebook, LinkedIn o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.