type

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.

Must-have Adobe Typekit Fonts

If you use Adobe’s Creative Cloud suite, then you’re probably no stranger to Typekit. With over 1,000 options at your fingertips, choosing the right font can be a challenge.

At a loss for which fonts to use? We’ve rounded up a collection of our must-sync fonts.

 

Serif

These serifs give a sophisticated feel to resumes, business cards, and printed media. 

Slab Serif

Need a font that stands out? These bold slab serifs are perfect for headlines.

 
 

Sans Serif

We love these sleek sans serif fonts for blogs, websites, and everything in between.

 
 

Web & Graphic Design Services in Greensboro: Hue & Tone Creative

Does your brand need a Spring refresh? Hue & Tone Creative will help you update your look. From email campaigns and web design, to presentation graphics and business cards, we’re here to help you put your best foot forward. Contact us today to learn more about our creative services -- 336-365-8559.

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.

12 Inspiring Font Combination

Whether you’re designing a resume, website, or even a graphic for social media, choosing the right fonts can make a good design even better.  However, the seemingly endless font options available at our disposal can make choosing the right ones a little tricky.

To help alleviate a little stress and confusion, we put together a brief guide on font pairing. 

If you’re interested in the complexities of font typography, you can learn more here. But, if you're just looking to learn a few basics, start with these guidelines: 

  • Try combing a serif with a sans serif.
  • Stick to 2-3 fonts, any more than that can be distracting.
  • Designate rolls to your fonts. Keep headings, subheadings, or body text consistent.
  • Vary the weight to achieve visual hierarchy.
  • Contrast is key! Try not to select fonts that are too similar.
  • Don’t pick fonts that clash with your aesthetic.

Now that you have some basics down, here are a few of our favorite combinations:

Most of the font examples we used below are from Font Squirrel, but you can also find some free or inexpensive downloads from these sites:

These are just a few of our suggestions, so don’t be afraid to branch out and try something different. There are seemingly endless font combinations to choose from! Play around and try out different combinations until you find what works best for you.

What are your favorite font pairings? Let us know in the comments!

Type: A brief guide on typography

What do Chanel, Target, and Harley Davidson have in common? They all use Helvetica. This versatile Swiss typeface speaks to us every day. It’s on street signs, album covers, paper coffee cups, and even the shopping bags of our favorite stores.

Helvetica is just one of many expressive typefaces available to us today. If you’re a business owner that needs an introduction or a designer in need of a brief refresher to typography and font selection, we’ve put together a little guide. We won’t get too in depth- just some basics of typography, different type families, and some recommendations on our favorite typefaces. Sound good? Let’s jump in!

 

Typography

Typography is the art of arranging letters and characters in creative ways without impacting legibility. Typography isn’t just selecting an interesting font, it’s the art of adjusting the size, spacing, and placement of text in creative ways that captures the viewer’s attention. (source).

Typefaces vs Fonts

One common misconception is that typefaces and fonts are the same thing. The key difference is that font is what you use and a typeface is the creative style you see. In the early days of manual printing, individual metal blocks were used to print each character. If you wanted to use the typeface Baskerville, you would need to purchase the font in the desired point size, style, and weight separately.

Leading, Kerning & Tracking

Leading is the vertical spacing of lines of text. When dealing with several lines of text, you may need to adjust the leading. Kerning is the spacing between two letters to produce an aesthetically pleasing result. You never want your viewer to struggle to decipher tight letters that are smashed together, or to see loose awkward spacing that distracts from the message you’re trying to convey. Not to be confused with kerning, tracking is the adjustment of spacing throughout an entire word.  

 

Type Categories

Because of its rich and lengthy history, there are several different type families. We’ve included a few examples, but if you’re eager to learn about more in detail, you can read more here.  

SERIF:

SANS SERIF: 

SLAB SERIF: 

Serif

Typefaces in this family utilize serifs, which are the small decorative lines attached to the stroke of a letter. Serifs are like extensions or finishing strokes at the end of characters. Serifs are often used in print media like books, magazines, and newspapers.  Some examples of this type are: Garamond, Times New Roman, and Baskerville. 


Sans Serif

In the early 1900’s, San Serif was criticized as being ugly because they lacked the elegance of the classic Serif style.


Derived from the French word sans, meaning “without”, this typeface does not use decorative finishing strokes associated with its formal counterpart. Because of its simplicity and clarity, Sans Serif typefaces are usually used for websites, signage, and government documents. A popular example that is used almost universally is Helvetica. 

Slab or Square Serif

Developed in the early 19th century, this style implies a heavy block-like serif. Slab Serifs are more geometric in style and have a strong square-like appearance than traditional Serif fonts. Rockwell, Aleo, and Courier New are a few examples of this mechanistic style.


In the early 19th century, Slab Serif was extremely popular for newspapers. The bold style was eye-catching and held up well is mass printing. 


Our Favorite typefaces

There are endless styles to choose from. Here are some of our favorite styles that we think would work well for different areas.

Parlour

We love this rustic and masculine typeface, and think it would be perfect for menswear brands, barbershops, and tattoo shops. 

Hermes

This style is a popular choice for designers because it’s minimalistic, yet strong.

Oraniembaum

We like the retro feel of this stylish serif typeface, and think it would be great for blogs, headlines, or logos.

ADAM

Clean and easy to read, this modern San Serif style provides a futuristic feel to websites and logos.

Knubi

This serif typeface is delicate yet memorable. It would work well for magazines, brochures, books, and most printed media.

Zefani

Zefani has a sophisticated feel and would be perfect for luxury projects.

Rockwell

This thick slab serif is a great choice for eye-catching titles and headlines.  
 

Korneuburg Slab

We love the old world feel of this eye-catching serif typeface. 
 

Julep

We love this versatile typeface, and think it would be perfect choice for fashion brands, coffee shops, or bakeries.
 

Moderne Sans

This typeface was inspired by 1920’s typography. This minimalistic style pairs well with images. 

 

Shepia

This script adds a fun vintage feel to fashion labels, signage, packaging, and logos. We like that this typeface isn’t gender specific, so it would work well for both menswear and women’s fashion. 

 

Not sure where to find different typefaces? We’ve got you covered. Here are a few of our favorite sources- several of them offer free downloads:

Dafont

Visual Hierarchy

Hype For Type
 

Great typography can elevate the quality of a design and transform it into something remarkable. It takes time, patience, and a lot of trial and error to develop this skill, so don’t get discouraged! Play around with spacing, placement, and color until you find the best fit for you.  Don’t try to force it - great typography speaks for itself.

What do you want to know about typography? Leave a comment! 


SOURCES:
Source 1  |  Source 2  |  Source 3  |  Source 4  |  Source 5  |  Source 6  |  Source 7  |  Source 8  |  Source 9

Type Rules! The Designer’s Guide to Professional Typography, by Ilene Striver

Monday Links: Type, design and a free font

Happy Monday! I'm back with another roundup of links we've been loving around the Hue & Tone office...

Hue & Tone Creative -- Monday favorite links

One | Designers and design-minded people aren't the only ones who notice good design out in the world. This is a beautiful summary of the way type and lettering affect our daily lives.

Two | Quick freebie: I love this brush-style font, which is free to download.

Three | Speaking of fonts, brush up with this simple guide to pairing them effectively in your designs.

Four | Have a long drive coming up or just like to listen while you work? Try one of these 20 podcasts for creative entrepreneurs

Five | I love creating infographics, but creating an effective layout is tougher than it looks. Here's another simple, smart design resource to help you master visual arrangement.

Hope you've all had a fantastic start to the week!