ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
231 Collect

Las 20 mejores tipografías de Google Fonts

Google Fonts, se ha establecido como el recurso tipográfico esencial para creativos digitales. La calidad y naturaleza “open source” de sus fuentes, las hace imprescindibles tanto para el uso personal como comercial. La mayor parte de las fuentes de Google Fonts cuentan con numerosos estilos. Otro de los factores clave es que están diseñadas optimizando la legibilidad de sus caracteres en dispositivos digitales. Además la interfaz resulta muy intuitiva y accesible, es muy fácil comparar fuentes y estilos rápidamente.

La tipografía web está viviendo un periodo de gran creatividad gracias a las sucesivas mejoras técnicas en CSS que nos permiten experimentar manipulando y animando caracteres, párrafos y layouts. Estamos hablando de CSS Shapes, Flexbox, CSS Grid y Variable Fonts. Hacía mucho tiempo que los diseñadores web anhelaban poder emular las composiciones del diseño editorial. Gracias a CSS Grid y Flexbox, podemos escapar de las constricciones del grid.

La nueva APi de Google Fonts viene con bastantes mejoras y con una selección de 10 excelentes Variable Fonts con diferentes características como fuentes con serifa, sans-serif, slab, fuentes display o monoespaciadas. Lo increíble de las variable fonts es que nos permite manipular y animar, a través de CSS, una serie de propiedades determinadas por el diseñador de la fuente. Algunas de estas propiedades se limitan al peso de la fuente, pero otras atañen a elementos ornamentales y estructurales de la misma. Resumiendo, las posibilidades creativas son enormes.

Google Fonts Esenciales

No queremos demorarnos más, pasamos a mostrar selección de fuentes más valoradas por los diseñadores y el jurado de Awwwards. Algunas destacan por sus cualidades estéticas, otras por su versatilidad o cualidades funcionales. Todas ellas con familias tipográficas con numerosos estilos y pesos.
También hemos querido destacar fuentes que han sido especialmente diseñadas para interfaces y otras que son especialmente legibles en párrafos o resultan particularmente confortables para la lectura en dispositivos móviles.

  • Alegreya Alegreya Google Fonts Web Fonts
  • B612 B612 Google Fonts Web Fonts
  • Muli Muli Google Fonts Web Fonts
  • Titillium Web Titillium Web Google Fonts Web Fonts
  • Varela Varela Google Fonts Web Fonts
  • Vollkorn Vollkorn Google Fonts Web Fonts
  • IBM Plex IBM Plex Google Fonts Web Fonts
  • Crimson Text Crimson Text Google Fonts Web Fonts
  • Cairo Cairo Google Fonts Web Fonts
  • BioRhyme BioRhyme Google Fonts Web Fonts
  • Karla Karla Google Fonts Web Fonts
  • Lora Lora Google Fonts Web Fonts
  • Frank Ruhl Libre Frank Ruhl Libre Google Fonts Web Fonts
  • Playfair Display Playfair Display Google Fonts Web Fonts
  • Archivo Archivo Google Fonts Web Fonts
  • Spectral Spectral Google Fonts Web Fonts
  • Fjalla One Fjalla One Google Fonts Web Fonts
  • Roboto Roboto Google Fonts Web Fonts
  • Montserrat Montserrat Google Fonts Web Fonts
  • Rubik Rubik Google Fonts Web Fonts
  • Source Sans Source Sans Google Fonts Web Fonts
  • Cardo Cardo Google Fonts Web Fonts
  • Cormorant Cormorant Google Fonts Web Fonts
  • Work Sans Work Sans Google Fonts Web Fonts
  • Rakkas Rakkas Google Fonts Web Fonts
  • Concert One Concert One Google Fonts Web Fonts
  • Yatra One Yatra One Google Fonts Web Fonts
  • Arvo Arvo Google Fonts Web Fonts
  • Lato Lato Google Fonts Web Fonts
  • Abril FatFace Abril Fatface Google Fonts Web Fonts
  • Ubuntu Ubuntu Google Fonts Web Fonts
  • PT Serif PT Serif Google Fonts Web Fonts
  • Old Standard TT Old Standard TT Google Fonts Web Fonts
  • Oswald Oswald Google Fonts Web Fonts

Fonts Optimized for UI

  • PT Sans PT Sans Google Fonts Mobile Fonts UI
  • Poppins Poppins Google Fonts Mobile Fonts UI
  • Fira Sans Fira Sans Google Fonts Mobile Fonts UI
  • Nunito Nunito Google Fonts Mobile Fonts UI
  • Oxygen Oxygen Google Fonts Mobile Fonts UI

Fonts Optimized for Legibility and Readability

  • Exo 2 Exo 2 Google Fonts Mobile Fonts UI
  • Open Sans Open Sans Google Fonts Mobile Fonts UI
  • Merriweather Merriweather Google Fonts Mobile Fonts UI
  • Noto Sans Noto Sans Google Fonts Mobile Fonts UI
  • Source Sans Pro Source Sans Pro Google Fonts Mobile Fonts UI

How to use Web Fonts

At this point everyone knows how to use web fonts, but if you’re not sure, you only need to know that there are two ways. The first is to use web fonts services like Google Fonts, Webtype, Fonts.com or Typekit and download the font from their servers, as you’ll see in the following example: 1. Web font embedding services

The second is to host the font in your server and use @font-face rule in your stylesheet as you can see here: 2. Embedding fonts using the @font-face rule

Web font embedding services

 

Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. GWF is free to use, does not require you to have an account, and has no limit on traffic or domains unlike Typekit. Typekit sets the cost of the service according to the number of domains in which the font is used, or the site’s monthly traffic. One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the project design phase.

Implementation

It really is quick and simple:

1. Choose a font. You can add it to your collection or use “quick-use” to generate the code and options for that font.

2. Copy and paste the code generated into your <Head>

   <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>

3. The font is now accessible in your CSS code

   body { font-family: 'Tangerine', serif; font-size: 48px; }

Here you can consult a extended manual for styles, script subsets, and using multiple fonts.

 

Embedding fonts using the @font-face rule

Fonts are hosted on the user’s server independently of external services. @font-face was a deprecated CSS2 rule that has been re-introduced in CSS3 specifications and is supported by almost all modern browsers. A web font is a customized font which is supported by different browers and comes in formats such as TTF, WOFF, EOT and SVG.

   @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }