font pairing

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.

The Optimal Font Size for Web, MailChimp, and Mobile

Earlier this month, Twitter rolled out a new font. Unfortunately, not everyone was a fan

Twitter’s switch from Helvetica Neue, to Segue left users complaining that the slender new font was hard to read and caused way too much eye-strain.

Like Twitter, most businesses are bound to make mistakes when it comes to using the right fonts and sizes. Instead of fumbling through and learning from trial and error, do yourself a favor by learning a few of the best font-size secrets. 

Artboard 3test.png

Websites

Whether you’re designing an online shop, portfolio, or blog, it’s crucial that your fonts look clean, appealing, and easy to read.

For best readability, we recommend that you keep your headers and buttons between 30-32 pts and sub headers between 18-26 pts. Body text usually looks best when it’s between 12-16 pts. 

 

The Optimal Font Size for Web, MailChimp, and Mobile  |  Hue & Tone Creative
Looking to compare email marketing platforms? Here’s a rundown on a few of our favorites. 

MailChimp

Email marketing isn’t going away anytime soon. In fact, email is 40 times more successful at bringing in leads than Twitter or Facebook.

One of our personal email marketing tools, MailChimp, recommends that you keep your body text between 14-16 pts. 16 is best for short emails between 2-3 sentences, while 14 pts us better for more lengthy emails.

 

The Optimal Font Size for Web, MailChimp, and Mobile  |  Hue & Tone Creative

Mobile

According to MailChimp, it’s best to stick to the “one eyeball, one thumb, and arm’s length” rule when it comes to font sizes. Basically, your viewers should be able to see and scroll through the entire email with ease and clarity. 

With this guide in mind, your body fonts should be between 12-16 pts and your links, CTA, and buttons should be between 34-36 pts.

 

One last note…

When it comes to selecting fonts, the most important thing is to pick an easily readable font. When in doubt, go back to basics. If you stick to a plain serif or sans serif and use these size guidelines, you'll be on your way to finding the perfect typography for your next web project! 


Web & Blog Design in Greensboro, NC

Not seeing much traffic or engagement on your website? It’s probably time for an upgrade! From landing pages to business blogs, Hue & Tone Creative can help you create a site that matches your style and helps reel in leads. 

7 Squarespace Font Pairings

7 Squarespace Font Pairings  |  Hue & Tone Creative

You see a Squarespace template, you love it, you start playing with the fonts... and suddenly you don't love it quite so much. No worries -- it happens to everyone!

Although it may be tempting to stick with the default settings of your template, taking the time to select the right fonts adds depth and personality to your site. With over 600 font options through Google and nearly 1,000 on Adobe Typekit, picking the perfect combo can feel almost impossible.

We're here to take the guesswork out of selecting the perfect Squarespace font combination - here's 7 suggestions to revive your favorite template: 

Merriweather + Roboto Condensed  |  Squarespace Font Pairings  |  Hue & Tone Creative

Merriweather & Roboto

This classic and modern mix of serif and sans serif fonts is perfect for any business. 


Skolar Sans + Domine  |  Squarespace Font Pairings  |  Hue & Tone Creative

Domine & Skolar Sans

Need a clean no-fuss combination? Domine and Skolar pairs nicely with strong graphics. 


Julius Sans One + Franklin Gothic  |  Squarespace Font Pairings  |  Hue & Tone Creative

Julius Sans One + Franklin Gothic

Franklin Gothic is classic, readable, and approachable -- but add Julius Sans One in and you've got an edgy clean feel.


Rift Soft + Vendetta  |  Squarespace Font Pairings  |  Hue & Tone Creative

Rift Soft & Vendetta

Looking for a sophisticated pairing for an upscale brand? The sleek style of Rift keeps Vendetta from feeling too stuffy. 


Essonnes + Futura  |  Squarespace Font Pairings  |  Hue & Tone Creative

Essones & Futura

This duo feel playful and approachable. We love this serif & sans serif mix for boutiques, portfolios, and blogs. 


Park Lane + Tenso  |  Squarespace Font Pairings  |  Hue & Tone Creative

Park Lane & Tenso

This crisp and versatile combo would work well for real estate, bistros, and trendy salons. 


Lust Script + Sofia Pro  |  Squarespace Font Pairings  |  Hue & Tone Creative

Lust Script + Sofia Pro

Feeling a little edgy? Mixing in Lust Script takes this font palette to the next level. 


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.

Friday Links: Twitter chats, font pairing, and Squarespace love

Hello, friends! It's been another full, busy week here at Hue & Tone and, now that it's coming to a close, I'm sharing some links I've been loving once again.

Friday Links: Twitter chats, font pairing, and Squarespace love -- Hue & Tone Creative

One | The impact of having an active social presence for your business is huge...but not everyone's naturally inclined to be a "sharer." I love this post on ways to train your brain to think social.

Two | Along the same lines as the link above, social media is best when you're genuinely using it as a tool to collaborate and learn from others...not a way to blast your own message without listening. Twitter chats are a great way to get started.

Three | The Hue & Tone website runs on Squarespace, and I'm a huge fan. Here's a good summary of the reasons why.

Four | Running a small business doesn't happen without its fair share of cold calls -- and cold emails. So, how to do it right? Personalize, be brief, and establish purpose.

Five | Here's a great -- and beautifully presented -- primer on the "art and science" of pairing the right fonts.

Recap of this week's blog posts: 

Have a great weekend!