A brand identity is an impression, and we all know that we only have a few seconds to make a good one.

This identity is a visual shortcut to the value and connection you offer your clients. Here at A Lined Design we like to say that design gets you the phone number, and copy gets you the second date.

 

The Role Of Fonts In Brand Design

Some of the building blocks a brand needs are colours, logos, fonts, design, voice, messaging and tone. When these elements work well together, you get a cohesive brand that conveys your message well and connects with your intended audience.

As you can imagine, when the (elements) don’t work well together, you’ll leave customers at best, unsure if they want to work with you and at the worst, clicking away to one of your competitors.

Now that’s a lot of decisions for a business to make, and it can be intimidating. This is why our clients trust us to guide them through the process.

But what if you can’t hire a professional? We are here to help. This article goes in-depth to help you as a client of DIYer understand fonts, font pairing, font design, and how it all works to help you convey the brand story you want to tell.

What Is A Font Though?

If you look in the dictionary, the definition of a font is “a set of type of one particular face and size.” Cool. So it’s the form of the letters and glyphs which make up the words we read (spoiler alert, even the dictionary has a specific font).

Considering all brands ask us to do some reading, even if it’s just in their logos, you can see why font choice is critical.

Think of it this way…

Nature documentaries are often narrated by Morgan Freeman or David Attenborough. Their voices have authority, strength, and a sense of calm.

Fonts have that same power. They carry time and past and history with them. All fonts have their own story to tell, and they will help you share yours.

And this is why they are so meaningful and so specific.

Investigate Why Your Font Was Made In The First Place

This will give you clues about the font’s personality. Designers have inspiration and purpose. Fonts are always developed for a particular purpose and to convey human characteristics.

For example, our heading font is called Jazmin. It’s pretty damn cute.

Latinotype, the font foundry who made Jazmin, have this lil bluby about her:

Jazmín is inspired by "Globe Gothic" design yet features different proportions, curves, serif shapes and contrast, which give it a classy, playful and a more contemporary look. The family comes in two versions: an elegant font of 8 weights-ranging from Thin to Black-with matching italics, and an alternate, more playful counterpart with the same number of weights and italics. The whole Jazmín set contains 566 characters which support over 200 Latin-based languages. Jazmín is ideal for magazines, short text, logos, branding design, packaging and advertising.

And what does that mean for the brand on the street? Let's look a little deeper. "Globe Gothic" also has a purpose and history

This series of faces was designed initially by Morris Fuller Benton, circa 1900. The design is a refinement of Taylor Gothic from 1897. It features a sans serif thick and thin design with angular stems. Pre-dating art deco, this design feels quaint, yet it still has a touch of modernism. Frederic Goudy designed a bold version of Globe Gothic in 1905 for ATF. The Bold and Bold Italic digital versions have been added to the LTC library in early 2007.

Alrighty then, now we are getting somewhere! Quaint but modern. Playful, classy and contemporary.

This is precisely what we wanted as our business vibe. Great choice, me (wink, it was intentional)!

Okay, story is one thing. But what does the font actually look like?

 

Okay, Story Is One Thing. But What Does The Font Actually Look Like And How Is It Constructed?

There are a few parts to a font. Up parts, down parts, round parts. Remind you of learning to trace the alphabet in school? When we're talking about font design - how these parts work together to create a picture with words – we need to break it down even more.

 

The Font's X-Height

This one is a biggie. When choosing fonts for readability - so body fonts on a website, for example - you need to have a bigger x-height for the simple reason that there is more font to read.

 

Descender And Ascender

When choosing fonts for the web, I try to avoid really extravagant descender and ascenders. They ill run over the lines and get all wrapped around each other. Compact fonts are best.

If we’re just talking print design, there is more leeway. We can slot in the ups and downs between each other and make a cohesive picture. Without that control, though, it’s gonna get messy. You also need to take care that you don’t have a bunch of white space hanging around and not adding anything to the overall design.

 

Serif And Sans Serif

Most other blog posts you’ll read about choosing a font for your brand would have started with this old chestnut. Serifs are the little ends on your letters. Sans serif, well… it’s sans (without) the serifs. Serifs are part of the font's story and character. Typically, serif fonts are more formal, and sans are less formal. Serif typefaces have historically been used to increase both the readability and reading speed of long passages of text because they help the eye travel across a line, especially if lines are long or have relatively open word spacing (as with some justified type). See? There is some Science involved too!

Serifs though can confuse children who are learning to read and those who the Latin alphabet is not their first alphabet.

How Do You Choose A Script Or Handwritten Font For Your Brand?

This is so gonna be another post, stay tuned for that.

Knowing that each font has a journey and a purpose, the first thing to do is find why the artist was inspired to draw as they did. Was it for a wedding invitation? A chalkboard in a café? Or a strong hand at the bottom of a legal letter?

You can see how those purposes could really influence the vibe of the writing? OH YEAH.

Let's look at a few examples. 

Now, imagine a person writing each of these. Can you imagine a burly bloke writing in Amberlight? Or A lawyer? Probably not – it was developed to be modern and sweet. It’s also really feminine. Perfect for a wedding photographer or cake maker, perhaps.

Now let’s look at Superfly. Look at that brushstroke – kinda fast-moving, isn’t it? This person was in a rush, writing notes in a flourish. I can imagine someone feminine or masculine writing in this script. We’ve used this font for Walk on kunanyi to bring in the feeling of making field notes in a classy way. That lowercase r is in cursive, a very subtle way to bring in class.

In the middle, there is Signature Collection. You might have noticed it around our site. We chose this because it is monoline like our artwork – a single width of the line the whole way along. It’s got a feminine vibe, and so do we. It was designed to be chilled – like us!

So what can you tell about our brand from the font’s we’ve chosen? Feminine, chilled, a bit quaint but modern, playful, classy, and contemporary.

That’s a lot to pack into a design.

And that’s how significant fonts are! Hit me up with any and all font-related questions in the comments.

Psst!

Love this post? Share it on Pinterest for us, will you?

Building a colour palette can be SUUUUPER fun, but it can also take way more time than it should and even a source of annoyance when the whole thing just doesn't sit right.

I know you know what I mean.

So here's a few of my favourite ways to put together a colour palette for Canva, brand design, mood boards, inspiration, hell even decorating your house.

Colour Palette Ideas

Coolors

Lots of fun, simple interface, nice and big!

You can drag the colours into a different order, save one you like then hit spacebar to build a palette around it, upload a source image, have a look around what others in the Coolors community, and export your palette in six different formats.

One thing I love is that the hex codes are in the url of the page, so you can grab the text from the search bar and save it in a document for later. HANDY.

Coolors is even available as an iOS app and Adobe add-on.

 

 

Canva

Good old canva.  Great for so many things, and one of its lesser know talents is palette building. Jot those handy hex codes and go right to canva!

 

 

Design Seeds

Not really a palette generator, but a source of wonderfully curated inspiration. Search by theme, colour, and spend too much time wandering around wonderful colours.

Love this.

 

Colormind

Colormind is a color scheme generator that uses deep learning. Deeeep.

It can learn color styles from photographs, movies, and popular art. Different datasets are loaded each day, so there is always something new to play with and new ways to put colour together.

Lock down a colour you love, and let colormind weave it's magic around your selection.

 

 

ColRD

ColRD is an intuitive color palette generator with a range of options. When you're working on a colour, you'll get 140 similar friends lined up in a grid so you can simply choose that one which works rather than fiddle with all the controls.

There are so many community images with colour palettes to explore as well.

 

 

Colordot

So minimal. Move the mouse around your screen, choose a colour, move your mouse around the next screen, choose a colour... wash, rinse, repeat. Click to save. Simple!

 

 

Colorfavs

Colorfavs is probably the best "get colours from an image" solution.

Load your image and get not only a palette generated from the image but suggested friends as well. For every color in your palette, you can view hex conversions, standard color schemes, gradient tones, and a bunch more.

Colorfavs has a large community who are super helpful.

 

 

Palettr

If you're really struggling and all you can think of is 'I need mountain colours' or 'shades of beach would be nice', then this is your solution. Type in the keyoword and off you go!

 

Palettr user interface

 

Have Fun!

Nailing your colour selections has as much to do with your anticipated audience as what looks 'good' - you'll need to keep the mindset of those folks in your process when finalising that scheme.

Personally, I love playing in Coolors. Lots of answers to be had in there.

How do you choose your colours? Which projects give you the most colour grief? Which of these solutions has you excited?

 

This tutorial uses layers to build your image: see my previous post on how to use layers.

Get into canva, and select the facebook cover option. This will give you a cover which is sized to desktop: facebook covers are not responsive so keep that in mind when you design, as your edges will disappear.

Upload and drop your background image onto the canvas by clicking on it once. You can resize by clicking and dragging the corner. To maintain aspect ratio, hold down ctrl (otherwise it'll get squished out of shape).

Click on the image you want on top and it will appear on the canvas. Notice how if you move your image too far off canvas you can lose layers? Ctrl + Z is your friend: just keep playing until you get it right. Adding an image will always result in the new image on top, so use the arrange button in the top left to send it to the back again if need be.

When you're done, save and download as .png.

If you find your graphic is grainy when uploaded to facebook, you will need to remake it at double the canvas size. Go to the tutorial to make you about image to find out how to make an image based on a custom canvas size or how to correct a blurry image.

 

Layers are great, but there are a few tricks to know. Remember, if the video goes too fast for you, remember you can pause it. In this example we are using a frame to make an about image for the sidebar.

 

Click create a design, then use custom dimensions. You want to make sure that your canvas has the same dimensions as your frame. To find out what those dimensions are, find your image and click on it. Then press CMD+I (on Mac) to see what the dimensions are in px. Type those dimensions into your project, and then Design!

 

Next, you need to upload your images. The Upload button is at the bottom of the sidebar on the left. One uploaded (how cute is that duckie!), simply drag and drop onto your design. You will see that your frame is transparent in the middle. Position it on top using the Arrange button in the top right toolbar. You'll find that if you drag your images too far off the canvas the arrange option disappears. Don't worry too much about having everything neatly at the edges as you can trim it all later in wordpress > edit image once it is uploaded. Just focus on getting the layering right.

 

You can change which image is in front by using the arrange button in the top left corner.

 

Once done, click Untitled Design up the top and give it a name. Then click Download, and download as .png.

 

 

Canva is the bee's knees. If you don't have access to Adobe products, can't wrap your head around sketch, and want to be held by the hand a little... Canva is for you.

But one thing that can happen with canva is blurry images. This is due to is being great at cutting out unnecessary stuff (optimisation) but not so great at keeping all the information to keep it super crisp.

Making images for the web is a balancing act between image quality, image size, and canvas size. Totally different beasties.

Now, to be fair I made these images in Adobe Illustrator... but what I say goes for all images.

Exhibit A

 

Exhibit A

 

Ew. Pixelated and not happy. Vital stats: canvas size 602x400 pixels, 77KB, resolution 72ppi.

 

Exhibit B

 

 

Much better, clear and pretty. Vital stats: canvas size 602x400 pixels, 265KB, resolution 300ppi.

The cost of having these prettier images is size.  Bigger page sizes take longer to load,  search engines will penalise sites where the images aren't scaled or optimised (if you have a 3000x1000 pixel image in a slot for a 300x100 pixel image, it's waaaay bigger in terms of cnavas size and data than it needs to be, so you lose brownie points).

But if you're using your image for a facebook header, instagram or the like and you've made your image to the canvas size that site wants... and it's blurry? Up the canvas size and let that site compress it for you. Make sure your calculations keep the aspect ratio the same.

If you have canva for business, you can actually change the canvas size of an existing design. Otherwise, you'll have to make it again.

If you'll use that image later on your own website, pay attention to its placement and trade off quality/canvas size/data size and make the best call for your use.

 

That about me bit in your sidebar of a reminder to your readers that, "Hellooooo! I am here! I own this place and if you think it's pretty kewl we should definitely connect and make lovely business together".

It's important.

Choosing a nice picture and presenting it well is also important.

 

Well, that's not exactly professional... Out of focus areas, burned out areas, colours not so great. Yeah, nah.

Look at the camera, you silly bird! Colours have flared, burnt out areas in the background. Nope.

In focus, edited within brand colours, shows personality, professional. WINNER.

What format will you choose? In a frame? A circle? An overlay of some kind? An underlay?

Options. Lots of them. But Let's choose three to start with.

 

You might be lucky enough to have a frame to use, which MUST have a transparent centre. It will be in png format.

Remember, if the video goes too fast for you, remember you can pause it.

First, get yourself an account at Canva.  Once you start using it, you'll be back here constantly!

Click create a design, then use custom dimensions. You want to make sure that your canvas has the same dimensions as your frame. To find out what those dimensions are, find your image and click on it. Then press CMD+I (on Mac) to see what the dimensions are in px. Type those dimensions into your project, and then Design!

Next, you need to upload your images. The Upload button is at the bottom of the sidebar on the left. One uploaded (how cute is that duckie!), simply drag and drop onto your design. You will see that your frame is transparent in the middle. Position it on top using the Arrange button in the top right toolbar. You'll find that if you drag your images too far off the canvas the arrange option disappears. Don't worry too much about having everything neatly at the edges as we'll trim it all later. Just focus on getting the layering right.

Once done, click Untitled Design up the top and give it a name. Then click Download, and download as .png.

You can actually run through the same process as above if you have a frame which is a white background with a circle cut from the middle. In fact, you can download one here.

You'll need to add your image to the sidebar (see above in the frame section for a video). This gets your image in the sidebar, though square for the time being.  With a bit of CSS/HTML styling you can make your image into a circle .  You really must start with a square image in order to get a nice trim using this method.

The traditional route is putting a border-radius on your image. The border radius property makes this curved or not curved on the edges by the amount you specify. You can specify a percentage or pixels. What's the difference?

 

 

border-radius: 999pxborder-radius: 50%

 

 

I reckon pixels are great for buttons and fields, but percentages suit our purpose a bit better for an image trim.

See the Pen A better circle crop for images by Sarah Crawford (@ALinedDesign) on CodePen.

 

 

Even better? You can use a clipping path. It guarantees a circle at all screen widths, and image aspect ratios. No funky ovals here.

See the Pen A better circle crop for images by Sarah Crawford (@ALinedDesign) on CodePen.

 

Love my image? It's got an svg overlay, which has a transparent background so it doesn't interfere with my photo. You can also use transparent png files for this version. This is an advanced bit of code: you need to understand that svg and png need different styling in terms of position, and width/height set.

 

See the Pen About me image with an overlay by Sarah Crawford (@ALinedDesign) on CodePen.

 

Want to make the overlay an underlay instead? Switch up the z-index (higher sits on top). You won't need to worry so much about having a transparent image with an underlay.  Watercolour splodges, for example, are likely not transparent so best behind your image. For example...

Now a bit of backwards to go forward - get that image into your site then into the sidebar.

First, upload your image to Wordpress. Click Media > Add New > Select Files.  When your image is finished uploading, click edit.  When you enter the editing window, click edit image. To crop your image, which you will need to do when you have saved from Canva, select the part you want to keep and then click the crop icon in the top left of the editing window. Then save your work.

Select your file's URL and copy it.

Now, click Appearance >Widgets. Find the Text Widget. This  Widget allows you to use html code in a Widget area. Stay with me here. You use html code to get your image to appear.

Add the Text Widget to your sidebar. Paste your URL into the content box, clicking the 'text' option rather than the 'visual' option. Then add the code you need to execute whatever version of image you'd like, replacing the code for my image with yours.

Save your widget when complete.

 

So, what do you think? Inspired? Ready to make your sidebar about me image shine?

If you need any expert help reach out and say howdy!

a lined design logo with circular tagline salt pink rgb
We’re a creative brand and web design agency based in Hobart, Tasmania servicing clients all around Australia and the world. We specialise in helping creative entrepreneurs shine online.
data privacy certified agency partner
members
Awiaartboard 1
members
Agda
proud sponsor
Kivaartboard 2
Wpe Badge Hq
your voice matters
lgbtq+ rainbow flag quasar progress variant
Copyright © 2016 – 2022 Sarah Crawford t/as A Lined Design
magnifiercrosschevron-downcross-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram