Tipografía para el diseño Web


En los inicios del diseño de páginas web, las posibilidades en cuanto al tratamiento tipográfico era muy limitadas. Por ejemplo, con respecto al uso de familias, únicamente se utilizaban las fuentes llamadas "seguras", instaladas en su ordenador el usuario.


Clasificación básica de familias de fuentes para el diseño web.



El diseñador de información, al trabajar en el soporte digital, ha de ser capaz de organizar, dividir, ordenar e interpretar la información escrita para presentársela de forma atractiva y cómoda al lector. Es necesario aprovechar al máximo los recursos que ofrece la microtipografía y la macrotipografía con el fin de optimizar la legibilidad, la usabilidad y la accesibilidad de un sitio web informativo.

Como dice Olivier Reichenstein, "elegir tipos de letra no es tipografía", y el diseño de información no trata únicamente de usar fuentes tipográficas; trata más bien de cómo usar buena tipografía.

“El 95% de la información que se presenta en la Web es escrita. Es lógico pensar que un diseñador Web debería tener una buena formación tipográfica, ya que es la principal disciplina que trabaja con la información escrita”.  (Olivier Reichenstein)

Las normas básicas de la tipografía son las mismas para el papel que para la web, sin embargo, en la pantalla, la lectura y la visualización de los diferentes elementos tipográficos es diferente, razón por la cual requiere un tratamiento específico. 

Algunos aspectos influyen directamente en la legibilidad de un texto publicado en un sitio web:

CARÁCTER o forma de las letras
Familia: Serif o Sans-serif
Mayúsculas o minúsculas
Estilo o peso de la letra: redonda, negrita, cursiva
Anchura de la letra o fuente
Resolución del soporte

PÁRRAFO o forma de los bloques de texto
Tamaño de las letras
Ancho de columna
Interlineado
Alineación
Espaciado entre letras y palabras
Contraste de color

Aspectos que influyen en la legibilidad del texto en la web.



 Con las nuevas versiones de CSS (Hojas de Estilo en Cascada) y con HTML5 es posible indicar al navegador que utilice fuentes que incrustamos o incorporamos en los archivos de diseño de la página web, junto con el código HTML, las CSS o el JavaScript. Estas fuentes son archivos TrueType, con la extensión .ttf.

Con esta propiedad, denominada “font-family”, además de indicar las fuentes que suministramos en nuestros archivos, podemos marcar una fuente genérica, por si hubiese algún problema para cargar los documentos por parte del usuario.

Los grupos de fuentes genéricas o clasificaciones (que abarcan muchas familias existentes) son:
  • Serif 
  • Sans-serif 
  • Monospace 
  • Cursive 
  • Fantasy 

 Con la directiva @font-face se indican otras propiedades tipográficas de la página web como el tamaño de la letra, el peso, el estilo o la variación, el espaciado entre letras y palabras, el uso de mayúsculas o minúsculas, la alineación o el sangrado del texto.



Fuentes "seguras"


Hasta hace muy poco tiempo, el diseño tipográfico para las páginas web estaba limitado a las fuentes llamadas "seguras", es decir aquellas que se consideraba tendría instaladas el usuario en su ordenador o dispositivo. 

Al escribir el código HTML mediante editores como Dreamweaver seleccionábamos una serie de fuentes separadas por comas, similares o de un mismo grupo, con el fin de que se visualizaran en el navegador por orden de preferencia.

Se establecen grupos de fuentes por unidad o similitud. Por ejemplo, con serif o remate, sans-serif o lineal, o monospace.
  • Verdana, Geneva, Sans-serif 
  • Arial, Helvetica, Sans-serif 
  • Tahoma, Trebuchet, Sans-serif 
  • Georgia, Times New Roman, Times 
  • Palatino, Linotype, serif
  • Courier new, courier, monospace 

CONSEJOS AL USAR FONTS  EN LA WEB:


  1. Jerarquía tipográfica clara, en tamaños, color, pesos o estilos de la letra 
  2. Limitar al máximo el uso de las familias tipográficas distintas. Elegir muy bien la principal de lectura para párrafos. 
  3. Utilizar adecuadamente el contraste para mejorar la legibilidad 
  4. Elegir el tamaño adecuado para la lectura del texto 
  5. Alinear los bloques de texto a la izquierda. Evitar bloques justificados 
  6. Ampliar el interlineado, para que las líneas de texto se diferencien con comodidad y "respiren". 

INFOGRAFIA DE LA TIPOGRAFÍA


Uso de la tipografía en el diseño web. Infografía de Rodrigo L. Alonso, estudio-gráfico.



LO MÁS VISITADO:

Los elementos de una imagen

Imagen
Esta infografía nos permite entender de forma resumida los elementos de la sintaxis de la imagen que enunció Donis E. Dondis. Una "iniciación" al lenguaje visual resulta ahora más necesaria que nunca para los que crean y emiten mensajes gráficos y los receptores de informaciones visuales. Los elementos básicos para una sintaxis de la imagen. Con ellos elaboramos todos los mensajes gráficos. Conocer la comunicación visual es como aprender una lengua, una lengua hecha solamente de imágenes, pero que tienen el mismo significado para personas de cualquier nación, y por tanto de cualquier lengua.   El libro de Donis. A. Dondis, La sintaxis de la imagen . Introducción al alfabeto visual ha ejercido una influencia ininterrumpida sobre  muchos diseñadores gráficos y docentes de la comunicación visual, entre los que me encuentro , desde aquella primera edición que vio la luz el año 1973 en el Instituto Tecnológico de Massachusetts (MIT). Dondis desde
Leer más

Cabeceras de periódicos: Una clasificación tipográfica básica

Imagen
¿Sabemos diferenciar las distintas familias tipográficas?, ¿podemos, por lo menos, agruparlas por estilos o rasgos similares? Las cabeceras de los periódicos nos sirven como muestra. La utilización de letras góticas ha sido una constante en las cabeceras de los periódicos a lo largo de su historia. Las distintas familias de letras han ido apareciendo en diferentes épocas históricas, especialmente desde la invención de los tipos móviles y la imprenta: letras romanas, letras góticas, letras mecanas, letras lineales o de palo seco… y algunas de ellas han estado vigentes durante centenares de años. Hasta hace dos décadas era cosa exclusiva de los profesionales del libro, de la imprenta, incluso de la prensa y de la publicidad. Ahora, con los ordenadores personales y sus sistemas operativos, los procesadores de texto o internet y la edición digital, prácticamente todo el mundo se convierte en “tipógrafo”, componedor de textos, al tener disponible un número casi infinito de fami
Leer más

Las vanguardias y el desarrollo del diseño gráfico

Imagen
La comunicación gráfica vivió un desarrollo creativo sin precedentes con las llamadas vanguardias surgidas en las primeras décadas del siglo XX. Dadaistas y constructivistas, seguidores de De Stijl, o escuelas como la Bauhaus, contribuyeron decisivamente a la consolidación del diseño gráfico como actividad creativa aplicada a la empresa y al uso público. Las primeras décadas del siglo XX en Europa supusieron un salto de gigante en el desarrollo del diseño gráfico como actividad profesional y como desarrollo de un lenguaje visual y gráfico totalmente nuevo. En aquellos primeros años aparecen movimientos artísticos y escuelas que buscan nuevas formas de expresión como reacción al clasicismo.  Son las vanguardias, que quieren romper con el pasado en una época convulsa y de grandes cambios: Guerras, revoluciones, crisis, cambios tecnológicos y avances científicos. Arte y arte aplicado Esas tendencias modernas determinaron la creación en el siglo XX, esencialmente, como ap
Leer más

Ortotipografía: imprescindible conocer sus normas y usos

Imagen
La ortotipografía se ocupa de las convenciones para escribir correctamente una lengua con caracteres tipográficos. Se encuentra en un territorio donde se juntan dos disciplinas: la ortografía y la tipografía. Conocer sus normas y sus usos es obligado tanto para editores como para diseñadores gráficos. La ortografía es básicamente el conjunto de normas para escribir en una determinada lengua, ya sea de una forma manual o tipográficamente. Y por tipografía entendemos el diseño de los tipos y de cómo se combinan para transmitir mensajes escritos. Las diferentes familias tipográficas poseen una gran cantidad de signos gráficos que complementan a los caracteres del abecedario. Estos signos deben ser conocidos y empleados correctamente tanto por los autores de los textos como por los diseñadores y editores de las publicaciones. La ortotipografía se encarga de todo lo relacionado con el uso de los signos de puntuación, de las mayúsculas y minúsculas, de la utilización de las cu
Leer más

Infografía de las vanguardias artísticas

Imagen
Futurismo, dadaismo, neoplasticismo, constructivismo o surrealismo fueron movimientos artísticos surgidos hace ahora un siglo, en las primeras décadas del siglo XX, que revolucionaron el panorama de las artes plásticas, artes visuales y artes aplicadas definitivamente. Antes de estas vanguardias artísticas como el futurismo , ya habían iniciado su propia ruptura con el pasado otros movimientos unos años antes, en los inicios del siglo XX, como los  fauvistas (1905-1907), o el cubismo , que irrumpió con Pablo Picasso en 1907. En ese entorno europeo de grandes cambios, crisis y revoluciones también surgieron escuelas como la Bauhaus (1917-1933), además de otros "istmos", más efímeros (o precursores de otros posteriores) como el suprematismo de Malevitch, el orfismo o el vorticismo . Con esta infografía titulada Vanguardias del Siglo XX , he intentado representar gráficamente, mediante una línea de tiempo, la aparición de cada uno de estos movimientos, su
Leer más

El lenguaje gráfico de la psicodelia

Imagen
O cómo traducir en imágenes las alucinaciones caleidoscópicas de la contracultura. La psicodelia fue un movimiento artístico, alternativo y contracultural, nacido en la Costa Oeste de los Estados Unidos durante la segunda mitad de los años 60´ del pasado siglo XX. Este movimiento estaba estrechamente vinculado a la música rock y a los estilos de vida hippies de la época. Se manifestaba básicamente –además de la moda y las indumentarias de sus seguidores– en el diseño gráfico de los discos y los posters anunciadores de los conciertos de los diversos grupos. Lo psicodélico tenía también una conexión directa con representaciones visuales caleidoscópicas, influidas por las drogas alucinógenas, como el LSD, o ácido lisérgico, que perseguían traspasar las “puertas de la percepción” descritas por Adoux Huxley así como por las filosofías y místicas orientales. Gráfica psicodélica El estilo gráfico propio de la psicodelia es fácilmente reconocible. Básicamente trataba de pla
Leer más

Color, un poderoso elemento en comunicación gráfica

Imagen
El color es un poderoso elemento utilizado en la comunicación y el diseño gráfico. Es capaz de impactar y de influir en los receptores incluso antes de empezar a leer o interpretar la forma de las imágenes que se presentan ante los ojos. El color es la percepción que permite distinguir diferencias entre dos zonas de un campo visual. Cuando percibimos color nos produce muchas sensaciones, sentimientos diferentes, estados de ánimo; pero también nos permite interpretar, codificar y leer señalizaciones ya aprendidas y valoradas conforme a nuestras experiencias previas.  Se reacciona, la mayoría de las veces, ante los colores, según el aprendizaje cultural previo, según la edad, según las preferencias y los gustos o según las modas y tendencias. Y también, en función de las limitaciones o particularidades físicas. La primera división que se puede hacer en relación con los colores, es entre colores fríos y calientes. El llamado círculo cromático está dividido en dos mitades. Los
Leer más

Portadas de discos: "packaging" para la música

Imagen
El diseño de las cubiertas de los discos, su presentación gráfica, su "embalaje", tienen su historia y su desarrollo. Repasamos el nacimiento de estas portadas, su vertiginoso crecimiento y también la deslumbrante creatividad desplegada en casos como los sellos discográficos de Jazz o la música Pop durante la época dorada de los vinilos. Primero fueron las pizarras y los vinilos, después los efímeros cassettes y, finalmente, a partir de 1983, los CD,s. Ahora el soporte físico se desvanece; es el tiempo del mp3 y la distribución de canciones vía iTunes. Los discos, especialmente los de jazz y pop han aportado ejemplos de creatividad y buen diseño gráfico a lo largo de su historia, una corta pero intensa historia cuyos inicios se remontan a los años 40´ del siglo XX.  Cómo nacieron las portadas de los discos Cualquier producto que se fabrica en serie y se distribuye en comercios debe estar embalado, es decir, protegido, y además debe contener información e
Leer más

La interacción del color: Cuando los colores se relacionan entre sí

Imagen
La obra del maestro de la Bauhaus Josef Albers sigue siendo imprescindible para acercarse al estudio del color en los ámbitos del diseño y las artes visuales.   Publicado hace ya cinco décadas, La interacción del color es mucho más que un libro sobre el color : es el resultado de una amplia investigación y de un trabajo experimental que nos ha permitido conocer aspectos muy valiosos sobre la utilización del color en el arte, el diseño y la comunicación gráfica. Se trata en realidad de un curso taller sobre COLOR, que se oponía a la actitud oficial de “teoría y práctica”. Albers dedicó su vida a la enseñanza y al arte, primero en la Bauhaus (1923-1933) como profesor del Curso Preparatorio, y después, al exiliarse a Estados Unidos, en Black Mountain College, donde permaneció durante dieciséis años. Después, a partir de 1950, comenzó a impartir sus clases en la Universidad de Yale, como responsable del Departamento de Diseño. En el libro se  incorporan láminas en
Leer más

Los signos tipográficos como imágenes

Imagen
Los tipos sirven para facilitar la lectura y dotar al contenido de un estilo visual. Las familias no solo se componen de las letras. En cada fuente completa se han diseñado también signos ortotipográficos, como guiones, paréntesis, corchetes o llaves. También ellos se convierten en imagen. Los llamados signos tipográficos que se utilizan en ortotipografía forman parte de una familia tipográfica completa. Estos signos pueden ser de entonación (¿? !¡), pueden ser signos contenedores (...), {...} o [...], o pueden ser diferentes tipos de comillas ("...").  Todos estos signos enriquecen el lenguaje y su comprensión a la hora de leer un texto compuesto tipográficamente. Por eso es tan importante, al diseñar una fuente pensada para la lectura, incluir,  valorar y cuidar estos signos para que sea completa.  Al realizar esta "broma" tipográfica e infográfica con las principales clasificaciones de familias  (romanas, mecanas y lineales) nos podemo
Leer más

Gráficamente

Gráficamente

CONTACTO: ENVIA TU COMENTARIO

Nombre

Correo electrónico *

Mensaje *