Fonts

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.