Web Development: Typography in Action: Design Simple & Effective Type Logos

Typography in Action: Design Simple & Effective Type Logos

Final product image — What You'll Be Creating

Typography plays a huge part in the way brands are perceived and how successful brands become with consumers. A wise choice of type can make a logo more memorable, more aspirational, more trustworthy, and more exciting. Minimal typographic logos are simple to achieve, and can often have more impact than a symbolic logo design.

Here, we’ll take a look at how designing with type can be used successfully across vintage type logos and other creations, and break down how you can create effective branding for different sorts of commercial businesses, using very basic typographic tips and tricks.

We’ll explore how simple tweaks to typeface, sizing, case, weight, tracking, alignment, and colour can really lift your typographic designs, and make them industry-appropriate in an instant. If you want to recreate the designs as you read, you will need to have access to Adobe InDesign.

We'll be using some specific fonts in the tutorial, which I'll mention later, but if you prefer to choose your own, you can find some great typographic logo fonts here:

Fonts

39 Best Fonts for Making Monograms & Logo Designs in 2020

Melody Nieves

Recreate the Designs Using InDesign

The typography logo designs pictured throughout this tutorial have been put together using Adobe InDesign.

To recreate the logos as you read, open InDesign and create a new document for Print. Set the Size to A4, and the orientation to Landscape. Set the No. of Pages to 1 for now; you can add pages as needed. Click OK.

1. Play Up an Ampersand

Many companies are formed through partnerships or collaborations and will have an ‘and’ as part of their company identity, e.g. Smith and Sons, D&G, H&M, Jones & Partners.

Consider emphasising the ‘and’ of the company name by giving prominence to an ampersand, ‘&’, in the brand design. A decorative, ornate ampersand looks elegant and old-fashioned, giving the logo a sophisticated, grown-up appearance. Using a large ampersand while designing with type also emphasises the collaborative nature of the company, which reassures the consumer or client that they are being looked after by an expert team.

Formal businesses that provide client services, like law firms or financial consultancies, would suit this sort of brand design, as would educational or academic institutions, like universities and museums.

This logo design is a great example of how to create a typography logo. It was created using Caslon 540 LT Std, set in Roman and Italic, though any serif font with a nice ampersand design could work just as well. The Italic weight of Caslon has a lovely curling ampersand, which complements the more traditional serif uppercase characters.

You can also set a prominent ampersand in a sans serif typeface. This transforms the look and mood of the logo design. This example design is set in BonvenoCF Light. It might work well for a digital agency or technology firm, or for a modern hospital or health trust.

Create the Logo in InDesign

Step 1

To recreate this serif ampersand design seen in vintage type logos, hop over to InDesign and open up the document we set up earlier.

Drag a guide down from the top ruler (View > Show Rulers) to provide a baseline to sit your text on.

Open the Layers panel (Window > Layers) and double-click the default Layer 1 title to rename the layer. Rename it as Guides and click OK.

Click the Create New Layer icon at the bottom right of the Layers panel to create a second layer above Guides. Rename this as Black Text. Repeat the process to create another two layers, the first named White and the top layer named Blue Ampersand.

Step 2

Click on the Black Text layer to ensure you’re working on that layer. Now select the Type Tool (T) from the Tools panel and drag to create a square text frame for your typography logo design.

Type a single letter into the frame and set the Font to Caslon 540 LT Std Roman, Size 150 pt. Sit the bottom of the letter on the baseline, marked out by the guide. Select the text frame and Edit > Copy, Edit > Paste, editing the letter. Sit the second frame to the right of the letter, with about a 20 mm gap between the two letters.

Step 3

Return to the Layers panel and click on the top layer, Blue Ampersand, to activate it. Create a third text frame and type '&' into it. Set the Font to Caslon 540 LT Std Italic, Size 170 pt. You can pull it out in a bold colour for contrast—here I’ve used a strong blue, C=86 M=0 Y=19 K=0.

Step 4

Lock the Blue Ampersand layer, and hop one layer down, to White. You can apply a touch of white to create the appearance that the far left side of the ‘W’ letter has been erased by the ampersand.

Select the Ellipse Tool (L) and drag to create a small oval to fit in the top right corner of the ampersand. Set the Stroke to [None] and the Fill to [Paper]. Repeat to create a second small oval that sits in the bowl of the ampersand.

And you’re done! An elegant interpretation of vintage type logos pulled together by a bold ampersand.

2. Frames Can Give Logos a Stamp of Authority

Some brands need to have more than just their name as part of their brand identity. A client might ask you to include a slogan or office location(s) as well.

You can balance out different sections while designing with type by applying an A, B, C rule. A is the company name, and should be the largest heading. B is a sub-heading, for the next largest and next most important piece of information. The C heading is the smallest and least important piece of text.

So in this example of how to create a typography logo, 'The Hotel Company' is A, 'New York London Paris' is B, and 'World-Class Service Since 1952' is C.

All the text is set in Arial Bold and Regular. Increasing the Tracking (the space between all the letters) also increases the legibility of the logo and gives the letters some room to breathe.

That’s all fine and the text looks balanced, but the text still looks, well, just like text. How can we transform it into something that looks more like a logo?

Strokes and frames are really simple to apply to your branding designs, but are sometimes overlooked. Framed by four simple black solid strokes, the text is transformed into an understated, minimal logo.

Put a solid black frame around the text, and the logo appears more like a stamp. This design style would really suit lifestyle brands or luxury retail.