Stop trolling through thousands of fonts, as these six typefaces might be all you need as a web designer in KL. They’re free and slightly lesser-known-there’s nothing here from the top 50 on Google Fonts. I’m going to show you live website examples of each font in use, plus some design tips along the way.
B Grotesque
I’ll say more about the whys of this whole exercise as we go, but for now let’s just plunge in with our first pick: B Grotesque is hosted on Uncut. Everybody needs a grotesque sans in their kit, in addition to Helvetica-type sanses.
This is going to be a real workhorse for you. While a lot of people use Inter, let’s find something a bit different with a bit more personality.
We actually used this font on the Bar site, which, besides being hilarious, is a site you can learn to build in our advanced module on the Frame course. B Grotesque does an inordinate amount of heavy lifting on the site.
It’s suitable for headlines and body copy, giving that modernist style you get from fonts like Helvetica and Univers, but with a bit more personality. It’s just one of those fonts that’s timeless in style and works for pretty much any brand or website.
A grotesque sans like this is important in your selection, and this site illustrates exactly why B Grotesque is such a great option. Now, let’s jump over to a geometric sans-which is more based on geometric forms.
You can see that the “O” is quite circular.
More: Read more on top psychology principles for web designers
Outfit
If you’re looking for something like Futura, you might try Outfit. You can see it here on a website, used not in the main headlines but in the body copy.
It works well in the body copy, though geometric fonts are not always the first choice to do that job. Sometimes, a humanist sans or grotesque would be more legible. Outfit has a friendlier feel, less cold or harsh, while still holding its professional timeless look. This is a great alternative to Futura.
Again we see its use in body copy sections contrasting with narrower, more condensed headlines. Working with the limitation of having just a few fonts is taken from Mimo Vigel, who talked about this concept in his book entitled “The Vigel Collection”. He made an exhibition showing how just some typefaces can work for any design situation.
More: Become a powerful web designer with these AI tools.
Instrument Serif
Next, a serif to bring in: Instrument Serif.
This is a condensed serif font that works particularly well for display purposes.
This font is available only in regular upright and italic on Google Fonts, and it was created originally for a creative agency by the name of Instrument. Their website is worth checking out as a prime example of how this font shines.
That gives it a modern, ’80s-like advertising feeling combined with the timeless sans serif on buttons. Instrument Serif can be used up and down in size, from huge headlines to tight sans serif contrasts.
I even came across it on a Paris hotel website, lending a formal, luxurious feel-especially in that application-to short, center-aligned headlines and generous helpings of negative space.
Left alignment works better for longer sentences, but for short phrases, centering is fine. We also would like to discuss the fonts that are monospaced.
Space Mono is a very good option; it was designed by Colophon Foundry, which is a very reputable foundry of types.
Sometimes, the foundries share fonts in places like Google Fonts as a promotion.
More: Learn to choose a font for your web design with these tips.
Space Mono
Space Mono by Colophon Foundry is a balanced yet atypical monospace font, featuring some peculiar details such as this curious horizontal mark in the “G.”
It has seen wide use and has appeared on sites such as Help Scout. Although it’s not used in the main areas there, it can be seen littered about in subtle touches such as caption and title presentation.
Monospaced fonts are ideal for use in captions, adding subtle contrast without overpowering the hierarchy of a page. That font is used by the headline font on a natural wine site to get this quirky standout look.
It also brings a raw, utilitarian feeling when used throughout an entire site, which appeals to brands wanting to seem scrappy and functional.
Cooper Hewitt
The next typeface is Cooper Hewitt by Pentagram for the Cooper Hewitt Museum in New York. Free to download on their website, the museum has made this font freely available, and it is an outstanding example of a typographic identity.
With all its weights, Cooper Hewitt works equally well in both headlines and body text. The condensed, geometric qualities make it much friendlier and more contemporary in feel than traditional grotesques like Univers.
Applied as a headline style, it’s reminiscent of newsprint and can play around in your work.
Lastly, check out Head Vig-a display font used by Swedish insurance. A rare serif font showing straight arms in letters such as “G” that are normally curved.
Coupled with a sans serif, it gives off a classic yet modern feel. You can only get the regular upright weights for both the serif and sans on Google, but they’re incredibly versatile.
Head Vig
The Head Vig font is a mix between a traditional serif and with some modern tweaks that make it neutral for different design settings.
Good typography and negative space here makes this pairing work very well on the company website, providing both a timeless feel and a contemporary vibe.
Am I going to stop buying fonts? No, of course not! But these six free fonts are really worth adding to your collection.
Also, don’t forget to get that free Google Fonts guide of mine down in the description, and if you know some other great free fonts, share them in the comments so we can all benefit. Happy website designing!
0 Comments