Share
La tipografía es un elemento fundamental en cualquier diseño en el que trabajes. La razón principal por la que tenemos sitios web en primer lugar es para mostrar información y para que esa información sea consumida por los usuarios que la encuentren. Si bien puede haber muchos otros elementos en un sitio web, en el núcleo está el contenido. Ese contenido debe leerse, digerirse, entenderse fácilmente y tener una base tipográfica sólida solo ayudará con eso.
Comenzar con la tipografía es posiblemente una de las partes más accesibles del diseño de aprendizaje, simplemente por lo fácil que es cambiar y jugar con el texto para obtener resultados inmediatos. Sin embargo, perfeccionar sus habilidades de tipografía para que pueda diseñar algo que funcione bien y sea eficaz, legible y útil para sus usuarios, es más un desafío..
En primer lugar, vamos a obtener algunos de los términos técnicos básicos del camino. Esto es solo un pequeño resumen de algunos de los términos más comunes que encontrará al trabajar con tipografía, y hay Guías mucho más completas en la web o en los libros si desea leer más.
Este primer término es el que hace tropezar a la mayoría de las personas. Tipo de letra Describe las formas de letras diseñadas. UNA fuente Es el vehículo que contiene la tipografía. Usted descarga e instala un paquete de fuentes para usar una tipografía dentro de su diseño..
Puede pensar con seguridad que existen dos clasificaciones de tipos principales: serif y sans serif. Serif Los tipos de letra generalmente tienen un estilo un poco más clásico, a menudo con pequeñas películas o adornos (remates) donde terminan las formas de las letras..
Ejemplos de fuentes serif incluyen Times New Roman, Baskerville y Georgia. Sans serif Los tipos de letra carecen de los adornos serif, en lugar de buscar un poco más moderno. Ejemplos de fuentes sans serif incluyen Helvetica, Arial y Futura.
Examinemos brevemente la anatomía de una forma de letra..
El ascendente es cualquier parte de una letra minúscula que se extiende por encima de la altura x de la letra. Estarás familiarizado con las letras que tienen ascendentes como b, d, f, h, k, l.
Un descensor es cualquier parte de una letra minúscula que se extiende por debajo de la altura x de la letra. Por ejemplo g, j, p, q, y.
En una carta, un contador es el espacio negativo encerrado encerrado (o parcialmente cerrado) dentro de una letra. Las letras comunes con contadores incluyen b, d, e, o, s.
Como hemos mencionado, las remates son las películas y adornos adicionales que se pueden ver al distinguir entre los estilos de fuente serif y sans serif..
La línea de base es una línea invisible en la que se sientan todos los personajes. Esta línea de base puede variar enormemente entre diferentes tipos de letra, pero generalmente siempre es coherente dentro de un tipo de letra individual..
La altura del límite es la distancia desde la línea de base hasta la parte superior de las letras mayúsculas.
La altura x es la altura de la parte principal de las letras minúsculas (o al menos la altura de la x minúscula, de ahí el nombre). Esta altura no incluye la altura de ascendentes o descendentes adicionales..
Un glifo es un carácter individual dentro de una fuente. Estos incluyen cualquier símbolo o letra, a través de glifos adicionales que pueden estar disponibles para usted que no coinciden con ninguno de los símbolos o letras más comúnmente conocidos o usados.
... deberías pensar en:
Cuando trabaje con tipografía (y esto puede parecer obvio), debe considerar el tamaño del texto con el que trabajará..
Con cada tendencia de diseño que pase, también habrá tendencias sobre qué tan pequeño o grande debería ser el texto. Piense, por ejemplo, en la audiencia a la que está destinado; ¿Es su audiencia una audiencia más joven o más vieja? ¿Necesitarán un tamaño de texto mayor??
Piense también en cómo el tamaño del texto afectará el diseño de su sitio. ¿Desea que se centre en la tipografía, o tiene otros adornos y elementos de diseño que desea incluir que pueden influir en la forma en que se encuentra la tipografía en el diseño??
El contraste influye enormemente en la legibilidad de un bloque de texto. Cuando hablamos de contraste hay dos cosas clave a tener en cuenta.
En primer lugar, debe asegurarse de que el contraste entre el texto y el fondo sea lo suficientemente fuerte como para que se note. Piense en la accesibilidad aquí: volviendo a hablar sobre la accesibilidad del color en el diseño, lo mismo se aplica a su texto. Si no está seguro de si su texto tendrá suficiente contraste, entonces use una herramienta como la herramienta de Relación de Contraste de Lea Verou para ayudarlo..
También debe tener en cuenta las opciones de fuente que toma. Muchas fuentes que tienen pesos muy finos pueden no mostrarse bien en ciertos tamaños y pueden ser más útiles para fuentes más grandes o para mostrar titulares. También intente asegurarse de que las fuentes o tipos de letra que elija tengan un buen soporte de navegador y sistema operativo. Es posible que algunas fuentes y tipos de letra funcionen bien en una plataforma, pero mire y se desempeñe terriblemente en otra..
Cuando trabaje con tipografía, como con cualquier otra parte de su diseño, debe asegurarse de darle suficiente espacio para respirar y de que el contenido hable por sí mismo..
El contenido de su sitio web es la experiencia principal que sus usuarios necesitan para ofrecer. Aparte de cualquier otro elemento de diseño, todos sus usuarios De Verdad Necesito ver es el contenido. Debido a eso, no tenga miedo de dar más espacio al contenido y dejar que su contenido haga más de lo que habla..
El espacio negativo es el espacio o espacios que quedan alrededor de los elementos de un diseño; No tengas miedo de dejar este espacio negativo alrededor de tu contenido..
No olvide también el espacio alrededor de cada parte de su texto. Permita una altura de línea generosa que no haga que su texto se sienta apretado y más difícil de leer. Como regla general (aunque no dude en jugar con esto), una altura de línea de al menos 140% a 160% del tamaño del texto debería funcionar bien y ofrecer un buen balance para su texto..
Una jerarquía tipográfica se relaciona con la forma en que el contenido se presenta en su diseño.
El establecimiento de una buena jerarquía de contenido comienza al principio, cuando trabaja para crear una buena estructura dentro de su contenido. La jerarquía tipográfica funciona con su contenido, desde los encabezados hasta los párrafos normales y cualquier parte del contenido que desee enfatizar, para ayudar a formar una estructura que los usuarios puedan navegar fácilmente..
El impacto que una jerarquía tiene en su diseño puede ser masivo. Debe hacer el viaje de sus usuarios para encontrar el contenido que están buscando lo más fácil posible, y establecer una jerarquía sólida solo producirá efectos positivos.
Puede establecer una buena jerarquía visual y tipográfica de varias maneras, incluido el uso de colores o diferentes tamaños de texto para crear énfasis y estructura en su contenido. Todos los consejos anteriores te ayudarán a establecer una mejor jerarquía tipográfica, aunque es algo que siempre vendrá con la práctica..
Discutiremos las fuentes web con más detalle más adelante en esta serie, pero lo siguiente debe ser una introducción sólida a las posibilidades de las fuentes web..
Hoy en día, tenemos mucha suerte de tener muchas opciones para implementar fuentes web en nuestros sitios web, y con el uso más común de las fuentes web en la web (gracias a un mejor soporte de navegadores generales), podemos ser más creativos En los estilos tipográficos y diseños podemos incluir en nuestros diseños..
Además de poder alojar sus propias fuentes usando @ font-face, hay muchos servicios en línea disponibles para ayudarlo a usar más fuentes web en línea, incluyendo:
y muchos muchos mas. Incluso sitios como FontShop o MyFonts (que solían estar limitados a vender solo fuentes de escritorio) ahora están ingresando al mercado de las fuentes web, ofreciéndole fuentes descargables que puede usar con la técnica @ font-face.
Habiendo cubierto lo básico de la tipografía, en el siguiente artículo veremos el ritmo vertical. No olvide que también puede sumergirse en nuestra Sesión en curso La A-Z de la tipografía web para obtener más detalles sobre cualquiera de estos puntos.
Accentsconagua