Introducción.

Buenas! Siguiendo con nuestro curso de desarrollador full stack desde cero vamos a dar las bases de diseño, no precisamente para ser diseñadores pero sí para tener una idea sobre cómo mejorar u organizar mejor nuestro trabajo.
Es común leer o escuchar "Te programo lo que quieras pero no me pidas que le agregue dos colores a la paleta porque voy muerto!".
Tomemos a esta curso que arranco como una reseña en donde podamos apalancarnos y comenzar a indagar más acerca del manejo de estilos aplicados al diseño web. Hoy nos toca hablar de la tipografia.

Tipografía.

Partamos de la base que La tipografía es el arte y la técnica de organizar las letras de forma tal que éstas sean legibles y atractivas cuando se muestran. A éstas las vamos a agrupar bajo características comunes en cuanto a caracteres, números y signos. A esta agrupación la conocemos como fuente tipográfica.

Por lo tanto, podemos afirmar que que la tipografía es el estilo o la apariencia que se le dá al texto.

Tipos de fuentes.

Serif

La familia de las SERIF esta compuesta por letras que contienen serifas. Las serifas son terminaciones artísticas aplicadas a letras, éstos suelen ser "palitos" que sobresalen de los vértices de las letras.

En este ejemplo vemos las serifas correspondientes a las letras A, G y H de la fuente Times New Roman.

Este tipo de fuentes suele usarse para "fines serios" o que requieran cierta formalidad, como pueden ser los títulos de artículos periodísticos, los logotipos de marcas consideradas de lujo o artículos para adultos mayores (les hace sentir cierto reconocimiento).

La familia serif contiene principalmenete a las siguientes fuentes: "Times New Roman", Times, Georgia, "Book Antigua", Palatino, entre otras.

Sans serif.

Viene del francés "Sin serifa". Conlleva un estilo mas estilizado, o moderno, que el serif.
Son las que usan la gran mayoría de las páginas modernas, sobretodo, porque le facilitan al espectador la lectura, volviéndola mas limpia y clara.

Hoy en día hay cientos de fuentes sans serif. Las que se suelen usar mas frecuentemente son: Roboto, Arial, "Brandon Grotesque", Avenir, Helvética, entre otras.

Buscando un nuevo target, hay muchas marcas que hicieron un re-branding de sus marcas y, en lo que respecta al diseño tipográfico, vimos ejemplos muy marcados, como por ejemplo el Banco Santander, en donde pasaron de tener una fuente Serif a una Sans Serif:

Variantes

Dentro de cada familia se pueden encontrar determinadas variantes, y se clasifican en:

Redondas

También conocidas como Romanas, las redondas son las consideradas "las letras normales": se caracteriza por mantener verticales las astas que van de arriba abajo y redondeadas sus letras cortas.
Se utiliza en textos regulares en donde participan párrafos completos, y hacen de éste un texto pontecialmente legible.

Cursivas

Dentro de nuestros códigos (los informáticos) tendemos a diferenciar el concepto de cursiva del "escrito en papel". Para nosotros, las cursivas (también conocidas como itálica o bastardilla) serán el equivalente a la redonda levemente inclinada hacia la derecha.
Lo utilizamos para resaltar frases dentro de los párrafos, subtítulos o citas. En los ultimos años se reemplazó el uso del subrayado por la cursiva, por lo cual es normal verlas en páginas actuales.

Negritas

La negrita parte de la redonda para generar el mismo tipo de fuente pero con una grueso de sus paredes mas ancha.
Al igual que la cursiva, se utiliza para resaltar una frase o un texto dentro de un párrafo, también para generar títulos.

En el ejemplo del recorte periodístico se vé claramente el uso del tipo de letra: La negrita en el título (además de la altura, o el peso, que veremos en el siguiente punto) resalta del contenido general; luego vemos una introducción al tema, resaltado con cursiva (y destacándose del resto del cuerpo de la noticia); y el el cuerpo de la nota con una letra "normal". Entre medio está el apartado con el nombre del columnista, también en negrita pero con menos peso que el título.

Jerarquía.

La jerarquía debe guiar al ojo del visitante de la página, por lo que, antes de arrancar a diseñar tu página, debes pensar en qué buscas transmitir: Qué tiene para decir tu mensaje.
En el ejemplo del recorte periodístico, se resuelve pasando de un estilo en negrita (y de mayor tamaño), a uno en cursiva para finalizar con la redonda. Y éstos van a ser nuestros tres niveles jerárquicos:

El nivel primario

Obedece a letras de gran tamaño y es lo que le DEBE llamar al lector a interesarse por el contenido. Es el anzuelo.

El nivel secundario

Son letras que se destacan por permanecer en cursiva, son mas chicas que las del nivel primario (e inclusive pueden ser del mismo tamaño que las del terciario) pero su función es agregar los detalles importantes al título y mantener cautivo al lector. Incluye elementos tales como subtítulos, citas e infografías.

El nivel terciario

Es el cuerpo principal del texto y es lo que nos dará la información que buscábamos. La letra suele ser cómoda al lector. Se utiliza una fuente serif redonda y, ocasionalmente, resaltamos el contenido con cursivas y negritas.

Esta jerarquía no solo se utiliza en artículos periodísticos, también lo podemos hacer para definirle a un usuario cómo debe manejarse dentro de nuestro sitio web.

La usabilidad será una parte importante dentro de nuestros sistemas ya que, como diseñadores del mismo, debemos guiar a los visitantes y debemos velar porque cada uno sepa qué puede hacer en cada sector de la página.

En el próximo artículo ahondaremos en temas como el párrafo y el espaciado (tanto entre líneas como entre caracteres), los márgenes, los colores y demás.
No dejes de seguirme en dev.to, en mi canal de YouTube
https://www.youtube.com/channel/UCwvDOgLF--WYsnsBTliGM2A
Y buscá mas recomendaciones, tips y, quien te dice, tu próximo laburo en Primer Empleo IT: https://www.facebook.com/groups/primerempleoit