Top arrow

The Best Of Google Fonts — By Category

Quality fonts you can use for your projects

Posted on March 15, 2014

The number of Google Fonts is ever increasing, but finding high quality fonts on the site is as difficult as ever. You want a font that works as body text, and that comes in multiple weights and styles. If you also want the font to be of a certain kind, like Slab serif fonts, the Google Font site really doesn’t cut the mustard. That is why I created this list — I hope you will find it useful.

Jump to:
Sans Serif

Theese categories are ones that I find useful when looking for fonts. If you are interested in real typography classification this article gives a good introduction.

Sans Serif

  • Humanist

    Sans serif fonts with hints of calligraphic influence.

  • Cabin

    Cabin Font

  • Open Sans

    Open Sans Font

  • Raleway

    Raleway Font

  • Alegreya Sans

    Alegreya Sans Font

  • Merriweather Sans

    Merriweather Sans Font

  • PT Sans

    PT Sans Font

  • Distinctive

    Fonts with stronger personalities, to some extent at the cost of legibility and familiarity. Good choice if you want something that stands out.

  • Signika

    Signika Font

  • Yanone Kaffeesatz

    Yanone Kaffeesatz Font

  • Amaranth

    Amaranth Font

  • Clean

    High quality modern fonts, made to ensure legibility in all kinds of sizes, displays, and languages. Great fonts for user interfaces.

  • Source Sans Pro

    Source Sans Pro Font

  • Droid Sans

    Droid Sans Font

  • Ubuntu

    Ubuntu Font

  • Oxygen

    Oxygen Font

  • Geometric

    Fonts that rely on geometrical shapes, like circlular ‘o’ letters. Generally give a more mechanical/neutral/cold feeling than humanist fonts.

  • Lato

    Lato Font

  • Exo 2

    Exo 2 Font

  • Roboto

    Roboto Font

  • Josefin Sans

    Josefin Sans Font

  • Montserrat

    Montserrat Font

  • Muli

    Muli Font

  • Titillium Web

    Titillium Web Font

  • Jura

    Jura Font

  • Orbitron

    Orbitron Font

  • Karla

    Karla Font

  • Rounded

  • Dosis

    Dosis Font

  • Varela Round

    Varela Round Font

  • Nunito

    Nunito Font

Serif

  • Old style

    Old style fonts have strong calligraphic influence, most notable in the leaning axis of the letters (look at the ‘o’s).

  • Cardo

    Cardo Font

  • Alegreya

    Alegreya Font

  • Vollkorn

    Vollkorn Font

  • Gentium Book Basic

    Gentium Book Basic Font

  • Almendra

    Almendra Font

  • Transitional

    Transitional fonts have a less strong calipgraphic influence, as can be seen it that the letters are now completely upright (look at the o’s and e’s. Also known as Neoclassical or Realist.

  • Merriweather

    Merriweather Font

  • PT Serif

    PT Serif Font

  • Droid Serif

    Droid Serif Font

  • Domine

    Domine Font

  • Libre Baskerville

    Libre Baskerville Font

  • Old Standard TT

    Old Standard TT Font

  • Neuton

    Neuton Font

  • Didone

    Didone fonts have extreme stroke contrasts, between the thinnest and and the thickest parts of the letters.

  • Playfair Display

    Playfair Display Font

  • Rufina

    Rufina Font

  • Slab Serif

    Slab serif fonts have prominent straight lined serifs at the ends of many letters.

  • Josefin Slab

    Josefin Slab Font

  • Lora

    Lora Font

  • Rokkitt

    Rokkitt Font

  • Roboto Slab

    Roboto Slab Font

  • Arvo

    Arvo Font

  • Podkova

    Podkova Font

  • Arbutus Slab

    Arbutus Slab Font

  • Bitter

    Bitter Font

  • Kreon

    Kreon Font

That’s all for now! I intend to keep this post updated, so please let me know if you think I’m missing any hiqh quality font.

Jonas Ohlsson Aden

Jonas Ohlsson Aden — @pocketjoso

Senior Engineering Manager and web enthusiast with a background in cognitive science.

← Blog Home

Importing SVG with filters causes rasterization problems in Adobe Illustrator

Posted on September 30, 2013

Just a quick note of a bug I found today at work:

When importing SVG’s into Adobe Illustrator, if the SVG has filters this will cause the SVG to be (permanently) rasterized: inside AI, on export (to f.e. PDF), and in print. Normally SVG filters are only rasterized in the preview image inside AI, and will still look sharp on export and in print.

Workaround

You can get your SVG to work just fine in Illustrator if you just follow these simple steps:

  1. Open your SVG in Illustrator
  2. Create a new AI document
  3. Copy your SVG from the open .svg document into your new .ai document
  4. Manually import or copy over the SVG filters that you originally had in the SVG into your .ai file.

The 4th step is what makes this workaround slightly annoying, but it’s not too bad. Just open up your original SVG in any text editor, copy your first SVG filter (including the <filter> tags with the ID) and then go into AI, fire upp the Appearance panel, select the element that had the filter applied to it, click on the name of the filter, and click to edit it. It should open up a list of SVG filters to choose from. Click ‘Add New’, and then finally paste in the filter you copied from your svg file. Do the same for all your filters (cross your fingers you didn’t have too many!), and voila, it all works!

Sometimes Illustrator seems a bit fidgety with displaying changes you make to your SVG filters. Close the SVG filters panel, re-open it again, make sure ‘preview changes’ is selected. Then select another SVG filter, wait for the preview to refresh, then change back to the one you want. This should solve the problem!

I posted on the Adobe help forums here, to see what the Community has to say about this. As I prefer to work with Adobe Fireworks, or directly in the browser, Illustrator is not my area of expertise. If you know any better workaround, please send me a tweet!

← Blog Home