Hierarchy feature

Type Hierarchy – Get in line, punk

Type hierarchy helps a piece to flow. Most design briefs are intended to communicate a message and as designers, we want to ensure we are as clear as possible. 

Even if you have a lot to say, you can implement Type Hierarchy to break down the info so the viewer understands the message without feeling overwhelmed. Here’s an example:

Photo by Banter Snaps on Unsplash,  flyer designed with a template from Canva 

A Tale of Two Flyers

The first design is much easier on the eye and offers a range of text sizes and formatting. The second design is all the same size, meaning some messaging is lost and some is much stronger than it needs to be. 

The viewer struggles to understand the message of the piece and is much less likely to take the desired action. Meaning, as a designer, you have kind of let the side down and probably won’t get recommend or hired again. Soz. 

The Basics of Type Hierarchy

Try to include a distinct text style for the following element of your marketing designs and your work will both flow and communicate the message effectively. 

Header

This is the first thing the viewer should see. You can make it stand out by using high contrast (dark on light colour schemes and vice versa), choosing a bold or heavy font variation or just ensuring it is a little bit bigger than the rest. 

Sub Header

This isn’t always necessary but can be useful for adding that little extra detail once you have the viewer’s attention. This should still be prominent, but smaller than the Header. Try using a font from the same typeface family but choose a lighter version. 

Body Text

This is the meat of the messaging, but be careful not to go overboard. Too much Body Text won’t hold a viewer’s attention for long. Keep it short, well spaced and smaller than the other text on the page. This is also a great place to use mixed casing for the text, whereas either all caps or all lowercase works better in Headers and Sub Headers.

Call to Action (CTA)

This is likely the most important part of the design as it inspires the viewer to take action. This means your design is working and your client gets more leads and gives you a Whole Lotta Love.

Any excuse for a Led Zep reference

CTAs should stand out, but not detract from the Header and overall message of the piece. Try making them smaller than the Header, but bigger than the Sub Header. Also experiment with spacing, it is currently really on tend to include websites as a CTA but include lots of space between the individual characters. Be playful but follow these rules loosely for better design results. 

Sans serif feature image

Super Sans-Serif

Sans-Serif fonts are easy to identify, the clue is in the name. Obviously being French speaking here helps a little… oui. 

Sans-Serif = Without Serifs (the tails of letters found extending in Serif fonts.)

Sans-Serif fonts are currently super popular in modern design as they are clean, sleek and modern.

They developed much more recently than Serif fonts due to advent of digital technology. When technology had low screen resolution, the small details that made Serif fonts look so good were lost and just began to look messy or blurred. 

Enter the Sans-Serif font to save the day.

Modern and Minimalist

Sans-Serif fonts are clean and bold, making them ideal for large, attention grabbing headings:

However they are not so great to use when creating large blocks of text, especially if the end result is designed for print. This can be done but it risks being lost as the eye passes over the text. Sans-Serif fonts are good for short blocks of text, so leaflets and one pagers, but if you are formatting a book, stick to Serif typefaces. 

Examples of Sans-Serif 

These fonts are often used in branding and logo design to convey the message the brand using them are up to scratch in the fast moving digital modern world. Google rebranded their font from Serif to Sans Serif to create a logo which was more playful and accessible. 

Here are some examples of other Sans-Serif fonts you probably see everyday but never realised!

sans-serif font examples
Image found on Pinterest

how to use serif fonts example

How to Use Serif Fonts

Now we know the difference between the various font types, it is time to learn their strengths and weaknesses. Starting off with how to use serif fonts.

History of Serif Fonts

Serif fonts are divided into four types as they have been developed over the course of history. Starting with Old Style in the middle ages, to Transitional styles in the mid 1800s, to Didone Modern and Slab Serif used today. Of course all of these font styles are still in use, it just depends on your intention which one you choose.

Old Style

These fonts were created for books and pamphlets, these are easy to read even at small sizes. Old style fonts are useful for larger pieces of body text and can give a historical feeling to a piece.

Old Style Serif fonts include: Minion, Garamond and Palatino.

Transitional

Transitional fonts bridge the gap between Old Style fonts and more modern typefaces. They are still consistent in their thickness ( a defining feature of Old Style fonts) but their endings are much more rounded. Therefore, they have a much softer look.

Transitional Serif fonts include: BaskervilleGeorgia and Times New Roman.

Didone Modern

Emerging in the late 1800s, Didone Modern fonts are highly stylised and make great use of white space when the kerning is increased. The thickness between various character parts are much  more dramatic, so they provide striking font designs used by the likes of Vogue. 

Didone Modern Serif fonts include: DidotBodoni, and Century Schoolbook.

Slab Serif

Slab Serif fonts are bold and striking, ideal for use in posters or to grab attention. The characters and serifs are heavy, thick and block like. This typeface style is designed for use of posters and to catch the eye. They are best for headers, titles and statements. 

Slab Serif fonts include: Rockwell, Memphis and Courier.

The Anatomy of Type

So, now we know the difference between a font and typeface, serif and script, it is time to go a little deeper into understanding the Anatomy of Type so you can both look super professional to clients and also understand what the hell other designers are talking about. 

anatomy of type gif
Yes, fellow designers, I agree…

Common Anatomy of Type Definitions

Baseline

The line the font tracks or rests on. 

Descenders

Any part of lowercase letters which drop below the baseline.

Ascenders

Any part of the character that goes above the x- height of the font.

X-height

This was originally the height of the  lowercase letter ‘x’ in traditional fonts. It refers to the height of lower case letters without their ascenders or descenders, but can vary within font. 

anatomy of type illustration

Tail

The tip of the character, the very end of the descender.

Ears

Any part that sticks out of the side of a letter, usually found in serif or script fonts. 

Loops

Fairly self explanatory. Often found in more cursive or decorative fonts. 

Closed Counter

The area within a letter, for example the inside of  an ‘O’

Cross Bars

The part of a letter which connects, such as the middle of an ‘H’ or ‘A’

These are all parts of the characters and letters which can be fun to play around with when creating designs and logos. Just be careful not to draw too much attention to the anatomy of the type, as it works best when used subtly. 

Further Resources

Check out Adobe’s Glossary of Type Terms for more on the anatomy of type. Canva also provide this wonderfully illustrated guide too.  You don’t need to know them all, but a basic understanding goes a long way when using fonts to their full potential.

typography basics header

Typography Basics 101

A picture paints 1000 words, but get the typography basics of a piece correct and your words will say just as much. 

Typography is the art of technique of displaying words or text in a readable, digestible and appealing way. Get the typography basics right and your messages will be elevated. Get them wrong and you may be saying something completely different from the word meaning itself. 

For example: 

typography basics header

Font vs Typeface

A font is a collection of glyphs (characters, numbers and punctuation). A typeface is a collection of fonts that share similar attributes, but vary in size and weight.

typeography basics typeface font

Font Classifications

So there are billions of fonts out there, but they can be generally grouped into three classifications. Serif. Sans Serif and Script. Fonts can also be extremely Decorative

typography basics font types example

Using Fonts Correctly

The best way to get to grips with typography basics is to practice. The more familiar you become with fonts, typefaces and font connotations, the easier you will find it to navigate which font will work best for you client’s purpose. 

Starting with the basics is great. Then you can also find and experiment with free fonts from websites such as dafont, 1001 Free Fonts and Font Squirrel. You can also purchase fonts from sites such as Creative Market. This ensures you both have the license and rights to use the font, and also sends some well earned money into the designers pocket. We all win.

creating_colour_palette_header

Creating Colour Palettes (and why you want to)

Creating colour palettes is one of the best places to start when you are deciding the colours to use in your art, or which colours to use to invoke certain emotions.

It is fun and easy to do, and can help you look professional when you are starting to work with a new client. Creating colour palettes for client moodboards, or just for fun, is also a great way to practise using colour and understanding what works, and what doesn’t.

Tool for Creating Colour Palettes

On of the best ways o get started with creating moodboards is to pull an image that captures the vibe you are looking for. These three online tools will help you do that. 

Canva

Canva is an excellent online design tool that every designer should be aware of. Many clients now use Canva to do their own design. This provides both the potential for some really wonderful designs…. and some really 💩ones. That is where you come in to save the day. 

Canva also have a colour palette tool which integrates into their programme straight away. You can upload your image, generate the colour scheme and get started straight away. 

crating_moodboard_canva

However, one major con with Canva for generating colour palettes is that you have no control over the colours given. This is great for basic designing, but not so good if you want to really fine tune your colour messaging. 

Coolors.co

Coolors is a great tool to create colour palettes with. Like Canva, you can upload an image to select a corresponding colour palette. It evn has a remote image option so you can add image links from around the web. You have a bit more control over the colour selected with Coolors too, as you can select colours from the image or allow the programme to generate it automatically.

You can lock, adjust and mix the colours presented with Coolors, or if you are feeling adventurous, just hit ‘Generate’ to see random colour palettes you can tweak. This is a great starting point if inspiration is looking a little thin on the ground. 

Adobe Color

Using Adobe to create colour palettes gives a fair few options that make it more suitable for professional designers. Not only do you have more control over the colours selected, you can also switch to the colour wheel view create various colour schemes including monochromatic, triadic and colourful variations. 

The best feature however is that if you are an Adobe user, you can save the colour themes created directly to your Adobe CC suite. So you can use it across the Adobe suite in seconds. 

In the End

… it is up to you which tool you use, just make sure to create colour palettes often. Share them places like Pinterest to both show clients that you understand colour, and to have a little fun. 

impact-of-colour-simpsons

The Impact of Colour

We see life in colours from around 3 months old, so the impact of colour on our moods, actions and decisions starts young. 

Colours invoke feelings and sensations and can trigger memories both in our subconscious and out conscious minds. Learn how to use the impact of colour in your design work and your branding, logos and visual messaging will be a lot more powerful. Don’t just spin the colour wheel like a colourful game of fortune, be strategic and watch your designs improve.

Key Colour Connotations

Red

Connotations include energy, danger, love and passion

Orange

Makes you think of excitement, art, food and warmth

Yellow

Brings thoughts of sunshine, happiness and grabs attention

Green

The colour impact of green is thoughts about nature, health and calm. 

Blue

Blue brings thoughts of trust, loyalty and security.

Purple

Provokes thoughts of luxury, pride and wealth. Especially rich violet shades.

Brown

Whilst not the prettiest of colours, can invoke thoughts of reliability, nature and honesty.

Grey

A personal favourite, and lots more than 50 shades available, grey can make viewers think of neutrality, communication and composure. 

Black

Black is the absence of all colour (see here fore more on how colours actually work) but has connotations of power, elegance and discipline. 

White

Technically all colours, the impact of colour for white is thoughts of purity, cleanliness and light . 

This handy graphic shows a few more colour connotations. The chances are you know a few of them already as they are fairly universal. That is the cool thing about the impact of colour. I may vary from culture to culture, but the connotations of colour across the globe are remarkably consistent. 

colur connotations graphic

Moodboard: Oslo Design Faves

Norway is famous for it’s Scandi-style. I investigated with a 3 day trip to the capital Oslo to discover what inspiration the city had to offer.

modboard_oslo

 

Fonts and Geometry

Brand identities on my Oslo Moodboard include Babel , Hevn, Crow and Tunco, whilst the gorgeous wallpaper design inspiration comes from Stockfleths (top left) and Joe and the Juice (bottom image).

Angles and sharp, impactful fonts definitely tie my design picks together, as well as the monochrome (or at least very subdued) colour palettes. The green and gold triangle patterns from Stockfleth’s wall in the Nobel Peace Centre was my favourite colour pick. This is because it conveyed both nature and luxury at once. A balance I am always struggling to get right in my life.

 

Astrup Fearnley and Fredrik Værslev

I spent an afternoon in the Astrup Fearnley Museum checking out the Fredrik Værslev as I Imagine Him exhibition. Favourite pieces include the Canopy series (because I am a sucker for gradient lines) and Sail pieces.

Astrup Fearnley Entrance Hall

I also stumbled into a room with lots of Damien Hirst pieces (including that one of the cow) which was interesting, but I could have definitely been better prepared. That is a blog post for another time however…

essential-colour-definitions

Essential Colour Definitions

Working with colour goes wayyyyyy beyond simply picking a colour you like and rolling with it. Understanding colour theory begins with understanding some essential colour definitions. This includes how colours are created (see here) and the Additive and Subtractive colour systems.

The following terms will be handy to use as you embark on your own colourful adventures. Let’s get going!

via GIPHY

Swatches Palettes and Tones, oh my!

Swatches

A swatch is a sample of colour. You have most likely seen them before when trying to pick a colour of paint and are painstakingly comparing pearl egg with ivory silk, or some other obnoxious sounding names for shades of magnolia. Saving your swatches as you work with a design speeds up your work flow and helps keep consistency.

Palettes

A palette is a collection of swatches used in your designs. Having a simplified palette can really help create a strong, consistent brand. Many designers and artists like to work with palettes created from set images. You can do this with sites such as Adobe.Color and Coolors.co.

Duotone

Duotones are super useful when thinking about printing.

You can create Duotones by discarding all colour information in an image (creating a Greyscale), before adding colour information back in with two contrasting tones.

The second image below is a preset Duotone example found in Adobe Photoshop. The third image is an example of a Gradient.

essential colour definitions examples

Gradient and Gradient Maps

You can use gradients to create a blend of colours or patterns. As a result, some really cool designs will be created.

via GIPHY

 

Adding a gradient map to an image inputs more colour information and allows you to choose how the darker and lighter tones are represented. When you use a Gradient map that blends many colours, your designs may become more psychedelic. Using a Gradient map with contrasting colours creates something more striking.

 

jeff-koons-colour system

The Science of Colour Systems

To get a better understanding of how to use colour in design work, we have to understand how colour works itself. Introducing… Science!

bill-nye-science

There are two main colour systems you need to understand as a designer. One is Additive the other Subtractive.

Additive Colour System

As we learned in the last post The Basics of Colour, colour works when light waves of certain frequencies bounce back into your eyes. The ‘colour’ of something is the property of the light it absorbs.

The Additive Colour System works by, you guessed it, adding additional light to a hue so that different light waves are viewed by your eyes.

For example, when you view the colour red, your eyes are picking up the red light waves bounced back. Same with blue. But add red light to blue light and you get…

red_blue_colour_system

Magenta!

But wait, if you look a little closer, you will see that your brain has actually been tricked and the object/image you are viewing is not technically magenta. You have been fooled, by Science!

bill-nye-science

Ok, I’ll stop that. Although your eyes view magenta, you are actually still just picking up red and blue light waves. However, this is enough to ‘create’ magenta as your brain cannot distinguish the different colours, creating a mix.

jeff-koons-colour system

If you look carefully at the Jeff Koons painting above, you will see how two dots of different colours create a third colour where they overlap. It is this overlap of lightwaves your eyes pick up and interpret as a new colour.

Subtractive Colour System

The Additive Colour System works by adding light, so  is used for screens and digital media. A close inspection of your computer screen will lead you to seeing how pixels are individual colours of red, green and blue moving and changing to create your display. But what about print media?

comic_colour_systems

The Subtractive Colour System works by absorbing, or subtracting, the light waves reflected to change the colour viewed.  Where Additive Colour Systems start with darkness and add light to create colour, Subtractive Colour Systems start with all colours (white) and take colours away to give the impression of an objects ‘true’ colour.

Because Subtractive colour systems work by absorbing light, they are ideal for print and physical media.

FYI: RGB and CYMK

colour_systems

Each colour system works on its own combination of ‘primary’ colours. For the Additive Colour System, red, green and blue lights are used to create colour. SO when working digitally, use the RBG colour system.

For Subtractive Colour System, the main inks used to create colours are cyan, yellow, magenta and key (CYMK). Key is black and used to darken a colour.

Now that we understand how colour is created using various colour systems, we can look at how to use colour for digital and print without making a mess or a mahoosive file size.