Especialista en servidores y Hosting VPS
La tipografía en nuestras webs
/
RSS Feed
Todos piensan en las imágenes, lo colores, las formas… Pero todo mundo pasa por alto a la tipografía. En este episodio quiero compartir con vos mi resumen de un post del blog de Elementor y que nos paremos a reflexionar un poco, para darle su justo lugar a este elemento tan importante.
- El post tiene el título:
- Y es una lectura obligada 100%
- En este episodio quiero darte un breve resumen… Pero como te digo lo mejor es que vayas y le des una leída jejeje
- 👉Así que manos a la obra:
- Ya sabemos que la tipografía
- Transmite branding, diseño visual, y experiencia del usuario
- Todo en algo tan simple pero a la vez tan importante
- Pero veamos… ¿Qué es la tipografía?
- Técnicamente es el arte y la técnica de ordenar el tipo
- Va mas allá del diseño, composición, y disposición
- También la tipografía nos habla de comunicación, identidad visual, personalidad de marca, y por supuesto usabilidad.
- Al reconocer la importancia de la tipografía
- También le damos su justo valor a las palabras
- Porque aún al día de hoy, nuestro usuarios cuando necesitan saber de nosotros
- Van a nuestro sitio web a LEERLO
- Por eso tenemos que entender
- Muchos factores como los siguientes:
- 👨💻La tipografía web
- ¿No te ha pasado que por más que insistas no sentís lo mismos al leer un libro en papel que en digital?
- Y aunque pareciera exactamente lo mismo leer letras sobre un fondo
- Impreso o digital
- No es lo mismo… Así como no es lo mismo imprimir letras que quedarán fijas y estáticas
- Y utilizar letras en una web que cambiara constantemente para adaptarse a los dispositivos
- 📱Adaptación en pantalla
- Diferente dispositivo… Diferente tamaño de pantalla
- Y no solamente que se vea bien en una pantalla o la otra
- Deben leerse y verse bien en dispositivos móviles
- Que es ahora la punta de lanza desde que Google ha dicho que indexará primero móviles
- Y es la tendencia de los usuarios a consumir contenido desde celulares
- Aquí interviene los tamaños, colores, peso, y diseño de la tipografía
- 🖥 La resolución
- La resolución de pantalla se refiere a la cantidad de píxeles que una pantalla contiene horizontal y verticalmente
- Es decir la cantidad de puntos que muestra una pantalla por pulgada
- La resolución es importante
- Porque afecta lo que vemos dentro de la pantalla
- Con este punto debemos entender que una cosa es lo que se muestra
- Y otra es lo que nuestros ojos pueden percibir
- A mas resolución, mas pequeña se ve la letra
- ✅Lo responsive
- La idea de la tipografía es que sea
- Fácil de leer en diferentes dispositivos y tamaños de pantalla
- Lo responsive no solo es que el texto se adapte
- También significa que el texto se lea bien al adaptarse
- Es bueno que sepamos que el texto se adapta a todo
- A la pantalla
- A la resolución
- A los elementos
- Y a sus unidades red y em
– 🛠Claves de la tipografía
- 👨👨👦👦Familias de fuentes genéricas
- Serif
- Con detalles decorativos o “colas”
- Son suaves, redondeadas y decorativas
- Se usan mucho para textos de libros, periódicos, revista
- Times New Roman, Georgia, Palatino, Garamond, Playfair Display
- Esta familia con serifa
- Se usa mucho para marcas serias, formales… Como abogados, seguros, médicos, etc.
- Sans-serif o cursiva
- Ahora que ya hablamos de la serif
- Es mas fácil entender
- Estas no tiene detalles decorativos o “colas”
- Tienen un grosor más uniforme
- Y se usa mucho en diseños
- Minimalistas, modernos, y simples
- Su uso dentro del diseño web
- Es mas frecuente en títulos, subtítulos, textos de botones
- Por ejemplo…
- Avenir, Roboto, Open Sans, Source Sans Pro, Lato, Monstserrat, Proxima nova
- Serif
- 👨👦Familia de Fuentes… Y fuente
- La familia de fuente
- Es un conjunto de letras del alfabeto
- Con el mismo diseño
- De distintos tamaños y pesos
- El tipo de letra es una familia de Fuentes
- La fuente se refiere a los pesos, anchos, y estilos de cada variación de ese tipo de letra
- 📝Formato de texto
- Todos sabemos lo útil
- Que es resaltar un texto al ponerlo en negrito o cursiva
- Pero además nuestros lectores
- Se benefician de estos énfasis
- Y las podemos usar para enfatizar términos, secciones, títulos de capítulos, subtítulos, entradas de tablas, etc.
- El post sigue reflexionando sobre conceptos que te recomiendo 100% ir a leer
- Y nos da ocho consejos de cómo elegir la fuente perfecta para tu sitio web
- Que te recomiendo ir a profundizar en el post:
- Pensa en cómo queres retratar tu marca usando la tipografía correcta
- Decidi entre serif o sans serif
- Mira si tus fuentes combinan
- Tener en cuenta el tamaño, grosor, y longitud De la Fuente
- Respetar el papel de la jerarquía visual
- Conocer las hojas de estilo CSS
- Mantenernos actualizados de los estándares
Si bien es cierto que no somos diseñadores gráficos, y que como implementadores aun nos falte mucho por aprender…. Pero nunca es tarde y todo suma. Te recomiendo dar un repaso al post y después regresar y comentar