Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Conceptos básicos de tipografía para desarrolladores

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Working With Brand and Design Guidelines
Improving Layout With Vertical Rhythm

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

La tipografía es un elemento fundamental en cualquier diseño que trabajes. La principal razón por la cual tenemos sitios web, en primer lugar, es para mostrar información y, también, para que esa información pueda ser consumida por los usuarios que vienen en busca de ella. En tanto que pueda haber muchos otros elementos para un sitio web, en el centro está el contenido. Y ese contenido, necesita que se lea con mucha facilidad, para que pueda ser digerido y entendido debe tener un consistente base tipografíca que solamente ayudará con eso.

Empezar con la tipografía es, posiblemente, uno de las partes más accesibles del aprendizaje de diseño, sencillamente porque es tan fácil cambiar y probar el texto para conseguir resultados inmediatos. No obstante, refinar sus habilidades tipográficas tanto que puedas diseñar algo que funcione bien y sea efectivo, es decir, que sea legible y útil para los usuarios, es más que un desafío.

Términos técnicos.

Primero, conozcamos algunos términos técnicos básicos. Esto es algo un poco anticuado de algo de los términos más comunes que encontrarás cuando trabajes con tipografía, y, de hecho, hay muchas más guías comprehensivas de la web o en libros si es que quieres leer más al respecto.

Fuente versus Tipo de fuente.

Este primer término es uno de los que más saca de quicio a la mayoría de las personas. Tipo de fuente, describe la forma de las letras diseñadas. Una fuente, es el vehículo, el cual contiene el tipo de fuente. Tú descargas e instalas un paquete de fuentes con el fin de usar tipo de fuente dentro de su diseño.

Seirf versus Sans Serif

Seguramente puedes pensar que haya dos tipos principales de clasificaciones, es decir; serif y sans serif. El tipo de fuente Serif, por lo general luce un poco más clásica en estilo, a menudo con pequeñas vueltecitas o adornos (serifs) donde termina la forma de la letra.

Sans vs Serif

Ejemplos de la fuente serif incluye TImes New Roman, Basketville y Georgia. El tipo de fuente Sans serif carece de los ornamentos serif, en vez de eso, tiene un aspecto un poco más moderno. Ejemplos de fuentes sans serif incluye la Helvetica, Aria y Futura.

¿Qué es lo que hace a un Caracter?

Examinemos, brevemente, la anatomía de la forma de una letra.

Ascendente

Ascendente, es cualquier parte de una letra minúscula que se prolonga por encima de la altura de la letra x de cualquier letra.. Es muy probable que debas estar familiarizado con letras que son ascendentes tales como b, d, f, h, k, l.

Ascender

Descendente.

Descendente, es cualquier parte de una letra minúscula que se extiende por debajo de la altura de la letra x de cualquier letra. Por ejemplo; g, j, p, q, y.

Descender

Mostrador.

En una letra, un mostrador es el espacio negativo encerrada en una forma curva (o parcialmente cerrada) dentro de una letra. Las letras más comunes con mostradores incluyen b, d, e, o, s.

counter

Serif

Como ya lo hemos mencionado anteriormente, serifs son las vueltas o giros extras y ornamentos que puedes ver cuando tienes que distinguir entre los estilos de fuentes serif y sans serif.

Serif

Línea base

La línea base es una línea invisible en la cual todos los caracteres se apoyan. Esta línea base puede variar bastante entre los diferentes tipos de fuentes, pero, por lo general, siempre es consistente dentro de un tipo de fuente individual.

Baseline

Altura capitular

La altura capitular es la distancia desde la línea base a la parte más alta de las letras mayúsculas.

Cap Height

Altura-x

La altura-x es la altura de la parte principal de las letras minúsculas (o al menos la altura de la letra x minúscula, de ahí el nombre). Cabe mencionar, que esta altura no incluye adicionalmente ni ascendente ni descendente.

x-height

Ornamentos como fuentes.

Un glifo u ornamento es un caracter individual dentro de una fuente. Estos incluyen cualquier tipo de símbolos o letras. A través de los glifos extras puede estar disponible para ti los que no coinciden con cualquiera de los que, por lo general, se conocen o utilizan símbolos o letras.

Cuando trabajas con tipografía

…deberás tener en cuenta:

Tamaño

Cuando trabajas con tipografía (y, aunque, esto podría sonar obvio) deberás considerar el tamaño del texto con el cual estarás trabajando.

size

Con cada tendencia de diseño que pase también habrá tendencias de cómo debería ser un texto, si grande o pequeño. Observa, por ejemplo, la audiencia prevista, es decir: es su audiencia ¿la más joven o la más vieja? Si es así, ¿necesitará un texto más grande?

Piensa también acerca de como el tamaño del texto impactará el diseño de tu sitio. ¿Quieres, por ejemplo, enfocarte en la tipografía o, tienes otros ornamento y elementos de diseño que quieres incluir que pueden influenciar la manera de en que la tipografía se apoya en el diseño?

Contraste

El contraste influencia la legibilidad de un texto o un bloque de texto enorme. Cuando hablamos acerca del contraste hay dos cosas claves que debes mantener siempre en mente.

readability-and-contrast

Primero, quieres asegurarte que el contraste entre el texto y el fondo lo suficientemente fuerte para ser notado. También piensa en la accesibilidad, es decir, volviendo hablar acerca de la accesibilidad del colo en diseño, el mismo concepto de diseño aplica para el texto. Si no estás seguro de si o no tu texto tendrá suficiente contraste, entonces usa una herramienta tal como la de Lea Verou, herramienta Radio de Contraste, como ayuda.

También necesitarás estar consciente de la elección de fuente que hagas. Muchas fuentes que tienen anchuras muy delgadas podría no presentarse bien en ciertos tamaños y puede ser más útil para fuentes grandes o para mostrar títulos. Además, intenta asegurarte que las fuentes o tipos de fuentes que escojas tengan un buen sistema de soporte operativo y de navegación en la web. Algunas fuentes y tipos de fuentes se pueden ver bien en una plataforma, pero lucirán terriblemente diferentes ya sea en uno o en otro navegador.

Espacio

Cuando trabajas con tipografía, así como en cualquier otra parte de tu diseño, asegurate que le das suficiente espacio para respirar y para que el contenido hable por sí solo.

space

El contenido de tu sitio web es la experiencia central que necesitas ofrecerles a tus usuarios. Aparte de cualquier otro elemento de diseño, todos tus usuarios, en verdad necesitan ver esto en el contenido. Por causa de eso, no te preocupes de darle más espacio al contenido y permitiendo que tu contenido haga más para hablar.

El espacio negativo es el espacio o proporción que queda alrededor de los elementos de un diseño, de nuevo, no deberías preocuparte por dejar este espacio negativo alrededor de tu contenido.

Que no se te olvide lo relacionado al espacio alrededor de cada parte de tu texto. No seas codicioso y deja un espacio más grande para la línea de altura para que haga sentir a tu texto reducido y más difícil de leer. Por ejemplo, como regla general (por favor, siéntete libre de jugar con estos valores) la altura de línea que sea al menos 140% a 160% del tamaño del texto debería funcionar bien y ofrecer un buen balance para tu texto.

Jerarquía

Una jerarquía de tipografía se relaciona en como el contenido se coloca en tu diseño.

hierarchy

Cuando se establece buena jerarquía del contenido desde el principio cuando trabajas para crear una buena estructura dentro de su contenido. La jerarquía de la tipografía luego funciona bien con el contenido, /—desde títulos hasta párrafos normal y cualquier parte del contenido que quieras enfatizar, ayuda a formar una estructura a través de la cual, los usuarios pueden navegar con facilidad.

El impacto de una jerarquía tendrá en tus diseños puede ser enorme. Estamos hablando de hacer para los usuarios un viaje para encontrar el contenido tan pronto como sea posible y establesca una jerarquía solidad que solamente producirá efectos positivos.

De hecho, puedes establecer una jerarquía visual y tipográfica en un numero de formas, incluyendo el uso del color o haciendo variedades de tamaños de texto para crear emfasis y estructurar el contenido. Todos los tips anteriores te ayudarán a establecer una mejor jerarquía tipografica y pienso que es algo que siempre vendra con la practica.

Fuentes en la Web

Hablaremos sobre las fuentes para la web con mejores detalles más adelante, pero el seguimiento deberá ser una introducción firme dentro de las posibilidades de las fuentes para la web.

Hoy en día, somos muy afortunados debido a que tenemos muchas opciones para implementar fuentes web en sus sitios web, —y con el uso más comun uso de las fuentes web en la web (comprá a través de la web para un mejor soporte), podemos ser más inteligentes en los estilos tipograficos y diseños que puedan incluir nuestros diseño.

Así como ser capaz de almacenar sus propias fuentes usando @font-face, hay muchas servicios disponibles en la web para ayudarte a usar más fuentes web en línea, incluyendo:

y más, muuuucho más Incluso los sitios web tales como FontShop o MyFont (que incluyen recursos utilizados para ser limitado tan solo para vender fuentes de escritorio) ahora están introduciéndose al mercado de las fuentes web, ofreciendo fuentes que puedan descargarse y que puedas usar con la técnica de @font-face..

Continuará

Hemos cubierto todos los conocimientos básicos de tipografía, sin embargo, en los siguientes artículos echaremos un vistazó al ritmo vertical. Tampoco olvides que puedes introducirte completamente en nuestra sección La Tipografía Web de la A hasta la Z, para más detalles en cualquiera de esos puntos.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.