Cómo hacer que su tipo sea más atractivo en la Web
No es raro que un diseñador en el mundo de hoy preste poca atención a cómo se presenta el tipo, especialmente con la configuración predeterminada tan conveniente de las etiquetas de encabezado y las fuentes web seguras que se encuentran universalmente en la web.
Si nosotros, como diseñadores interactivos, podemos tomarnos un poco más de tiempo en lo que respecta a la tipografía, los resultados mostrarán un diseño único y bien pensado que se opondrá a la creación de "carrera de la fábrica".
Existe una buena posibilidad de que la mayoría de los diseñadores y diseños que admira muestren buenos ejemplos de tipografía.
Te mostraré algunos pasos que tomo para ajustar el tipo de conjunto para que sean más atractivos que los escenarios predeterminados de las etiquetas H1 de 24px junto con 13px configurados en Times New Roman.
No te conformes con la configuración predeterminada, todos lo hacen.
Aquí tenemos la apariencia siempre común de un encabezado junto con un fragmento de copia corporal a seguir. Esto no te atrapa ni se distingue del resto de las muestras, ¿verdad? Entonces, para hacer que la muestra de texto sea más atractiva visualmente, primero vamos a hacer algunos cambios con nuestra selección de fuentes.
Elija una fuente que tendrá más peso visual con su título
Aunque la selección de fuente no es exactamente "tipografía", de hecho es un componente por excelencia para ayudar a que el tipo en una página se distinga de otros elementos. Con la aparición de @ font-face, hay una enorme cantidad de opciones disponibles para los diseñadores en cualquier lugar.
Aquí he usado una fuente Extra Condensed Gothic Style que se puede encontrar fácilmente en un sitio de fuente libre como FontSquirrel.com. Si nos detenemos y pensamos en ello, el nombre "Condensado" debería significar algo, porque de hecho es más denso que su familiar de estilo de libro normal, que es exactamente lo que queremos de un titular: algo que atrae al usuario y verdaderamente se distingue de la copia del cuerpo. Ciertamente tiene éxito en captar su atención mejor que el original, pero hay algunas cosas que podemos hacer para mejorar aún más el texto.
Hazlo más atractivo con dos líneas de CSS
El cambio inmediato está en las letras; ahora están todas en mayúscula, pero ahora también tienen interletraje negativo entre cada una de las letras (una técnica heredada del diseño de periódico).
Ambas características se pueden lograr fácilmente a través de CSS, { text-transform: mayúscula; y espaciado entre letras: -Xpx; }. Al hacer que estas dos líneas valgan la pena en la codificación de los cambios, se obtiene una mejora importante en el peso visual, especialmente con respecto al original.
Haga algunos pequeños retoques
En el siguiente paso, la fuente utilizada en el párrafo de cuerpo ha cambiado a un sans-serif más limpio, que se complementa mejor con el texto del titular. Estamos cada vez más cerca de un diseño mucho más atractivo visualmente, pero hay algunos cambios que podemos hacer para limpiarlo aún más.
Como muestran los indicadores verdes, hay márgenes desiguales y lo que a los tipógrafos les gusta llamar "huérfanos". Esta es una sola palabra que cae en la última línea del párrafo. Crea un peso muy desigual visualmente en comparación con el resto del texto, y este problema puede resolverse fácilmente volviendo a redactar el texto ligeramente.
Cuando se trata de márgenes, no hay una regla de que todos deben ser iguales. Sin embargo, si está comenzando una carrera de diseño web joven, es una buena práctica tener los mismos márgenes hasta que experimente y aprenda técnicas que le permitan extenderse más allá de las pautas de composición tipográfica y aun así lograr su objetivo visualmente.
Después de crear un lienzo visual más equilibrado eliminando al huérfano y ajustando los márgenes, puede ver el resultado final, una muestra del tipo bien establecida que sea cómoda donde se ubica.
¿Cuáles son tus mejores consejos para la tipografía web? Háganos saber en los comentarios!