Design a sharp typographic logo, even if all you have is TextEdit

Lesa Snider
27 February, 2015
View more articles fromthe author
AAA
Help

Type, design, logo, macworld australiaLogos are notoriously difficult (and costly) to design, yet they’re mission critical for any business. Instead of using graphics, try a typographic approach instead. Typographic logos, like the ones shown here – some inspired by tips in Before & After – are both timeless and classy. In this column, you’ll learn tips for making one yourself, which programs to use and how to make one in a word processor.

Design tips

No matter which program you use to make your logo or what colours you decide to use (these examples are black for the sake of simplicity), the following design guidelines will put you on the path to success:

Incorporate contrast. Contrast is key in creating a visually pleasing typographic logo. To add contrast, try pairing big text with small text, thick fonts with thin, fancy fonts with plain, tight character spacing with expanded character spacing and so on.

typelogo 1

The more contrast, the better! When pairing big text with small, the big text must be more than twice as big as the small text. When pairing thin with thick, the thick text must be more than twice as thick as the thin.

 

Stack your text. Stacking lines of text into a block is another way to create a visually pleasing logo. That said, rotating text is far easier to accomplish in an image editor than in a word processor.

typelogo 2

Here are some examples of stacked text. If you go the “squished” route (middle), you’ll need to vary text colour to keep it readable.

 

Send the right message. Your font choice, as well as size and spacing, conveys a message. For example, an open, rounded font such as Futura or Helvetica Neue set in all lower case exudes a friendly, affordable feel, whereas a script font (say, Adios Pro) exudes glamour. A thin serif font (Copperplate) set in all caps conveys a feeling of exclusivity and extra dollar signs, while a slightly rotated rough font (Caslon Antique) exudes a casual, rugged feel.

typelogo 3

Notice how the different fonts and spacing make you feel.

 

The right tool for the job

For the most control, use a program that supports layers (so you can position and rotate text any which way you want), as well as transparency (so you can save the logo without a background). Pro-level programs such as Adobe Illustrator, Photoshop and InDesign are best and give you precise control over spacing via tracking, kerning and leading settings. The more affordable Adobe Photoshop Elements and Pixelmator also work well, though text formatting is limited. If you’ve got one of those apps, use it. But if not, keep reading.

What about a word processor?

You don’t get nearly as much control over positioning and formatting in a word processor as you do in a pro-level app, but Pages, Microsoft Word and yes even TextEdit can still get the job done. The downside is that the resulting logo will have a white background. The upside is that everyone owns a word processor – heck, TextEdit is free and already installed on your Mac.

To control text positioning in a word processor, you’ll need to use its alignment controls and, well, your trusty spacebar. To control the spacing between letters, highlight some text and then poke around for character spacing or kerning controls. In TextEdit, choose Format > Font > Kern > Tighten or Loosen. In Pages, choose Format > Font > Character Spacing > Tighten or Loosen. In Microsoft Word, choose Format > Font and in the resulting dialogue box, click the Advanced tab to reveal character spacing controls.

typelogo 4

Controlling the spacing between lines of text is more challenging. In TextEdit, highlight a line of text and choose Format > Text > Spacing. In the resulting pane, use the ‘Line height multiple’ field; enter a larger number to increase space or a smaller number (in decimals) to decrease space. In Pages, you can use the Format sidebar; just click the Format icon in the toolbar and then click the Style tab. Scroll down until you see the Spacing section and click its flippy triangle to expand it. Locate the field next to the Lines menu and increase the number to add space or decrease it to reduce space. In Microsoft Word, choose Format > Paragraphand in the resulting dialogue box, click the Indents and Spacing tab to reveal line spacing controls.

 

typelogo 5

For precise line spacing in word processors, try highlighting a single line of text and entering decimal points into the line height field, shown here in TextEdit.

 

Export and crop

When you get everything just right, save the file in the word processor’s native format so you can edit it later. Word processors don’t sport crop tools, nor do they let you save a file in JPEG, TIFF or PNG formats or control the resolution (pixel size) of these formats, but you can enlist the help of Apple’s free Preview app for all that. First, export a PDF from the word processor. In TextEdit, choose File > Export as PDF; in Pages, choose File > Export To > PDF (ignore the Image Quality menu as that pertains only to graphics). In Word, choose Save As and pick PDF from the format menu in the resulting dialogue box.

Second, open the PDF in Preview. Choose Tools > Rectangular Selection and then draw a box around the logo (use the blue handles to resize the box so it fits snugly around the logo). Choose Tools > Crop or press Command-K to crop the document. If you’ll print the logo, preserve the PDF format by choosing File > Save. Doing so creates a resolution-independent file that can be printed at any size at high quality (for the curious, text in a PDF is vector in nature, meaning it’s made from points and paths not pixels).

If the logo is headed for the web or inclusion in an email newsletter, convert the file into pixels by changing its file format. To produce the sharpest text, choose File > Export and pick PNG from the format menu and a resolution field appears. If you designed the logo at the size you want to use it, enter 72. If you want the logo to appear larger once it’s uploaded, enter a higher number.

typelogo 6

To close-crop the logo, use Preview (top). Choosing PNG and entering a resolution of 300 lets you post the logo online at up to four times its original size (bottom).

 

As you can see, it’s fairly easy to create your own typographic logo. Until next time, may the creative force be with you all!

Leave a Comment

Please keep your comments friendly on the topic.

Contact us