Fonts

12 great free Google fonts

Looking for more inspo? Here’s our list of MUST download free Google fonts.

12 Great Free Google Fonts  |  Hue & Tone Creative

Google’s got around 915 fonts in its directory. Having a wide selection is great, but this can be a lot to sort through. You’ll probably be able to find the perfect font for your piece, but where do you even start?! 

Aside from the fact that Google Fonts are free, millions of people turn to Google fonts for its simplicity, easy-to-implement set-up, and high quality selection. The fact that a number of these fonts are available for print use is another great bonus. If this is your first time using Google to pick a font, you can find step-by-step instructions on the ‘how’ here.

To save you a bit of time scrolling through pages and pages of typography, here are 12 of our favorite freebies.

 

Popular choices

Numbers don’t lie. The first six on our list were the most viewed fonts over the last seven days, 30 days, 90 days, and year. 

12 Great Free Google Fonts  |  Hue & Tone Creative

1. Roboto, by Christian Robertson

Roboto’s a sans-serif font and comes in 12 different styles (thin, thin italic, light, light italic, regular, regular italic, medium, medium italic, bold, bold italic, black, and black italic). 

It’s known for its natural reading rhythm and features friendly, open curves.


12 Great Free Google Fonts  |  Hue & Tone Creative

2. Open Sans, by Steve Matteson 

Another sans-serif font, Open Sans has 10 styles to choose from. It’s featured on Google’s sites, and in print/web adverts. This font is endorsed by some of the biggest brands out there.


12 Great Free Google Fonts  |  Hue & Tone Creative

 3. Lato, by Łukasz Dziedzic

When creating Lato, Dziedzic wanted to come up with something transparent enough for body text while comprising unique traits for larger sizes; and he did just that.

With semi-rounded details and strong, structural entities, Lato oozes warmth, stability and seriousness all in one.


12 Great Free Google Fonts  |  Hue & Tone Creative

 4. Oswald, by Vernon Adams, Kalapi Gajjar, and Alexei Vanyashin

Originally created by Vernon Adams, Oswald has seen a number of interactions over the years based on user feedback.

It was designed to be appropriate for use across desktop computers, laptops and mobile devices and comes with six different styles - extra-light, light, regular, medium, semi-bold, and bold.


12 Great Free Google Fonts  |  Hue & Tone Creative

5. Slabo, by John Hudson

Slabo has just two weights. What’s unique about this one is that it’s specifically designed to be used at a certain size -- either 27px or 13px depending on your piece.


12 Great Free Google Fonts  |  Hue & Tone Creative

6. Roboto Condensed, by Christian Robertson

Part of the Roboto and Roboto Slab family, Roboto Condensed refuses to compromise. Its letters are freely positioned to settle into their natural width without encroaching on their neighbors, and it adds impact to body and heading copy alike. 


Hidden gems

Our next batch of fonts are just as easy to use and read but are less well-used, giving you chance to create something a little different.

12 Great Free Google Fonts  |  Hue & Tone Creative

7. Arvo, by Anton Koovit

Best suited to heading and sub-headings, Arvo’s a slightly more edgy font with tints of contrast. Available in regular, regular-italic, bold and bold-italic, you can tailor its impact to your tastes and needs too.


12 Great Free Google Fonts  |  Hue & Tone Creative

8. Bree Serif, by TypeTogether 

Charming, original and versatile by nature, Bree Serif was an instant hit when it first came onto the scene back in 2008 -- and we can see why.


12 Great Free Google Fonts  |  Hue & Tone Creative

9. Sanchez, by Daniel Hernandez

Sanchez is a slab-serif typeface and it’s simple, scannable, and distinguishable. It might not be for everyone but if it fits your organizations feel it can be a solid design choice.


12 Great Free Google Fonts  |  Hue & Tone Creative

10. Hammersmith One, by Sorkin Type

Low in contrast, unique in style, and subtle in curves Hammersmith One was built specifically for web-use. Although it does still work well to smaller sizes, it’s perhaps best limited to titles, sub-headings, and short intro paragraphs.


12 Great Free Google Fonts  |  Hue & Tone Creative

11. Catamaran, by Pria Ravichandran 

With nine different text weights Catamaran’s incredibly versatile and, in the designer’s own words, “strikes a balance between typographic conventions and that bit of sparkle.”


12 Great Free Google Fonts  |  Hue & Tone Creative

12. Playfair Display, by Claus Eggers Sørensen

Used across millions of websites worldwide, this transitional font’s functional and stylistic and pairs well with Georgia for body text. Other popular couplings include a few of our already mentioned Google Fonts: 

  • Lato

  • Roboto

  • Raleway

  • Oswald

  • Open Sans Condensed


Hue & Tone Creative: Your Font Partners

Finding the right font for your website, flyer or social media advert can be really tough -- we get that. If you’re struggling to find a font that gels with your work, we can help. Get in touch at hannah@hueandtonecreative.com or (336) 365-8559 to see how.

Making the most of Adobe Fonts’ features

Making the most of Adobe Fonts’ features  |  Hue & Tone Creative

The right font can work wonders for your brand by helping you connect with potential customers, hold peoples’ attention, and convey the right mood or feeling. But the wrong font can do quite the opposite -- allowing letters to get lost, making words difficult to digest, and alienating your artwork from your brand.

 

First off, What is Adobe Fonts?

In a nutshell, Adobe Fonts (previously Adobe Typekit) is a library of 1,000s of free and paid-for fonts for people to use directly on their website, sync with their Creative Cloud subscription, or both.

If Adobe’s your go-to for design work you’re probably already familiar with Fonts, but are you getting the most out of what it has to offer? Whether you’re a newbie or not, it’s got lots of features to help you save time and personalize your fonts -- and we’ll be covering our favorite features in this post.

Top tip: if you’re after even more recommendations, here are some of our favorites too.

1. Get a headstart with recommendations

If you’re a beginner at type design, Adobe has a recommendation tool to help you decide on fonts that are best suited for paragraphs or headings.

For those that are new to the font-selection world, you need something that’s easily legible across various mediums at a small size for paragraph copy, and for headings you can be more adventurous with bigger, bolder and more decorative styles -- that are still readable, of course.

2. Save time and filter fonts 

With so much choice at your fingertips scrolling through endless styles can be a pretty tedious and time-consuming task.,If you’ve got a good idea of what you’re after, cut out what you don’t want by filtering specific properties, like: 

  • Weight - the thickness of the stroke

  • Width - the width of the actual letters

  • X-height - the ratio of lowercase letter height to uppercase letter height

  • Contrast - the ratio of thick and thin strokes

  • Standard or caps only - i.e. fonts that use lower and uppercase letters, or fonts that only use capital letters

  • Default figure style - choose between Oldstyle (more old-fashioned) or Lining (more modern) for your numbers

Making the most of Adobe Fonts’ features  |  Hue & Tone Creative


3. Use the right font availability

What’s the difference? Web fonts are used directly on your site, and synced fonts are imported to your Typekit for in-program use on things like Photoshop and Illustrator. Discover how to install fonts here.

Whether your artwork’s for print or web should determine the font you use, which means it’s important you’re clear on the end-use from the outset.

To make choosing the right font easy Adobe differentiates between web fonts and synced fonts, so make sure you pick one from the right category.

4. Test your chosen font

Adobe’s ‘type tester’ feature allows you to see how your chosen font(s) look online before you add them to your kit and invest time into updating your design work.

To put this feature into practice, just head to the main browsing page where it says “Use fonts” and then click the “Web” tab when a pop-up appears. If you like what you see all that’s left to do is to add the font to your Typekit.

5. Use contextual alternates

Sometimes, certain glyphs can be a bit intrusive or distracting and the last thing you want is to jar readers as they’re scanning your copy -- but Adobe’s contextual alternates (calt) feature can help you overcome this.

It’s particularly useful when using script typefaces and it works by replacing default glyphs with better-performing alternatives.

Need help? You can find more about line and character spacing here.

6. Experiment with your spaces

If you’ve selected your font but you’re not 100% happy with the spaces between characters, lines and paragraphs, remember, you don’t have to settle with what you’re given as standard. To create something that gels perfectly with your page experiment with your gaps by opening the ‘Text properties’ box and playing around with the spacing options.


Hue & Tone Creative: Your partners in design

Still confused about what font to pick? If some (or all) of this post went over your head, we can help! Design is our forte and we’re known for helping organizations find their perfect font -- without fail. Drop us a line on hannah@hueandtonecreative.com to find out more.

Typography for beginners

Typography for Beginners  |  Hue & Tone Creative

Some web pages and brochures good… and some look terribly unprofessional. If you’re new to graphic design or typesetting it can be hard to determine what makes someone’s branding look good or bad.  

If you’re a beginner – or you’re attempting to brand your own business -- there’s a number of type rules you can follow to give brand a polished look. Following these simple rules will help even the most amateur designer get their webpages and print assets in tip top shape!

 

1. Less is more when it comes to typeface

If you’re looking for some font pairing inspiration, head over to these two posts about pairing fonts on Squarespace (here and here). 

Choosing the right typeface is key. Get it right, and you’ll set yourself up for stylish, simple and easy-to-read assets. But get it wrong, and you’ll end up with illegible, cluttered and unappealing pages. 

Simple fonts should be used for main body copy, and decorative typefaces should be used sparingly for things like subheadings.

The golden rule in the design world is to stick to a maximum of three fonts in any given piece of artwork - whether that is a website page, social media banner, or hardcopy flyer. However, whittling your fonts down to two can sometimes be even better. 

If you stick to just one or two fonts, you can use varying weights to create a more refined look. 


2. Use a sensible hierarchical structure

Following a logical hierarchy helps to give your site’s pages a clear flow and effortlessly guides readers through the structure of the website. Let’s compare and contrast two examples to give you a better idea of what we mean: 

Good content formatting.png

Exhibit A is a bad example. The website’s name, navigation bar, subheadings, and main body copy are all the same font size. Now there are two issues with that – first, it gives readers no visual indication where they should start reading or what’s most important to look at. Secondly, it makes it really difficult for the reader to skim through the copy.
 

Now, let’s contrast an example of a solid hierarchical structure. The page’s title, navigation bar, subheadings and copy are clearly defined with varying font points, making it much easier on the viewer’s eye.


3. Be creative with contrast

Typography for Beginners  |  Hue & Tone Creative

Being creative is part of being a designer. Now we know we said earlier you should stick to two to three font combinations per project, but that doesn’t mean you can’t mix up your styling by playing around with things like the font’s size, weight, color and style.

Whether you emphasize a key word with italics, change the color of a subead to something more bold, or bump up a term in your tagline to a size that’s more eye-catching, there are endless ways to create contrast within your copy.


4. Keep your alignment neat and tidy

Alignment applies to all your on-page elements - like body text, titles, logos, images, and menu bars. When it comes to alignment, everything should be connected in one way or another. For example, you might want your logo to align with your main navigation bar, your body copy to align with your page’s title, and your images to align with your body copy.

Well thought-out alignment will help prevent your page from becoming disjointed and ensure all your assets create well-measured sizes and distances between each other.


5. Don’t be a stranger to whitespace

Don’t fall into the trap of thinking you need to fill everynook and cranny on your page. Creating whitespace around your words can be incredibly powerful, can help draw attention to text, and will aid you in achieving a simple and trendy look. 


6. Choose your colors carefully

Last but not least is your color choice. The right colors can make or break the look and readability of your copy – there’s nothing worse than colors that make your words a strain to read.

When it comes to color, there are three key components: 

  • Hue - the shade of the color

  • Saturation - the brilliance of the color

  • Value - the lightness or darkness of the color

Source    >

When it comes to choosing your colors, the aim of the game is to make your text as easy as possible to read. It’s as simple as that.


Hue & Tone Creative: Let’s work together

Feeling overwhelmed with information? If you’re not a designer, knowing and deciding what does and doesn’t work is easier said than done. If you need a hand with your typesetting - or any other area of design, get in touch with our team today at (336) 365-8559.

Our Favorites: More Great Free Fonts to Download

Finding the perfect font is no easy feat. For starters, there’s an unfathomable number of options to choose from. Even once you select a font, there’s a ton of variables that can interfere with what does and doesn’t work - Do you need the font for print or digital? Are you designing something colorful or monochromatic? Are you laying the font over an image or putting it on a blank background? The the list of potential factors goes on and on!

What’s worse, is that many popular fonts require purchasing a license — one that can often be quite pricey. We’ve already compiled lists of our favorite Adobe Typekit fonts (free if you have an Adobe CC license) and our favorite Google Fonts. But if none of those are speaking to you, we’ve pulled together another list of ten great free and easy to download fonts.


1. Hansief

Hansief is a simple and bold typeface offering a unique vintage feel. It comes with two styles - regular and rough - enabling it to easily adapt to a range of design settings. Download here.


2. Tuesday Night

For those pieces that need an elegant, classy and handcrafted touch, look no further than Tuesday Night. Download here.


3. Mr Grieves

 If you’re after something with a bit of texture, then Mr Grieves has you covered. It’s rough, ready, and raring to grab your audience’s eye. Download here.


4. Bosk 

A handmade brush font by nature, Bosk lends itself very well to artwork in need of that personal and custom feel. Better yet, it’s multilingual and comes with more than 400 characters, so you won’t struggle for choice. Download here.


5. Oraqle Script

Talking of choice, enter Oraqle Script. It’s got uppercase, lowecase, numerals, punctuation and multilingual characters, and also includes things like ligatures, stylistic alternate characters and swashes. Modern, striking and full of texture, it ticks all the boxes. Download here.


6. THE BOLD FONT

 If there’s one thing The Bold Font absolutely oozes, it’s trendiness. It’s streamlined and ideal for anything from logos and packaging to social posts and on-page headings. Download here.


7. Nikoleta

Simple, slim, refined and commanding, Nikoleta is good to go for things like posters, headlines and online ads. Download here.


8. Old Growth

Inspired by the old growth forests of the west coast, Old Growth is fairly new which opens up the door to testing something relatively untried and really standing out. In the words of the creator, it’s perfect for branding, quotes, headlines and more. Download here.


9. Buffalo

Now this one’s definitely different, but different is by no means bad. While we wouldn’t suggest overusing this one, we think it’s the perfect pick for key headlines and accents. Download here.


10. Bodoni XT

For those after more of a classic feel, Bodoni XT offers the right balance between traditional and on-trend. It’s also readable, making it a good fit for longer chunks of text. Download here.


Hue & Tone Creative: YOUR Graphic Design PARTNER

Whether it’s a complete overhaul of your branding, a one-off social media ad, an eye-catching business card, or a logo refresh, we’ve got the expertise you need to make your branding pop. Contact us at (336) 365-8559 or hannah@hueandtonecreative.com to see how we can start working together.

7 (more!) Squarespace font pairings

There’s no denying that deciding which fonts work well together can be (to put it bluntly) an absolute nightmare - but the benefits of fiddling around far outweigh the pain of getting there.

Finding the perfect font pairing can make a massive difference to the look and feel of your website. It changes the way the words on screen gel with your design. It alters the way visitors scan over your copy. And it can impact the overall tone you give off. So it really is key that you hit the nail on the head.

We’ve already shared 7 Squarespace font pairings and, back due to popular demand, now we’re here to give you seven more!

7 (more!) Squarespace font pairings  |  Hue & Tone Creative

Trebuchet MS + Adobe Garamond Pro

Trebuchet’s instantly easy-to-read style coupled with Adobe’s slightly old school slant effortlessly keeps pages engaging.


7 (more!) Squarespace font pairings  |  Hue & Tone Creative

Source Sans Pro + Raleway

Source Sans in simple and sleek -- pair it with Raleway and you’ve got yourself a modern combo!


Artboard 5@2x-8.png

Alfa Slab One + Titillium Web

This font combination isn't for everyone, but Alfa Slab’s bold presence coupled with Titillium’s techno vibe provides a structured, forward-looking style. 


7 (more!) Squarespace font pairings  |  Hue & Tone Creative

Playfair Display SC + Livory

Get straight to the point with Livory's imposing page presence and Playfair's easy-on-the-eye curls.


7 (more!) Squarespace font pairings  |  Hue & Tone Creative

Acier Bat Text Solid + Sanchez

What happens when you combine sharp points and straight edges? This. It’s different, but who said different’s bad?


7 (more!) Squarespace font pairings  |  Hue & Tone Creative

Adrianna + Work Sans

Both wide in style, Adrianna and Work Sans provide a really easy-to-read package.


7 (more!) Squarespace font pairings  |  Hue & Tone Creative

TextBook New + Tondo Signage

Tondo’s stocky style makes it unideal for chunky blocks of text, but paired with TextBook New it’s ideal for shorter snippets that need snippets that need to catch the reader’s eye.


BRANDING + WEB SERVICES IN GREENSBORO: HUE & TONE

Looking for a web designer in Greensboro, Winston Salem or the surrounding areas? Hue & Tone is a creative graphic design agency specializing in logo design, web design, social media management, and more. Give us a call if you’re interested in a custom, branded website that truly tells your story.