Diseño de páginas web en Bilbao y Bizkaia

5 webs donde descargar fuentes tipográficas gratis

  • 0
5 webs donde descargar fuentes tipográficas gratis

5 webs donde descargar fuentes tipográficas gratis

Es el deber todo diseñador gráfico disponer de una amplia gama de fuentes tipográficas donde echar mano. Esto, que es fundamental para la creación de logotipos y el material impreso publicitario, vale también para la maquetación de páginas web. Porque diseñar tus páginas con una tipografía clásica como Arial, Times New Roman o Comic Sans da mala imagen, la de un diseñador incompetente que no cuida el acabado final de sus trabajos y que no conoce las diferencias entre una fuente con serifas o sin serifas, caligráfica, elegante, decorativa o en versalitas. Por supuesto, no basta con limitarse a las fuentes que te vienen instaladas con Windows por defecto. Debemos buscar la tipografía que mejor se adapte a los valores que queremos transmitir: rigor, fiabilidad, creatividad, ambiente lúdico y relajado, etc.

Cada fuente tipográfica tiene una personalidad y representa unos valores, de ahí la importancia de su elección

Aquí os presento 5 páginas web donde podéis descargar fuentes tipográficas gratis (y otras muchas cosas más):

1-Font Squirrel

Font Squirrel

La web de la simpática ardilla es una de mis preferidas. A decir verdad, no es la que mayor número de fuentes tipográficas alberga en su archivo, pero su interfaz amigable y sus múltiples opciones hacen de ella un sitio ideal, casi obligado, para guardar en nuestros favoritos. Cuenta con un buscador de fuentes y luego ofrece la posibilidad de buscar por etiquetas o tags, además de otras categorías como recientes o más populares.

Una utilidad que me gusta mucho de Font Squirrel es su Webfont Generator, donde podemos subir una fuente de nuestro disco duro en TTF (TrueType Font) u OTF (OpenType Font), las más usadas en el entorno Windows, y él nos la convierte a otros formatos para web como EOT, WOFF y SVG. Esto es especialmente útil cuando utilizas la propiedad de CSS 3 @font-face.

Ahora también incluye un Identificador de Fuentes a imitación del ínclito WhatTheFont. Asimismo, dispone de un blog y de un foro donde resolver dudas; ambos, por supuesto, en inglés.

Quizás su mayor defecto y lo único que se echa en falta es el típico visor para poder escribir el texto deseado y mostrarlo en las diferentes tipografías a medida que van cargando, algo que siempre ayuda a hacerse una mejor idea de la composición que tenemos en la cabeza.

Sus fuentes son 100% gratis para uso comercial, como recalcan en su logo.

2-Megafuentes

Megafuentes

Funciona muy parecido a Font Squirrel, aunque tiene menos utilidades. La búsqueda es, igualmente, por etiquetas, y tiene una categoría de novedades y unas fuentes destacadas en primera página. La ventaja es que está en español. Le falta, asimismo, el visor. Las fuentes son TrueType y OpenType.

3-Urbanfonts

Urbanfonts

Esta web es muy completa, y su catálogo de fuentes es de lo más heterogéneo y diverso que se puede encontrar. Las tipografías gratuitas (también tiene de pago, las premium) están ordenadas alfabéticamente y también por categorías (Fuentes nuevas, Nuestras favoritas, Top 100), básicas, script, display/decorativas, no latinas y miscelánea. A diferencia de las anteriores páginas, Urbanfonts sí cuenta con un visor de texto, y además muy completo, pues te deja cambiar el color del texto y el del fondo, así como aumentar o disminuir el cuerpo de letra.

Urbanfonts no sólo permite descargar fuentes tipográficas, sino también un variado repertorio de dingbats (símbolos) y vectores. Otra web que tampoco debería faltar en nuestros favoritos.

4-Font River

Font River

Es muy similar a las anteriores. En su header muestra tres secciones destacadas con Fuentes nuevas, Lo más popular y al Azar. Más abajo establece una serie de categorías: básico, símbolos, fantasía, extranjero, gótico, fiestas, escritura y tecno. No tiene visor de texto, pero sí mapa de caracteres. Presume de tener 20.000 fuentes  y dingbats descargables para Windows y Mac. Permite descargar (en TTF) y donar al autor. Está en varios idiomas; entre ellos, español.

Sus fuentes son gratuitas para uso personal.

5-1001 Free Fonts

1001 Free Fonts

Como su nombre indica, esta web posee una gran colección de fuentes. Están ordenadas alfabéticamente y por etiquetas. Al igual que Urbanfonts, cuenta con un visor de texto, aunque menos sofisticado (éste no permite, por ejemplo, cambiar el color de fondo). En cada fuente se te informa de si es gratuita, o sólo para uso personal (en cuyo caso puedes adquirir la licencia comercial), de dominio público, etc. También permite hacer una donación al diseñador, cosa que seguro te agradecerá.

Y por último, un extra que no puede faltar en ninguna lista:

6-Google Fonts

Google Fonts

Tanto si eres diseñador gráfico como desarrollador web, Google Fonts te va a interesar. Aquí puedes encontrar una gran variedad de tipografías amigables con el navegador. Están divididas en 5 categorías básicas: serif, sans serif, display, handwriting y monospace, que puedes seleccionar o deseleccionar a tu antojo para afinar la búsqueda. También puedes elegir el lenguaje (incluye alfabetos como el cirílico, el árabe o el griego) y ajustar el criterio de búsqueda por trending, popular, fecha de publicación u orden alfabético.

Si pulsas en See the specimen, al pie de cada tipografía, te conduce a una página donde te muestra el diseñador, una descripción de la fuente, sus caracteres, un gráfico con los países donde más se usa, una lista con tipografías similares y un recuadro donde puedes escribir el texto para verlo con dicha fuente y al tamaño en píxeles que quieras.

Aparte, cuando seleccionas una fuente se te abre una pestaña en la parte inferior de la pantalla. Si la despliegas, te ofrece la opción de descargártela totalmente gratis en un zip y el código para embeberla en tu sitio web que debes insertar en el <head>, además del CSS con el font-family. La línea de código sería algo tal que así:

<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">

También puedes importarla como un estilo y customizarla (regular, bold):

<style>
@import url('https://fonts.googleapis.com/css?family=Caveat');
</style>

Google Fonts es una alternativa a @font-face para usar tipografías en páginas web sin necesidad siquiera de instalarlas y subirlas a tu FTP, aunque ten en cuenta que al solicitar un request a la biblioteca de Google puede aumentar el tiempo de carga. En relación con esto, en Load Time te indica si dicha fuente carga rápido o lento.


  • 1
5 extensiones de Google Chrome muy recomendables

5 extensiones de Google Chrome muy recomendables

En un post reciente os hablé de las que, en mi opinión, son las 5 mejores extensiones de Google Chrome para SEO. Para seguir y completar dicho artículo, hoy os hablaré de otras 5 extensiones muy recomendables que mejorarán vuestra experiencia de navegación y que os facilitarán algunos trabajos, sobre todo relacionados con el diseño gráfico y el desarrollo web.

Cómo instalar y desinstalar las extensiones de Google Chrome

La mayoría de vosotros ya lo sabréis, pero para quien no lo sepa aún, para gestionar las extensiones de Chrome tenéis que hacer clic sobre el icono de los tres puntos verticales que aparece a la derecha de la barra de navegación (personaliza y controla Google Chrome), luego ir a Más herramientas y Extensiones. También podéis llegar a ese panel a través del atajo o comando: chrome://extensions/.

Extensiones Google Chrome

Una vez allí, se os mostrarán todas las extensiones que tengáis instaladas. Si queréis eliminar alguna sólo tenéis que hacer clic en el icono de la papelera y automáticamente la extensión se desinstalará. Aparte, también tenéis la opción, menos drástica, de deshabilitar las extensiones que menos uséis, y a partir de ese momento desaparecerán de vuestra toolbar. Las extensiones se pueden habilitar y deshabilitar en cualquier momento.

Además de esto, desde este panel se puede cambiar también la configuración de muchas extensiones, ver los detalles (como la versión y los permisos) y permitir en modo incógnito (navegar en modo incógnito sirve para no dejar rastro en el historial de navegación y para obtener unos resultados de búsqueda sin el filtro de geolocalización, lo que puede ser útil desde el punto de vista del SEO).

Por supuesto, a muchos de vosotros se os ocurrirán otras extensiones tan útiles o más que éstas, y que sin duda merecerían figurar aquí, pero no quería hacer una lista muy extensa, y tampoco pretendo sentar cátedra. Aclarado este punto, éstas son las 5 extensiones de Google Chrome que yo uso a diario y que os recomiendo encarecidamente:

1-WOT

WOT, extensiones de Google Chrome

Si queremos navegar seguros, esta extensión no puede faltar en nuestro Google Chrome. WOT te indica la fiabilidad de todos los sitios web. Si lo marca con un círculo verde, es seguro; si lo señala en naranja, dudoso; y si lo pone en rojo será mejor que ni te acerques, pues te está diciendo que ese sitio tiene mala reputación y es probable que haya sido hackeado y que esté infectado de virus o troyanos. Muchas páginas salen con un círculo gris, lo que significa que no tienen suficiente puntuación  para valorar su fiabilidad. Son los usuarios los que califican las páginas web en virtud de su experiencia, en torno a dos categorías: confiabilidad y seguridad para menores.

2-AdBlock

Adblock, extensiones de Google Chrome

Ésta es una de las extensiones más populares y usadas, y no es para menos. AdBlock bloquea todos los banners y anuncios publicitarios, lo que hace mucho más cómoda y segura la navegación. Tiene un panel de opciones donde puedes añadir filtros y autorizar dominios.

3-Full Page Screen Capture

Full Page Screen, extensiones de Google Chrome

¿Alguna vez has querido copiar una web y, no teniendo otra manera, has recurrido al clásico y socorrido Impr Pant? Con la extensión Full Page Screen Capture es mucho más fácil. Tan sólo tienes que clicar en su icono y te copiará todo el contenido de la web en una imagen PNG que luego puedes guardar en tu ordenador y retocar en Photoshop, si fuese menester. Un consejo: mejor no mover el ratón mientras está cargando.

4-ColorZilla

ColorZilla, extensiones de Google Chrome

Ésta es una herramienta muy útil para desarrolladores web y diseñadores gráficos. Es como un cuentagotas que te deja seleccionar un color de la web en la que estás navegando y te lo traduce a RGB y código hexadecimal. Asimismo, te muestra, si así lo deseas, toda la paleta cromática usada en esa web. Entre sus funcionalidades también está la de crear gradientes y degradados en CSS.

5-Font Playground

Font Playground, extensiones de Google Chrome

Al igual que la anterior, esta extensión también tiene una utilidad relacionada con el ámbito del diseño gráfico y web. Sirve, por ejemplo, cuando estamos diseñando una página web y queremos saber qué fuente tipográfica quedaría mejor. Podemos probar con todas las fuentes que tengamos instaladas en nuestra carpeta Fonts de Windows y aplicarle efectos y transformaciones. Una vez elegida la tipografía, podemos usar el WebFont Generator de Font Squirrel para obtener los formatos EOT, WOFF y SVG y con ellos usar la propiedad de CSS 3 @font-face.

Y por último, un par de extras:

6-OneTab

¿Alguna vez abres pestañas y más pestañas en Chrome y luego te haces un lío y te olvidas de lo que estabas buscando? Si quieres librarte de ese caos y poner un poco de orden en tu barra de navegación, OneTab es para ti. Haciendo clic en su icono colapsarás todas las pestañas abiertas en una lista. Luego puedes restaurarlas en conjunto o individualmente. Aparte de eso, reduce el consumo de memoria.

7-WhatFont

WhatFont

Es probable que en más de una ocasión hayas entrado en una página web y te haya gustado alguna de las fuentes tipográficas utilizadas, pero no hayas sabido identificarla. Pues bien, con esta sencilla y práctica extensión de Google Chrome podrás averiguar qué tipografía es. Basta con clicar en el icono de la barra de navegación y al pasar por encima del texto te saldrá un cartelito con el nombre de la fuente.


  • 0
descargar iconos y vectores gratis

Los 5 mejores sitios web para descargar iconos y vectores gratis

Muchas veces un diseñador gráfico o web necesita disponer, no ya sólo de un abundante número de tipografías donde elegir la más adecuada para su proyecto (ya se trate de un logotipo, una tarjeta de empresa, un tríptico o cualquier otro trabajo de papelería e imprenta), sino también de una buena variedad de iconos y vectores. Uno de los usos más recurrentes que se les suele dar a los iconos y vectores es el diseño de infografías, elemento que está más de moda que nunca en el mundillo web, que aumenta el engagement y que puede convertir tus post en virales gracias a su difusión en redes sociales (en este blog encontrarás varios ejemplos).

Es cierto que muchas fuentes tipográficas incluyen los llamados zap dingbats, que son símbolos creados a partir de trazos sencillos (como teléfonos, casas, flechas, animales, etc.) que en un momento dado te pueden sacar de un apuro, y que están pensados básicamente para funciones de señalética. Otro tanto se puede decir de las formas predefinidas y las puntas de pincel de Photoshop.

Sin embargo, a veces estos dingbats no son lo bastante buenos o complejos, y entonces necesitamos buscar iconos más sofisticados, o que combinen colores. Para facilitaros la tarea, os presento aquí 5 sitios web donde podéis descargar iconos y vectores totalmente gratis:

1-FreePSDFiles

FreePSDFiles

Sin duda, mi favorito, y probablemente al que más veces he recurrido. Es como un cajón de sastre donde puedes encontrar de todo, desde iconos hasta mock-ups, pasando por ilustraciones, siluetas, infografías, botones, fondos y plantillas para logos, currículos y páginas web. Basta con echar un vistazo a sus categorías para darse cuenta de la enorme variedad de materiales con los que cuenta. Especial mención merecen los vectores de personajes animados, al más puro estilo cartoon, para los que tiene una web específica. El diseño suele ser excelente en todos los casos, y los archivos (muchos de ellos manipulables) están en formato PSD (Photoshop) dentro de un zip que te descargas.

FreePSDFiles es un must have, uno de esos sitios que tienes que guardar en tus favoritos sí o sí. Sólo está en inglés, pero con un conocimiento básico es más que suficiente (y es que en el mundo del diseño web, ¿quién no se maneja con el inglés?).

2-Flaticon

Flaticon

Este sitio también es muy recomendable. Cuenta con más de 200.000 iconos y vectores para uso personal y comercial divididos por categorías: animales, flechas, arte, edificios, trabajo, cine, etc. También tiene, como es lógico, un buscador. Los vectores están disponibles en varios formatos de imagen: EPS, PNG, PSD e incluso en código HTML y CSS. Cuando quieres descargar un icono te ofrece la posibilidad de hacer una donación al autor y contratar la cuenta Premium (son 9,99$) o realizar una descarga gratuita copiando una línea de código en tu web para citar al autor, lo cual sería un buen gesto, porque estos diseños no se hacen solos. No obstante, si no te sientes altruista, también puedes bajártelo sin pagos ni atribuciones. Los PSD tienen una resolución de 150 px, y en cuanto a los PNG (este detalle me parece muy significativo), puedes elegir el tamaño al que quieres descargártelo, hasta un máximo de 512 píxeles. Asimismo, puedes crear colecciones de iconos y guardar ahí tus favoritos, incluso sin previo registro. Como veis, es un sitio muy completo, donde, si además eres diseñador, puedes unirte a su equipo de profesionales y ganar dinero con tus diseños.

Flaticon está sólo en inglés, y es un proyecto de Freepik.

3-Iconfinder

Iconfinder

Otro sitio que no puede faltar en ninguna lista. Tiene más de un millón de iconos en su catálogo, aunque conviene aclarar que no todos son gratuitos, pues muchos requieren de una cuenta Premium (cobran 9$ al mes por 25 descargas en su plan básico y unipersonal). Al buscar puedes seleccionar la pestaña Free para que te muestre únicamente los iconos gratuitos. Dependiendo del vector en cuestión, puedes bajártelo en SVG (Adobe Illustrator) o PNG, en cuyo caso, y al igual que en Flaticon, también te permite seleccionar su tamaño en píxeles, con las mismas limitaciones. Asimismo, acepta el formato ICO, el que se usa para los Favicon.

Iconfinder sólo está en inglés.

4-Freepik

Freepik

Es una de las webs de recursos gráficos más populares de la Red. Dispone de casi 100.000 iconos gratis para uso personal y profesional, ordenados por categorías, y muchos más que requieren de licencia o previo pago. Tal como anuncian en su portada, ofrecen fotos, ilustraciones, iconos, PSD y vectores gratis para páginas web, banners, presentaciones, revistas y publicidad en general. Los vectores, los archivos PSD y los iconos tienen sus propias categorías dentro del menú principal. El sistema de descarga es idéntico al de Flaticon: licencia gratis con atribución al autor mediante link en tu página web; de hecho, algunos enlaces te llevan directamente a Flaticon. En el botón de descarga te especifica el peso de la imagen.

Me parece especialmente interesante su Stock de Fotos con casi 200.000 fotos gratis con licencia de Creative Commons, muchas de ellas muy creativas y enfocadas al diseño web.

Admite registro (también mediante redes sociales) y formulario para trabajar con ellos, ya sea como diseñador o como escritor, y está en español.

5-Vector Open Stock

Vector Open Stock

En su página de inicio te muestra una serie de vectores destacados, pero luego puedes buscar por categorías. Tiene una base de datos con más de 37.000 iconos gratis. Los archivos de descarga son comprimidos, zip, y están pensados para Adobe Illustrator  (extensión AI). La licencia gratuita también funciona por atribución, y cada imagen viene acompañada de una sucinta descripción. Algunos iconos son de pago, y sus enlaces te llevan a ShutterStock (los habrás visto en más de una ocasión al buscar imágenes en Google y los reconocerás por sus marcas de agua).

En mi opinión, Vector Open Stock es menos completo que cualquiera de los anteriores sitios, pero tiene la ventaja de que está disponible en español.

Por supuesto, el citado Shutterstock es, con diferencia, el mejor banco de imágenes, el más profesional, pues cuenta con unos vectores en flat design y unas ilustraciones realmente formidables que tú mismo puedes editar, pero, desgraciadamente, está sujeto a unos planes de pago que no son aptos para cualquier bolsillo, y hasta por descargar un JPG (a gran escala, eso sí) tienes que pagar. Para una agencia de marketing quizá sea la opción más indicada, pero un freelance o autónomo tal vez no se lo pueda costear. El registro es gratuito, pero no te da acceso a prácticamente nada. Eso sí, en favor de Shutterstock hay que decir que no sólo almacena imágenes, sino también vídeos y música. Tiene una base de datos colosal, y es difícil que no encuentres lo que estás buscando, sea lo que sea.

*[Si me permitís la digresión, os voy a dar un consejo un poco outlaw: si os encapricháis perdidamente de un vector y tiene marca de agua, como los de Shutterstock, siempre podéis importar la imagen en baja resolución a vuestro Freehand, Corel Draw o Illustrator y dibujarlo por encima, pero por favor, no seáis vagos y tened al menos la delicadeza de modificarlo lo suficiente como para que no parezca un calco. Os llevará su tiempo, pero oye, todo lo que tiene un valor merece un esfuerzo.]

Y ya para acabar, por si no habéis tenido suficiente, un extra:

6-Vecteezy

Vecteezy

Vecteezy es un portal bastante nuevo que ofrece vectores y gráficos gratis. Lo mejor es que no necesitas registrarte para descargártelos. Según el caso, dentro del archivo comprimido puedes encontrar la imagen en varios formatos: JPG, PDF, EPS y AI. Tiene un buscador por categorías. Algunos vectores son muy básicos, pero puede serte útil para bajarte iconos de redes sociales, texturas o patrones. Si eres un miembro Premium la búsqueda se te amplía a Pinceles, Texturas, PSD, Fondos, Plantillas, etc. Lo bueno es que está en español.

Ahora también, gracias a Piktab, una extensión de Google Chrome creada por Freepik, podemos disponer de un amplio surtido de recursos gráficos (iconos, vectores, texturas, fotos, mockups) con tan sólo clicar en nuestra barra de herramientas. Nunca ha sido tan fácil y gratis.


BUSCAR

Suscríbete al Blog

Introduce tu email para estar al tanto de las novedades.

ABRELINK EN TWITTER