Advertisement
  1. Web Design
  2. Fonts

Las 10 mejores fuentes web que lucen geniales en tamaños pequeños

by
Read Time:9 minsLanguages:

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

No es especialmente difícil encontrar fuentes web que sean bellas. Realizando una búsqueda rápida seguramente podrás encontrar una gran cantidad de tipografías atractivas que complementen el aspecto y los mensajes de tu sitio web.

Sin embargo, muchas de estas fuentes tienden a ser utilizadas en casos muy específicos. Por ejemplo, una fuente ancha podría ser perfecta para un texto de encabezado, pero no sería conveniente para el cuerpo de tu página. Asimismo, ciertas fuentes decorativas son solo apropiadas para usos limitados, tal vez no más de una o dos palabras de tamaño completo dentro de un elemento de diseño.

Con esto en mente, me gustaría presentarte una selección de las mejores fuentes que ofrecen una mayor versatilidad. Si bien estas van más allá de los estilos estándar, aún así resultarán legibles en tamaños pequeños. Todas ellas están disponibles con tu suscripción a Envato Elements, hogar de una biblioteca cada vez más grande de más de 2500 fuentes web y mucho más.

Envato Elements ever-growing library of 2500 web fonts and a whole lot moreEnvato Elements ever-growing library of 2500 web fonts and a whole lot moreEnvato Elements ever-growing library of 2500 web fonts and a whole lot more
La biblioteca de Envato Elements te ofrece más de 2500 fuentes web y mucho más

Primero, echémosle un vistazo a algunas áreas donde estas fuentes podrían destacar. A continuación, hablaremos sobre los conocimientos básicos para implementarlas en tu sitio web.

Pequeñas fuentes, grandes posibilidades

Para tener un sitio web bien diseñado deberás ocuparte de todos los detalles. Y si bien, a menudo los grandes elementos de diseño captan nuestra atención de inmediato, son las pequeñas cosas las que ciertamente no deberían quedar en el olvido. Es aquí donde los usuarios se verán obligados a trabajar por un rato.

Las fuentes en este artículo serán útiles tanto para los detalles importantes (encabezados, zonas destacadas) y los no tan importantes (botones, citas y subtítulos). Esto es una buena noticia para los diseñadores, ya que les brinda el potencial de crear proyectos con mayor uniformidad.

Esto significa, por ejemplo, que podrás añadir más acentos elegantes que reflejen tu marca en varias áreas de tu sitio web. Tendrás la opción de usar fuentes elegantes tanto en el pie de página de tu sitio, como en el encabezado.

Por supuesto, la legibilidad es un factor de suma importancia. Así que asegúrate de probar tus diseños y realizar los ajustes necesarios.

Cómo usar una fuente web personalizada

Puedes implementar una fuente web personalizada en tu sitio con solo unos cuantos pasos. Sin embargo, te aviso que para lograrlo deberás trabajar con las hojas de estilos en cascada (CSS).

Primero, deberás asegurarte de que cualquier fuente que descargues incluya una versión específicamente creada para la web. Envato Elements te facilitará este proceso con sus útiles opciones de filtros en la barra lateral. Por lo tanto, podrás encontrar todas las fuentes que pueden usarse en tamaños pequeños y que incluyen una versión web con solo unos clics.

Estos son los pasos:

1. Encuentra una fuente que te guste y descárgala en tu dispositivo.

2. Descomprime el paquete de fuentes que hayas descargado (recuerda buscar fuentes específicas para web) y ubica los archivos en un fólder en el directorio raíz de tu sitio web. En mi caso solo lo llamé “fuentes”.

3. Sube las fuentes a tu servidor web, manteniendo la estructura del directorio que acabas de crear anteriormente.

4. Luego, añade cada fuente usando la propiedad CSS @font-face de la siguiente manera:

5. Desde allí, puedes llamar a tu fuente en cualquier lugar dentro del archivo CSS de tu sitio. Por ejemplo, si quieres usarlo con tu etiqueta H1, puedes añadir algo como esto:

Si surge algún problema, utiliza las herramientas de inspección de tu navegador para verificar que la fuente se haya instalado correctamente.

Descarga estas fuentes web versátiles

Ahora que ya sabes el cómo y el por qué, ¡es momento de conocer algunas fuentes! Esta es una exclusiva selección de que podrás usar para mejorar tus proyectos web. Y ya que nos vamos a enfocar en los tamaños pequeños, también te daré algunas ideas de dónde cada una podría funcionar mejor.

Fiana - Tipografía elegante

“Fiona” te ofrece un elegante estilo clásico que podrás usar casi en cualquier lugar. Sería perfecta para subtítulos dentro del contenido o incluso barras laterales.

Fiona - An Elegant TypefaceFiona - An Elegant TypefaceFiona - An Elegant Typeface
Fiana - Tipografía elegante

Millefleur | Dúo de fuentes sans serif

Esta selección es un paquete con 2 fuentes individuales pero relacionadas: Mille y Fleur. Mille es una llamativa fuente tradicional de fácil lectura, mientras que Fleur tiene algunas letras de formas con estilos originales.

Millefleur Sans Serif Font DuoMillefleur Sans Serif Font DuoMillefleur Sans Serif Font Duo
Millefleur | Dúo de fuentes sans serif

Numhead - Tipografía

“Numhead” tiene un aspecto técnico e industrial y viene en 3 pesos (ligero, regular y negrita). Cada uno es bastante claro, lo que te dará libertad para usar la fuente como desees. Incluso podrías considerar utilizarla en pasajes cortos en cuerpo del texto que desees resaltar.

Numhead TypefaceNumhead TypefaceNumhead Typeface
Numhead - Tipografía

Bw Modelica Condensed - Paquete de fuentes 

Hablando de versatilidad, “Bw Modelica Condensed” fue creada para utilizarla en cualquier sitio web. La fuente viene en 4 tamaños, cada uno con 8 pesos diferentes. Es todo lo que necesitarás para mezclar y combinar con encabezados, logos e incluso el texto cuerpo. 

Bw Modelica Condensed font familyBw Modelica Condensed font familyBw Modelica Condensed font family
Bw Modelica Condensed - Paquete de fuentes 

Borderland - Fuente

Si bien las fuentes manuscritas son muy populares estos días, también pueden ser muy difíciles de leer. Este no es el caso con “Borderland”, ya que cada letra es clara y legible. Podrás usar esta fuente para acentos diferentes estilos.

Borderland FontBorderland FontBorderland Font
Borderland - Fuente

Riley - Tipografía moderna

Con un estilo detallado y vintage, “Riley” le dará un toque de clase a tu proyecto. Además, el estilo original de su puntuación permitirá que puedas usarla para citas y otros elementos destacados.

Riley - A Modern TypefaceRiley - A Modern TypefaceRiley - A Modern Typeface
Riley - Tipografía moderna

Little Hearts - Fuente

“Little Hearts” es una tipografía divertida y casual, perfecta para sitios enfocados en las artesanías y los niños. Los pictogramas incluidos llevan a esta fuente a un nuevo nivel, con ilustraciones juguetonas que podrás usar para decorar áreas pequeñas y grandes.

Little Hearts FontLittle Hearts FontLittle Hearts Font
Little Hearts - Fuente

Solente

Esta fuente art deco recuerda a aquellas fuentes que se usaron a principios del siglo XX. Las ligaduras son increíblemente detalladas, además de que el paquete también incluye un paquete de alternativas. Aún así, esta fuente será la más efectiva en fragmentos cortos de texto, como subtítulos o botones de llamada a la acción.

SolenteSolenteSolente
Solente

Manurewah

Una tipografía cuadrada y ultramoderna, “Manurewah” ofrece un aspecto tanto sofisticado como futurista. Además, su uso de de letras mayúsculas y minúsculas también permitirá conseguir combinaciones originales. Puedes usar esta fuente en mayúsculas para títulos grandes de una sola palabra, con textos de mayúsculas y minúsculas para que los pasajes largos se puedan leer más fácilmente.

ManurewahManurewahManurewah
Manurewah

Rodian - Fuente serif

Con un aspecto claro y sencillo, la fuente “Rodian” es una excelente opción para llamar la atención. Encontrarás dos estilos y fuentes de diferentes pesos, siendo la más notoria la variante stencil, la cual destaca gracias a su originalidad si bien mantiene la legibilidad. Podrás usarla en cualquier proyecto que necesite un toque de personalidad.

Rodian SerifRodian SerifRodian Serif
Rodian - Fuente serif

Small or Mighty

Las fuentes originales que logran destacar tanto en tamaños pequeños como grandes son poco comunes. Casi siempre tendrás que limitarte a utilizar una fuente más decorativa de tamaño grande, y optar por una fuente un poco más ordinaria para los textos pequeños.

Sin embargo, esta colección de las mejores fuentes web para el trabajo que te he mostrado hoy te ayudará a evitar muchos de estos inconvenientes. Si bien cada fuente tiene sus limitaciones específicas, cada una ofrece una amplia gama de usos potenciales. Esto abre la puerta a todos a un mundo de nuevas posibilidades de diseño. 

¡Siéntete libre de experimentar con las fuentes que viste arriba y descubre cómo pueden embellecer tu sitio web!

Más ideas de fuentes web en Tuts+

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.