27/10/14

Las 30 mejores fuentes gratis para web

¿Quieres dar una personalidad tipográfica a tu próximo sitio web? Mira estas increíbles fuentes gratis.

Existen varios métodos para encontrar fuentes en la web, incluyendo modelos basados en suscripciones como Typekit, WebINK, Fontdeck y Fontspring, que cuentan con bibliotecas de tipos de letra de calidad y se están haciendo cada vez más populares entre los diseñadores profesionales. Sin embargo, si tienes un presupuesto muy ajustado, o solo estás buscando fuentes para experimentar con un proyecto más pequeño, aquí te presento un montón de grandiosas fuentes web disponibles sin costo alguno.

Páginas web de fuentes

Sitios como Font Squirrel son bastante útiles, sin mencionar el servicio de uso libre Google Web Fonts y Adobe Edge Web Fonts. Desarrollado por Typekit, esto complementa la biblioteca GWF (Google Web Fonts) con varias fuentes web de código abierto propias de Adobe y se integra perfectamente con Edge y Muse. Pero aquí está una selección de las mejores en todo.

Ah, y también deberías leer las reglas para usar fuentes web que algunos diseñadores olvidan!

1. Rosario

Rosario es perfecta para usar en párrafos de texto
Rosario es descrita por el editor Omnibus como un clásico tipo de letra semi-serif, que ofrece un contraste débil y terminaciones lisas. Creemos que es una excelente adición sans-serif Humanista a tu arsenal tipográfico. Perfecta para usar en párrafos de texto, Rosario lleva el nombre de la ciudad donde vive el diseñador Héctor Gatti. La fuente también se ha beneficiado de adiciones TrueType de Adobe a través de su plataforma Edge Web Fonts.

2. Roboto Slab

La fuente se ve natural, ideal para una experiencia de lectura agradable.
Roboto Slab es una variante de la gran familia Roboto diseñada por Christian Robertson. La versión Slab llama la atención sobre todo con sus formas geométricas y curvas abiertas. Funciona igual de bien como una fuente para pantalla o para imprimir: la fuente se ve natural, ideal para una experiencia de lectura agradable.

3. Oswald

Oswald es una fantástica fuente para encabezados y subtítulos
Una de las primeras fuentes presentadas en la biblioteca Google's Web Fonts, Oswald se ha actualizado recientemente para incluir múltiples pesos (light, bold,etc), juegos de caracteres extendidos y mejor ajuste entre caracteres. La fuente es una reelaboración del estilo clásico Alternate Gothic sans-serif, creada por el diseñador Vernon Adams, y es una fantástica fuente para la visualización de encabezados y subtítulos.

4. Stalemate

Stalemate funciona bien como una fuente para destacar títulos.
Una maravillosa y pintoresca fuente creada por Jim Lyles, y se remonta a los orígines vintage. Esta fuente funciona bien para acentuar títulos o para visualización en pantallas, añadiendo un impacto "personal" instantáneo a la tipografía en tu página.

5. Crimson Text

Crimson Text es una fuente serif sólida, bien proporcionada
Esta fuente maravillosamente refinada es una excelente opción para "copys" (texto que se incluye en un material de comunicación) que requieren de la solidez y el impacto de una serif bien proporcionada. Diseñada por Sebastian Kosch en las mejores tradiciones de los tipos de letra de estilo antiguo, como Garamond, esta fuente es una opción sólida y fiable para muchas aplicaciones.

6. Gravitas One

Esta fuente web es perfecta para encabezados y pestañas
Diseñada por Riccardo De Franceschi, Gravitas One se inspira en el 'cara gorda del Reino Unido' - un tipo de publicidad pesada creada durante la revolución industrial en Inglaterra. Este es un tipo de letra que parecerá grande en un medio de gran escala; ideal para las cabeceras, pestañas y títulos llamativos.

7. Jura

Jura viene en cuatro diferentes tipos, así que servirá en casi cualquier lugar!
Daniel Johnson quería crear un alfabeto latino usando los mismos tipos de trazos y curvas como los glifos (signos) Kayah Li. Jura nació y se ha ampliado para incluir los glifos (signos) en los alfabetos cirílico y griego. Está disponible en light, book, medium y semibold.

8. League Gothic

The League of Moveable Type entrega otra fuente web estelar
Originalmente diseñada por Morris Fuller Benton para la American Type Founders Company en 1903, League Gothic se ha dado una nueva oportunidad de vida gracias a The League of Moveable Type. Gracias a una comisión de WND.com, ha sido revisada y actualizada con las contribuciones de Micah Rich, Tyler Finck y Dannci, que han contribuido con los glifos (signos) adicionales.

9. Fjord

Fjord es perfecta para contenido en la web
Fjord es un tipo de letra serif, diseñada originalmente pensando en los libros impresos, y particularmente destinada a los textos largos en pequeños tamaños de impresión. Esta fuente se verá genial para contenido largo en la web, ya que cuenta con una construcción robusta, remates prominentes, bajo contraste de modulación y los ascendentes y descendentes largos y elegantes con relación a la altura 'x'.

10. Amaranth

Prueba la fuente Amaranth y mira si funciona para tu sitio
La familia Amaranth tiene un amigable diseño vertical y cursivo con un ligero contraste y curvas distintivas. Con sus tres nuevos estilos, Amaranth funciona muy bien con casi cualquier tipo de texto. Esta es una fuente perfecta para que la uses en tus diseños y veas que funciona!

11. Poly

Esta fuente gratis para web fue diseñada originalmente para el idioma Wayuunaiki (guajiro o wayú)
Desarrollado como un proyecto de postgrado por el diseñador tipográfico argentino José Nicolás Silva Schwarzenberg, se seleccionó esta serif de medio contraste para la Bienal Iberoamericana de Diseño. Originalmente diseñado para la lengua indígena wayuunaiki, que requiere glifos de ancho, esta fuente web gratuita cuenta con ascendentes cortos y un gran ancho en x, por lo que es especialmente legible en tamaños pequeños.

12. Gentium Basic

La fuente web gratuita Gentium Basic fue diseñada como una tipografía multilingüe
Publicada bajo la Licencia de tipografía abierta de SIL, Victor Gaultney fue diseñada específicamente como una tipografía multilingüe con la incorporación de caracteres latinos, cirílicos y griegos y soporte avanzado en la versión Gentium plus. Gentium Basic y Gentium Book Basic están disponibles como fuentes libres en la web, pero se limitan a un conjunto de caracteres latinos.

13. Open Sans

Esta fuente web gratuita es nítida, limpia y optimizada para la web y los dispositivos móviles.
Diseñada por Steve Matteson, director de tipografía de Ascender Corp, esta sans serif humanista cuenta con una gran legibilidad incluso en tamaños pequeños y se ha optimizado tanto para la web como para interfaces móviles. Esta fuente web gratuita tiene un aire de verticalidad, con formas de letras abiertas y una apariencia neutral pero amigable que asegura versatilidad.

14. Ledger Regular

La fuente gratis Ledger tiene una excelente flexibilidad incluso en pantallas de baja resolución
Una tipografía de usos múltiples con un gran ancho en x, contraste fuerte de trazo, remates y terminales que contribuyen a una excelente legibilidad claramente definidos, la fuente web gratuita Ledger de Denis Masharov es particularmente eficaz para uso editorial- que trabajan igual de bien en una página impresa o en una pantalla de baja resolución.

15. Signika

La fuente web gratuita Signika fue diseñada pensando en claridad
Esta web font gratuita es una sans serif con bajo contraste y un gran ancho en x, cualidades que se traducen bien en pantalla. Su conjunto de caracteres anchos incluye versalitas, pictogramas y flechas.

16. Josefin Slab

El ancho en x de este tipo de letra gratuito de la web tiene la mitad de la altura de las mayúsculas.
Sobre la base de la tendencia de los tipos de letra con estilo geométrico de 1930 y con un poco de sabor escandinavo añadido, la slab serif de Santiago Orozco trae un estilo distintivo de 'máquina de escribir' para su contraparte sans serif, y esta fuente web gratuita es quizás las más adecuada para mostrar su uso. Inusualmente, el ancho en x de Josefin Slab tiene la mitad de la altura de las mayúsculas.

17. Forum

Esta fuente gratis de la web es particularmente eficaz para todos los titulares y encabezados en mayúscula.
Como su nombre lo indica, esta serif tiene un gran estilo romano antiguo que es particularmente distintivo como fuente de visualización en pantalla para los titulares en mayúsculas, aunque funciona también como una fuente para textos con tamaños un poco más grandes. Las elegantes proporciones de esta fuente web gratuita son una reminiscencia de la arquitectura clásica, con arcos semicirculares, cornizas horizontales y columnas verticales.

18. Tikal Sans

Esta fuente gratis de la web toma su nombre de la ciudad principal de los Mayas.
Tomando su nombre de la ciudad más prominente de los mayas, los afilados trazos característicos de la fuente Tikal Sans están influenciados por los glifos que fueron utilizados por la civilización de América del Sur. La fundación Latinotype dio a esta fuente web un gran y contemporáneo aire de ancho en x, tanto para la legibilidad y el atractivo de usar, mientras que sus múltiples pesos garantizan la máxima versatilidad.

Nota: Actualmente sólo Medium y Medium Italic están disponibles de forma gratuita.

19. Arvo

Otro excelente tipo de letra que te encantará.
Igualmente adecuada para la impresión y la web, la geométrica slab serif de Anton Koovit está disponible en Romana, Cursiva, Negrita romana y Negrita cursiva. Aunque esta fuente libre de la web tiene un ancho un ancho de trazo casi uniforme, el muy ligero contraste de Arvo añade a sus caracteres gran legibilidad en la pantalla.

20. Bevan

Las fuentes web ultra-bold casi nunca se traducen a las pantallas, pero esta si lo hace.
Esta es la reinvención de Vernon Adams de una tradicional slab serif creada por Heinrich Jost en 1930. Las formas de las letras han sido digitalizadas, remodeladas y optimizadas para la web, para asegurar que Bevan funcione muy bien como una fuente de visualización ultra-negrita que se adapte a los navegadores modernos.

21. Old Standard TT

Esta fuente web tiene un gran aire de "documento científico".
Revisitando el estilo de la fuente serif Moderna (clasicista) que se había extendido a finales del siglo 19 y principios del siglo 20, este estilo es muy adecuado para dar estilo y patrimonio a determinados tipos de contenidos, como artículos científicos o para establecer un tipo de letra Griego o Cirílico. El nobre contrarresta el 'Nuevo Estándar' (Obyknovennaya Novaya) utilizado en la mayor parte de la tipografía soviética.

22. Kreon

Se trata de una fuente web llena de personalidad que es ideal para blogs
Ideal para revistas y sitios web de noticias, así como los blogs, esta fuente de Julia Petretta tiene un ligero aire de slab serif, pero la forma de sus letras equilibradas y de bajo contraste transmiten considerablemente más personalidad de lo que una fuente web de estilo máquina de escribir más neutral podría transmitir, por lo que es ideal para los titulares y encabezados. Sans serif y versiones en cursiva están actualmente en desarrollo.

23. Droid Sans

La fuente web Droid Sans es ideal para pantallas de móviles, de ahí el nombre.
Como un tipo de letra centrado en lo digital del director de tipografía Steve Matteson de Ascender Corp, Droid Sans ha sido optimizada para una máxima legibilidad en tamaños pequeños para interfaces de usuario- en particular los menús en pantallas de teléfonos móviles (de ahí la referencia al nombre Android). Cuenta con una tensión vertical con formas de letras abiertas y equilibra una sensación neutra con un toque agradable.

24. Italiana

Esta elegante fuente web añade un toque de clase a cualquier sitio.
Otra fuente web adaptada para su uso en titulares de periódicos o revistas, lo que la hace útil para llevar una marca a la perfección a través de medios impresos y digitales. El diseñador con sede en México Santiago Orozco, se inspiró en la caligrafía tradicional italiana, y en consecuencia es muy adecuada para proyectos que necesitan un toque de elegancia y estilo continental.

25. Vollkorn

El trabajo duro en la fuente web Vollkorn es el primer intento de su diseñador como un tipo de letra.
Teniendo en cuenta que es el primer intento de Friedrich Althausen en diseño tipográfico, esta serif multipropósito (el nombre en alemán significa 'integral') es un logro considerable y ha sido descargada miles de veces. Sus gruesos trazos de pie bien definidos le dan la confianza y energía que hacen que sea igualmente eficaz en grandes tamaños para titulares o para textos más grandes.

26. Actor

La fuente web gratuita Actor tiene un 6 y un 9 muy distintivos.
Como Poly, esta fuente web gratuita surgió de un proyecto universitario- esta vez por Thomas Junold mientras estudiaba en Aachen Universidad de Ciencias Aplicadas de Karl-Friedrich (Kai) Oetzbach. Tiene un característico ancho en x que exige un espacio generoso entre líneas, y también cuenta con figuras de estilo antiguo, con un 6 y un 9 particularmente únicos.

27. Lato

Esta fuente web gratuita está publicada bajo la licencia Open Font
Como una familia sans serif creada por el diseñador polaco Lukasz Dziedzic, Lato se publica bajo la licencia de código abierto Open Font.

28. Average

Average, un tipo de letra neutral que puedes encontrar en la web.
Como su nombre lo indica, este tipo de letra creada por el diseñador argentino Eduardo Tunni consta de letras relativamente neutrales en términos de estructura y proporción, y viene en dos versiones: sans serif y serif que se complementan muy bien. Funciona bastante bien si se usa como una fuente de texto o titulares.

29. EB Garamond

Esta variación del tipo de letra Garamond es una gran fuente web gratuita.
Desde sus raíces en el siglo 16, la tipografía serif Garamond se ha convertido en un verdadero icono tipográfico. Este proyecto de código abierto de Georg Duffner busca llevar la esencia de la obra maestra de Claude Garamond a la web. El 'EB' significa Egenolff-Berner, ya que la fuente web se basa en un espécimen creado por Conrad Berner en la oficina de impresión Egenolff.

30. Ubuntu

Ubuntu es un tipo de letra distintivo de la web- y de código abierto, por supuesto.
Creada por el fundador londinense Dalton Maag, esta distintiva fuente sans serif fue desarrollada con fondos de Canonical Ltd en beneficio de la comunidad del software libre en general, y anima a los usuarios a modificar, mejorar y compartir la fuente web. Ubuntu está diseñada para transmitir la personalidad tanto en escritorio como en pantallas móviles.

13/10/14

6 pasos para crear un excelente sitio web para portafolio online

ProSite Portfolio por Adam Jesberger
Como el jefe de diseño de Behance, pocas personas son mejores para identificar una gran portafolio que Matías Corea. Al ser jurado en concursos en busca de nuevos talentos y haber realizado investigación en diseño para Behance, ha revisado miles de portafolios creativos en la web.

Para tener una idea sobre lo que funciona (y lo que no) cuando se trata de exhibir el trabajo creativo en línea, Matías comparte con nosotros sus observaciones y estos seis sencillos consejos para construir un excelente portafolio online:

1. Escoge tus mejores trabajos

Tómate el tiempo para mirar todos tus trabajos y elegir cuidadosamente las piezas correctas para tu portafolio. Un consejo es mostrar siempre el tipo de trabajo que quieres hacer en el futuro. Muestra sólo los proyectos de los que estás realmente orgulloso, los que se ven mejor y en los que usaste los mejores materiales. Escoge al menos cinco proyectos para que puedas mostrar la variedad de tu trabajo, pero se selectivo. Recuerda que siempre es mejor tener un portafolio con pocos proyectos que son impresionantes en lugar de mostrar decenas de proyectos que están simplemente bien. La calidad de tu portafolio es sólo tan bueno como tu proyecto más débil.
Siempre muestra el tipo de trabajo que quieres hacer en el futuro.

2. Usa imágenes llamativas y comparte la historia de cada trabajo

Ahora que has editado el trabajo que deseas mostrar, empieza a analizar cada proyecto y pensar en cómo puedes presentarlo mejor. A los visitantes les gusta saber la historia detrás de tu obra terminada, así que piensa en la presentación del proceso - desde el concepto inicial y los primeros bocetos hasta el producto final. Una buena regla general es presentar toda la pieza primero seguida de imágenes más detalladas para mostrar la precisión de tu arte. La fotografía estilizada es un buen toque, siempre y cuando no se distraiga de la obra misma.


Matías: "En primer lugar, contextualiza el proyecto con un breve párrafo. Añade un título que tenga sentido y que de una idea de lo que se trata el proyecto. Procura que sea una lectura rápida - lo necesario para que el usuario le eche un vistazo y entienda de qué se trata. El título, un breve párrafo y la primera imagen debe llamar la atención lo suficiente como para hacer que la gente quiera ver todo el proyecto".

NOVUM 11/11 por Paperlux

Written Portraits por Van Wanten Etcetera

 Citroën DS Line Book por Laurent Nivalle

Una vez que hayas decidido cómo cuadrar y explicar tu proyecto, enfócate en buscar imágenes perfectas u otra multimedia para presentar el proyecto, empezando por una imagen de portada. "Si estás usando imágenes de portada para presentar tus proyectos en una galería, es importante que esa imagen esté hecha a mano", dice Matías. "La cubierta no tiene que ser exactamente una imagen del interior de tu proyecto - puedes personalizar el diseño de la cubierta si el proyecto lo requiere. Por ejemplo, sólo quieres mostrar texto. Unifica el aspecto de tus imágenes de portada tanto como sea posible".



3. Mantén el diseño del sitio web simple y deja que los trabajos sean el centro de atención.

Cuando diseñas un portafolio, quieres un sitio web que sea sencillo. Quieres que el contenido sea el punto focal en lugar de un diseño que distraiga.

"Tu sitio web es un vehículo para que la gente encuentre tu trabajo", dice Matías. "No quieres que el sitio web sea demasiado llamativo o poco convencional - que hará que sea más difícil el acceso al contenido. No es que yo prefiera diseños minimalistas - es cuestión de crear el entorno visual que necesitas para mostrar tu trabajo con mayor eficacia. La simplicidad de la interfaz y el diseño visual de tu sitio web impulsará tu trabajo a la superficie, donde debe estar".

Esto significa una navegación sencilla y sólo la cantidad necesaria de secciones en el sitio web. "¿Tener una galería de trabajos y una página de contacto? Eso un gran sitio web de portafolio online".
La simplicidad en la interfaz y el diseño visual de tu sitio web impulsará tu trabajo a la superficie.
Cuando se trata de la personalización, Matías aconseja que sea algo sencillo - escoge una fuente y mantén las cosas consistentes. "Usar una fuente y apegarse a ella te hará la vida más fácil. Elige un color para cada estado de enlace en el sitio".


 iancrombie.net hecho en ProSite

4. Elabora una biografía que exprese tu proceso y/o punto de vista.

Personaliza tu página "Acerca de" para contar tu historia, no sólo una lista de tus trabajos anteriores. Aquí están algunos indicadores claves para reinventar tu currículum como una biografía convincente:

  • Comparte un punto de vista. Como creativo, tienes tu propia perspectiva en tu industria y el mundo creativo. Construye tu biografía con tu propio enfoque creativo.
  • Crea una historia de origen. Comparte la historia de fondo de cómo desarrollaste tu punto de vista. ¿Tuviste una experiencia cuando niño o temprano en tu carrera que te lleva a perseguir una pasión o seguir una dirección creativa?
  • Da a conocer tu experiencia usando detalles exteriores. Asegura tu biografía con detalles que demuestren tus conexiones a través del mundo creativo. Piensa en clientes importantes, prensa o publicaciones.
  • Se accesible. Redondea tu historia con algunas curiosidades personales. ¿Tienes alguna afición o interés que te obsesione? Comparte algunos datos para mantener tu biografía accesible y relevante.
Personaliza tu página "Acerca de" para contar tu historia, no sólo una lista de tus trabajos anteriores.

5.  Añade elementos distintivos (por ejemplo, premios, tu blog), y difunde tu trabajo.

Ahora que tienes todo lo necesario, considera otros elementos distintivos que se pueden incluir para darte una ventaja.

  • Menciona premios. Si tienes menciones en prensa o premios, inclúyelos.
  • Invita a contactarte. Si estás buscando para ser freelance o un contrato laboral, considera usar un formulario de contacto en tu portafolio. Los formularios de Wufoo o JotForm te permiten personalizar los campos para que puedas pedir toda la información que necesitas primero, al igual que las expectativas de presupuesto y línea de tiempo.
  • Haz que compartir sea fácil. Incluyendo botones para compartir tu trabajo en las redes sociales (por ejemplo, Twitter, Facebook, Google+) puede ayudarte a traer más exposición y más público a tu sitio. Promueve tu trabajo en las redes sociales cada vez que agregues nuevos proyectos para llamar la atención sobre el trabajo actualizado así como tu portafolio en general.
  • Incluye tu blog. Si tienes un blog que actualizas con frecuencia y que también representa donde te encuentras profesionalmente o agrega valor a lo que eres, inclúyelo. Matías aconseja: "Un blog tiene que añadir algo a tu sitio - de lo contrario, olvídate de él."

6. Mantén tu portafolio actualizado.

Ten en cuenta que tu trabajo no termina sólo con la creación de un excelente portafolio. También querrás actualizarlo periódicamente. Los mejores portafolios nunca están estáticos. A medida que creas nuevos y mejores trabajos, asegúrate de hacer adiciones para mostrar tus últimos proyectos. siempre con el mismo enfoque.

Por supuesto, te invito a que explores mi portafolio en Behance y crees tu portafolio en línea.

Lo  vi en 99u.com
 

©2012 Blog de diseño gráfico y artes creativas en Colombia y en el mundo | Gurú Gráfico | Theme diseñado por chicoloco123 para Fuutec.com | Ir arriba ↑