Resp.
2
Votos
1
Tipografías, familias tipográficas o simplemente fuentes son estilos de las letras de un texto, elemento fundamental del diseño.
Las fuentes o familias tipograficas son uno de los elementos más clásicos del diseño. Permiten personalizar el aspecto de los textos y ayudan a direccionar un diseño hacia su objetivo. A la vez, son capaces de aportar un mayor valor estético a las simples palabras.
Existen muchos tipos de familias tipográficas, entre las que destacan los elementos con serifa y sin serifa.
Más información:
Artículos destacados de Tipografía:
Fuente vs Tipografía vs Familia Tipográfica
En el área de diseño, el término "fuente" que se refiere al estilo que tienen las letras y otros caracteres, que se puede aplicar en cualquier programa que permita usar texto enriquecido (un procesador de textos gráfico o una página web...). Por ejemplo, una fuente sería "Arial", "Verdana" o "Times".
Cuando usamos el término "tipografía" a menudo queremos aplicar el mismo significado que el del término "fuente". Sin embargo, un uso más restrictivo de este término sería el arte o técnica necesaria para diseñar las fuentes tipográficos, no haciendo referencia a cada una de las fuentes existentes, sino a la manera en la que se crean o se usan.
En cuanto a una "familia tipográfica" se refiere a todas las variaciones de una fuente. Por ejemplo, Arial puede escribirse con texto normal, pero también con negrita o itálica. Todas esas variaciones forman parte de la misma familia tipográfica.
Tipografía en la web con CSS
Originalmente en la web sólo se podían usar aquellas fuentes instaladas en el ordenador del usuario, por lo que los diseñadores estaban muy limitados a usar solamente aquellas fuentes disponibles prácticamente en la totalidad de los sistemas, como Arial, Times New Roman y unas pocas más.
Para paliar los efectos de la existencia o no de fuentes en la web es posible definir varias fuentes, separadas por comas. Por ejemplo en CSS eso se consigue al declarar la propiedad font-family, de esta manera:
font-family: 'Times New Roman', Times, serif;
Afortunadamente con la llegada de @font-face en CSS 2 es posible especificar archivos disponibles en el servidor, o un CDN, que permitan incluir nuevas fuentes y que funcionen independientemente de la configuración de fuentes del ordenador del usuario.
@font-face llegó en versiones tempranas de los navegadores. El mayor problema era el soporte a distintos archivos o formatos de definición de fuentes. No obstante, en la actualidad es posible usar fuentes con bastante libertad.
El código para especificar una fuente sería algo como esto:
@font-face {
font-family: "Gelasio";
src: url("https://fonts.gstatic.com/s/gelasio/v1/cIf9MaFfvUQxTTqS9C6hYUsEkIo.woff2");
}
Luego podríamos usar esta fuente en cualquier etiqueta, con el correspondiente CSS:
h1 {
font-family: "Gelasio", serif;
}
A pesar que la fuente debería de estar disponible para todos los usuarios, ya que la hemos cargado mediante @font-face, sigue siendo interesante especificar alguna otra tipografía, para que se tenga en cuenta mientras que carga la fuente descargada, pero también por si el navegador no entiende @font-face o no puede procesar ese tipo de archivo de tipografía indicado.
Puedes encontrar más información en el artículo sobre @font-face.
Combinar tipografías
Uno de los recursos más atractivos de un diseño es la combinación de tipografías. la combinación se debe dar por medio del contraste o el uso de tipografías complementarias.
En general dos tipografías combinan bien si hay suficiente contraste entre ellas. En caso que ese contraste no se produzca, la combinación deja de ser un recurso estético positivo a ser percibido como un error.
El contraste se puede conseguir de múltiples maneras:
- Usando parámetros distintos de la fuente dentro de una misma familia, por ejemplo contrastar por medio de un cambio de grosor entre dos fuentes de tipo "helvetica", una gruesa y otra fina.
- Combinación de dos familias tipográficas de distintas características, que sean lo suficientemente distintas, por ejemplo con y sin serifa.
Además, algunos consejos para combinar tipografías de manera exitosa son los siguientes:
-
Contraste, pero evitar el conflicto: Busca tipografías que se complementen entre sí en términos de estilo, pero que tengan suficiente contraste en peso, tamaño o forma. Por ejemplo, podrías combinar una fuente serifada con una sans-serif. El el artículo de familias tipográficas tienes una explicación de lo que son las serif o sans-serif.
-
Número limitado de fuentes: Como regla general, intenta ser racional en el uso de tipografías, esto es, no usar más de 2 o 3 fuentes diferentes en un mismo diseño. Cuantas más fuentes utilices, más difícil será mantener la coherencia y la legibilidad.
-
Usa diferentes pesos y estilos de la misma familia tipográfica: Si quieres añadir variedad, en lugar de cambiar a una fuente completamente diferente, puedes usar variantes más ligeras o más pesadas, o estilos cursivos, de la misma fuente tipográfica. Si no tienes mucha idea de diseño con este recurso puedes estar totalmente seguro, porque siempre funciona bien.
-
Mantente fiel al tema y propósito del diseño: Aunque quieras ser creativo en un diseño tienes que tener en cuenta el tema que estás tratando. Por tanto, es importante prestar atención a las fuentes elegidas, asegurando que se adapten al tono y propósito de tu diseño. Por ejemplo, una fuente con trazos infantiles podría ser adecuada para un cartel de un evento para niños, pero no para un informe anual corporativo.
-
Maximiza siempre la legibilidad: Asegúrate de que las fuentes elegidas sean legibles. No hay cosa peor que un diseño que usa fuentes que no permiten leer bien el texto. A veces la lectura del texto puede ser dificultada por elementos como un fondo confuso o de poco contraste, pero también las tipografías deben ayudar, sobre todo cuando quieres usar bastante cantidad de texto o un tamaño de letra pequeño.
-
Evita fuentes demasiado parecidas: Si las fuentes son muy similares, el resultado puede llevar a pensar que hubo un error en lugar de una elección deliberada de la tipografía. Por eso se recomienda usar familias tipográficas de características bien distintas a la hora de combinar tipografías. Si no lo tienes claro, siempre puedes acudir al recurso de los distintos estilos y grosores de una misma tipografía.
-
Espaciado y alineación: Otro recurso que puedes probar, además de combinar las fuentes en sí, es trabajar con sus atributos como el espaciado de las letras o la alineación de los textos.
-
Piensa en la jerarquía: Utiliza la tipografía para establecer una jerarquía visual clara, que es una de las bases del diseño. Las fuentes más grandes y creativas atraen la atención y son ideales para encabezados y llamadas a la acción, mientras que las fuentes más pequeñas y ligeras son más adecuadas cuando tenemos más cantidad de texto, por ejemplo en el cuerpo del diseño.
-
Haz pruebas con tu público objetivo: Si es posible, obtén feedback de personas que formen parte de tu público objetivo. Pregúntales si les gusta el diseño y cómo lo perciben, si son capaces de entenderlo en pocos segundos y qué mensaje principal extraen de este diseño.
-
Busca inspiración: Busca referentes en diseños y sitios web que te parezan adecuados, pero ten también en cuenta que la elección de tipografías y la percepción estética es fundamentalmente subjetiva, por lo que lo que le gusta a una persona puede que no le guste a otra. Al final, el tipo de trabajo debe también llevarte a ser más conservador o más creativo al elegir las tipografías, así que los referentes también cambian.
¿Quieres añadir algo sobre Tipografía?
Crea artículos, recursos o comparte información sobre Tipografía
Preguntas y respuestas de Tipografía
Se han recibido 2 faqs en Tipografía
Resp.
1
Votos
0