() translation by (you can also view the original English article)
¿Sabes qué me encanta? Internet. En concreto, me encanta esa sensación cuando te topas con uno de esos maravillosos rincones de belleza con una tipografía particularmente agradable. ¡Hoy, pondremos la lupa a 10 excelentes ejemplos de tipografía web en una nueva serie mensual que busca traerte nueva inspiración tipográfica!
Tipografía Web Inspiradora, una serie mensual de Tuts+ de diseño web: A lo largo de mis viajes en la red, tomé nota de los ejemplos de sitios que me inspiran como diseñador. Al usar la fuente de manera innovadora, ingeniosa o simplemente maravillosa, estos sitios me han ayudado a mejorar mis propias habilidades tipográficas... y espero que resulten inspiradores para ti también. En esta serie, no solo haremos una lista de estos sitios... sino que investigaremos cómo y por qué funcionan.
Sin más preámbulos, voy a presentar la colección de este mes de 10 ejemplos de tipografía inspiradora. Si este mes no aparece tu favorito, ¡asegúrate de escribirlo abajo en la sección de comentarios!
The Design Cubicle
El blog de diseño de Brian Hoff utiliza una mezcla de Sentinel y Tungsten para el encabezado y otras cabeceras pequeñas, y FF Dagny Web Pro tanto para el cuerpo como para los títulos de los post. La combinación de estos dos estilos de letra increíblemente diferentes se combinan muy bien.
El encabezado se ve imponente y profesional, con las dos caras de Hoefler y Frere-Jones que se complementan maravillosamente.La forma concisa y vertical de Tungsten contrasta con el Sentinel en cursiva finamente detallado para crear un título que sea legible y agradable a la vista.
Respecto al cuerpo, no hay mucho que decir, y creo que así es como el diseñador lo quiere. Dagny es un tipo de letra maravilloso y práctico que funciona tanto con textos de cuerpos pequeños como con títulos más grandes y en negrita. No hay mucho más que decir, aparte de que es una maravillosa opción de fuente y que cualquiera que la vea definitivamente la apreciará.
Carsonified
Ah, sí. Ninguna publicación de tipografía estaría completa sin mencionar el rediseño de carsonified.com de Mike Kus en 2009. El sitio utiliza Cooper Black de gran tamaño, un tipo de letra cuyo poder real es evidente cuando se pone en un tamaño tan grande. Ves todos los detalles de la fuente y realmente te das cuenta de que tipo de empresa es Carsonified.
El resto las letras en la página se hace a un lado, con Helvetica apenas visible en la navegación, y Georgia para la copia del cuerpo y la mayoría de los títulos. No estoy seguro de qué tipo de letra es el que está usado para los títulos a la derecha de su página de inicio, pero puedo ver que sus detalles dibujados a mano contrastan a la perfección con el efecto de máquina de escribir de Cooper, como si fueran dos caras de la misma moneda.
Sin embargo, lo que creo que realmente une el diseño de este sitio son los colores. Cada página tiene un color de fondo único que funciona perfectamente con el bronceado del texto. Los colores de las páginas son muy diferentes entre si, pero todos comparten una sensación nostálgica y vibrante, una que funciona con el verde, con el azul e incluso con el naranja brillante. La belleza del color del texto es que tiene un contraste suficiente contra un fondo oscuro, así como contra un fondo muy luminoso.
Galpin Industries
El sitio web de Tyler Galpin es una maravillosa combinación de estilo industrial, detallado y emocional. Utiliza una amplia variedad de fuentes solo para el lema, algo que generalmente parece estúpido, pero aquí, Tyler elige las fuentes correctas para que funcione. Aunque parecen tan diferentes a simple vista, todas las tipografías muestran un único mensaje.
No querría insistir demasiado, pero diría que la característica que caracteriza este sitio es la gran cantidad de fuentes que se utilizan en él. Ahora estás viendo un bonito slab-serif, luego bajas un poquito y ¿qué es esto? ¿Un script? ¿Aquí? Tan solo echándole un vistazo puedes ver cuánto tiempo y esfuerzo se han dedicado a elegir la fuente que muchos mirarán solamente por unos pocos segundos.
Otro aspecto importante de este sitio es cómo se diseñó cada página, sin usar una plantilla de CMS predeterminada. Cada página se compone de aún más fuentes, lo que crea una regularidad a través de la irregularidad total en todo el sitio.
Hablemos de color. Galp.in tiene una de las paletas de colores más restringidas que he visto en la web últimamente. Un simple negro sobre blanco, con toques de amarillo y rojo para resaltar, y sí lo resalta. Es verdaderamente sorprendente lo que puede hacer un solo color para crear un contraste visual increíble en las manos adecuadas. Hermosa tipografía, hermosa página web.
Dawghouse Design Studio
El sitio web de Jan Cavan es muy singular. Confía mucho en la textura, y no tanto en el tipo. Entonces, ¿por qué hablamos de ella en este resumen? El tipo que ella tiene en su sitio es elegido con muy buen gusto. Por ejemplo, el título principal de cada página está configurado en un script de estilo retro y vibrante, una opción audaz para un diseño en negrita. Sin embargo, estas fuentes de "script retro" son difíciles de usar en la web... y este diseño evita cuidadosamente los clichés con una aplicación restringida.
Realmente no puedo decir por qué me gusta tanto este diseño, pero creo que tiene algo que ver con el color, ¿o tal vez con la textura? Espera, creo que lo tengo. Todos los elementos del diseño se combinan perfectamente, y ninguna área recibe más atención que otra.
Hay también una combinación de detalles sutiles. Los títulos de las entradas del blog están en mayúsculas, una decisión que funciona bien con la fuente serif en la que los inserta. Todos estos pequeños detalles en el diseño de Jan contribuyen al ambiente retro de la página.
Eight Hour Day
The Studio of Nathan Strandberg & Katie Kirk. " El meollo del asunto aquí es sutileza, y este maravilloso sitio web no decepciona. Entre el hermoso tipo y los colores vivos, es un verdadero placer visitar eighthourday.com. Todos los tipos de letra están elegidos con buen gusto, con un encabezado en un buen sans-serif y un subtítulo en script. Todo el texto está equilibrado; nada reivindica tu atención. Es un sitio web muy acogedor.
Como dije antes, el color juega un papel muy importante en la tipografía, así como en el diseño en su conjunto. Aquel rojo-naranja tan bonito se utiliza en todo el sitio, acompañado de otros colores suaves. En este sitio, parece que el tipo y el color están entretejidos. El tipo no funcionaría sin el color, y viceversa.
No hay nada especial en las tipografías por sí mismas. Claro, todavía estarían guay, pero no tan perfectas como ahora. Eso hace que examinar este sitio para descubrir cómo el tipo y el color interactúan entre sí resulte particularmente divertido.
A Night for Adoption
Un gran sitio web para una gran causa de Matthew Smith. Lo que más me encanta de este sitio es la atención al detalle. Mira esas cursivas sutiles en los títulos. Precioso. Admiro como usa Georgia para los encabezados. Normalmente se usa para el cuerpo, pero ponerlo en ese tamaño para el encabezado muestra los magníficos detalles de la tipografía old-style.
Fíjate en como la luz brilla sobre el texto en el encabezado. Son estos pequeños detalles que hacen un diseño genial.
Georgia se usa también para esos botones tan bonitos, con esa combinación de mayúsculas y pequeñas cursivas. Este diseño muestra muy bien cuanto puede ser flexible un tipo de letra, y me encanta.
También quiero subrayar que casi todo el texto en la página es texto real, incorporado a través de @font-face, así que enhorabuena a Mike Meyer.
Chirp
Este es otro diseño de Mike Kus con una tipografía muy singular. Como está basado esencialmente en imágenes, no puedo decir qué fuente se usa en este diseño, pero lo que puedo decir es que representa muy bien la imagen que Twitter emite como compañía; Es divertido, ligero, y un poco tonto.
En cuanto al color, tiene el típico azul de Twitter utilizado para la mayor parte del texto en todo el sitio, y funciona perfectamente. Hay también un rojo muy bonito que se usa para los adornos y los captadores de atención y que se mezcla muy bien con los otros colores en las páginas del sitio.
Lo que es sorprendente para mí es que, incluso si no mencionara a la compañía en todo momento, podrías decir que se trata de un sitio web de Twitter. Proyecta su marca única en cada nivel, con el tipo, el color, la ilustración e incluso la textura.Qué sitio más lindo.
Digital Labs
Slab-serif, sans-serif, serif, este sitio utiliza todo tipo de tipos y los utiliza bien. Es una buena opción dejar los slab-serifs para los títulos más grandes, lo que deja lo más pesado, por así decirlo, a la cursiva Times New Roman, un tipo de letra que normalmente no se usa en el diseño de la web, pero que si se usa correctamente funciona bien.
El pequeño cuerpo del texto lo deja para Tahoma, otra opción audaz que funciona bien en un tamaño pequeño. Apenas te das cuenta de que está ahí, y estoy seguro de que esto es lo que quería el diseñador.
Una vez más, no estoy seguro de qué se usa para los grandes títulos, aunque probablemente apostaría en Rockwell, una elección muy sólida.
En cuanto al color, este diseño emplea un esquema de luz en un fondo oscuro que no funciona con cuerpos de texto más largos, pero para un sitio con muchas imágenes como este, creo que funciona muy, pero que muy bien. Como de costumbre, se usa otro color para enfatizar, y en este caso, se trata de un naranja rico y agradable. Es una elección muy elegante, y la respeto mucho.
Art in my Coffee
Para "a collection of foamy awesomeness", del dúo dinámico Jina Bolton y Meagan Fisher, la palabra que viene a la mente es elegante. Todo el tipo es muy legible, y tiene colores que complementan perfectamente las deliciosas imágenes que presenta el sitio. Cuando miro este sitio web, me sorprende la calidad de los detalles en el diseño, desde el tipo bien establecido, hasta los colores inspirados en el café.
Estoy bastante seguro de que el logotipo y los subtítulos están en Archer, un slab-serif de Hoefler & Frere-Jones simple y fácil de leer.De nuevo, esto, junto con Georgia, crea una experiencia legible y con clase.
Otra cosa que me encanta en este sitio son los colores. Como obviamente se trata de un sitio temático del café, los colores no solo son adecuados, sino también hermosos. Por supuesto, el efecto probablemente se ha mejorado dado el número de imágenes color café en el sitio.
En general, un sitio web totalmente increíble de personas totalmente increíbles.
Iron to Iron
"Design e desarrollo maravilloso" se lee en Iron to Iron, y sí, es maravilloso. Todo el diseño parece orgulloso y de alguna forma regio, como si lo hubiera diseñado el diseñador de la corte.
En cuanto al tipo, este diseño es simplemente encantador. Ese texto oscurecido condensado es genial. Realmente no puedes leerlo, pero tampoco te presiona para que lo intentes.Es ese tipo de detalles y florituras que hacen que este sitio sea hermoso. En este caso, la forma de diagrama de Venn en el fondo del encabezado no tiene un fin práctico, pero está muy bonito y agrega otra dimensión a este diseño.
Los párrafos del cuerpo están en un práctico Georgia, y creo que les sirve bien, especialmente si consideras esos sans amplios (para los encabezados) a los que están debajo.
La transparencia de los colores se utiliza con un gran efecto, ya que la mayoría de los colores son niveles variables del mismo bronceado y azul verdoso.
Qué manera más maravillosa de terminar esta pequeña colección de hermosos sitios web.
Conclusión
Bueno, otra vez ha llegado ese momento. Hemos reído, llorado, pero hemos llegado juntos a la conclusión, y aquí tengo que dejarte. Como mencioné dije antes, si este mes no he hablado de tu favorito, ¡asegúrate de compartirlo abajo en la sección de comentarios! ¡Me aseguraré de revisarla para el post del próximo mes!
¡Lee más sobre la tipografía web en mi publicación Elegir la fuente correcta: Una guía práctica de tipografía en la web!
