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 los tipos de letra en el sitio web, en realidad bastante sencillo y a la vez bastante complicado. Por eso me gustaría mostrarte hoy qué fundamentos tipográficos debes tener en cuenta 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, 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 web, la cuestión de la tipografía está sujeta a condiciones especiales, que me gustaría iluminar aquí y que deberían ayudarte a comprender mejor la cuestión de las fuentes en los sitios web.

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

- Kurt Weidemann

A menudo, los sitios web no están hechos por diseñadores gráficos o diseñadores de medios de comunicación formados, sino que los diseñan y ponen en práctica personas de carrera. Esto puede explicar por qué en muchos sitios web se ignoran incluso las normas gráficas más sencillas. Esto resulta 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, ¿qué sentido tiene tener textos en el sitio 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 lo entiendo, porque en los gráficos tenemos reglas tipográficas sencillas, probadas y muy sensatas para crear textos legibles. La tipografía, al fin y al cabo.

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 página 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 tener un aspecto agradable -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 sigo teniendo 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

En el diseño web, sin embargo, tenemos otros requisitos para la tipografía que la legibilidad, concretamente los técnicos. Una buena legibilidad en Internet significa que el sitio web se carga rápidamente. Por lo tanto, 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 Negrita/Fuerte y em/i, así como las marcas de párrafo y otros elementos HTML útiles.

Soy amigo de las fuentes estándar. Permíteme decir esto primero. Es decir, no es realmente necesario integrar tus propias fuentes especiales en un sitio web. Un ejemplo de por qué deberías integrar tu propia fuente es la fuente CI. Es decir, un tipo de letra que se ha desarrollado especialmente para la empresa y que tiene una función importante en la identidad corporativa. O eres un diseñador, artista o fotógrafo realmente bueno y le das importancia a una apariencia extravagante o con un diseño muy individual. Pero entonces no se trata necesariamente de grandes bloques de texto o de información escrita.

Una fuente de IC propia la utilizan sobre todo 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 eres diseñador y quieres demostrar lo que sabes hacer, es aconsejable utilizar los servicios existentes para la tipografía -fuentes web probadas- para integrar la fuente deseada de forma segura y eficaz en tu propio sitio web.

A veces también parece que hay que convertir el tipo de letra deseado en formatos adecuados para la web e integrarlos individualmente. Que esto funcione siempre correctamente 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 es quizá también una cuestión de gustos.

"*"indica que los campos son obligatorios

Me gustaría suscribirme a newsletter para estar informado sobre nuevos artículos del blog, ebooks, funciones y noticias sobre WordPress. Puedo retirar mi consentimiento en cualquier momento. Ten en cuenta nuestra Política de privacidad.
Este campo es de validación y no debe modificarse.

Estas 10 reglas tipográficas te ayudarán

fundamentos de la tipografía fuentes web

Reglas superiores y muy sencillas: Menos es más. Ten en cuenta los hábitos de lectura de la gente. Oriéntate hacia los sitios web que presentan amplios textos editoriales y aprende.

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, al contraste, a la claridad y estructura de los textos y a 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. Ten en cuenta que el usuario siempre tiene la posibilidad de cambiar el tamaño de la letra en su navegador o smartphone. Intenta 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ó qué ancho de texto le sigue gustando a la gente: La anchura máxima es de unos 70 caracteres, es decir, la anchura de texto estándar de un documento de Word. 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 la llamada sangría, es decir, la distancia entre las distintas líneas de un texto, y también la altura de un párrafo. Dependiendo del tipo de letra, un buen 140-150 % de "altura de línea" ha demostrado su eficacia en la web.

4. anchura de la carrera

Se trata del espacio entre las letras, que se manipula mediante el "espaciado de letras". Aquí debes tener mucho cuidado 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 ajustes.

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, un texto negro sobre un 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 debes tener cuidado con el uso de más de 2 fuentes por documento.

8. capitales

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

9. fuentes estándar

En caso de duda y como recurso, debes elegir fuentes de sistema probadas. 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 en el caso de BMW: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif; aquí Arial, Helvetica y Sans Serif (es decir, la primera fuente disponible en Sans Serif) son los fallbacks que se muestran si la fuente anterior ("bmwTypeWebBoldAll") no está disponible.

10. formación continua

Mi consejo: Infórmate 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í proporciona 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 tienen sutiles opciones de configuración para las fuentes de un sitio web de WordPress. ¿Pero realmente siempre tienen sentido? ¿Para qué las utilizo y cuándo? ¿Qué quiero conseguir? ¿Lectura? ¿Bonito diseño? No todos los codificadores -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 de altura, espaciado y 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 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 tienes 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 Arial bastante normal. 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 obvia: no tienes que preocuparte por las licencias (ver 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 tu propio sitio web (es decir, soporte o foros). Las tarifas suelen ser ampliables y tienes una cierta selección de fuentes interesantes.

El malentendido con Google Fonts

Cuando el llamado RGPD se hizo obligatorio para todos en Mai 2018, la comunidad de la red entró en pánico por el uso de Google Fonts. La gente temía que el uso de las fuentes web de Google -Google como el "pulpo de los datos" contra el que iba dirigida esta legislación- no cumpliera las leyes de protección de datos y que, por tanto, se arriesgaran a 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 se ha celebrado un acuerdo de tramitación de pedidos con Google debido al uso de Google Analytics y se hace referencia al uso de las fuentes -y en caso de duda a las cookies- en la política de privacidad, el problema queda descartado.

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 fallos (ver arriba). Además, cargas las fuentes desde otra URL, lo que puede ocurrir al mismo tiempo que cargas los archivos desde tu propio servidor. Pero una vez más dependes 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. También lo hace el código necesario para integrar tus propias fuentes en el sitio web de WordPress. 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, sino a través de Internet.

O dicho de otro modo: si el sitio web tu de 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. En otras palabras, las fuentes del sistema, como hace Amazon con Arial. Eso tiene sentido.

Por supuesto, no se trata de los kilobytes de las fuentes que hay que 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: ¡Las licencias!

Una cosa que hay que tener en cuenta en cualquier caso son las licencias de las fuentes utilizadas. Si utilizas Google Fonts o fuentes del sistema, que se cargan desde el ordenador del usuario, estás en un sitio web de WordPress seguro. Con todas las demás fuentes que utilices en tu sitio web, tienes que asegurarte de que tienes la licencia correspondiente. Y esto puede resultar rápidamente bastante caro. Ya sea para utilizarla en tu 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, debes 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.

Integra tus propios tipos de letra

fundamentos de la tipografía fuentes web

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

  • Parpadeo de la fuente al cargar el sitio web de WordPress (no es raro, a veces se ve una fuente diferente hasta que el CSS la sobrescribe con la fuente web.
  • Tiempos de carga más largos debido a fuentes muy complejas (bastante raro).
  • Lo más habitual es el desenfoque de los tipos, la distorsión debida a un renderizado defectuoso (en determinados sistemas).

Para poder mostrar la fuente deseada en el mayor número posible de dispositivos de salida, necesitas 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 quieres integrar tus propias fuentes en el sitio web tu de WordPress. Puedes generar estos formatos de forma gratuita con el Generador de Fuentes Web. A continuación, cargas todos los formatos de fuente tus en un directorio del servidor tu y los incluyes en la hoja de estilos 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');
}

Puedes 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.

Luego puedes utilizarlos en tu 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 incrustas 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 has proporcionado esta o aquella fuente para el sistema Android. Se trata de una información rápida y una buena legibilidad. Esto está garantizado en Android y Apple con sus fuentes seguras para la web.

Si consideramos 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 queramos 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ías comprobar si una de las fuentes del sistema es adecuada para el proyecto tu . Puedes encontrar una colección completa de las llamadas instrucciones CSS seguras para la web para las fuentes del sistema, o más exactamente para las fuentes seguras para la web, 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 distintos sistemas que quieras admitir. Si quieres utilizar fuentes distintas a las preinstaladas a partir de CSS3, puedes utilizar la configuración de estas fuentes web.

Conclusión sobre los fundamentos de la tipografía

Debes considerar muy cuidadosamente si una fuente del sistema lo hará igual de bien o incluso mejor que una fuente web o tu propia fuente. Los tipos de letra probados, como Verdana, Arial, Trebuchet, Georgia, Times New Roman y otros, 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 subestimes la cuestión de la tipografía en los sitios web. Ten 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 utilizar tu propia fuente o una fuente externa, o si quieres utilizar fuentes estándar, o más exactamente, fuentes del sistema. Si decides utilizar tu propia fuente, pregúntate si puedes utilizar esta fuente o una variante similar con Google Fonts. O si realmente quieres integrar las fuentes manualmente mediante 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 tus de WordPress en los teléfonos inteligentes.

Para mí, personalmente, no suele haber 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 llevan 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.

tu Preguntas sobre los fundamentos de la tipografía

¿Qué preguntas tienes sobre los fundamentos de la tipografía? No dudes 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á. Los campos obligatorios están marcados con *.