Working with Types: Typography Design Tutorial for Beginners

Posted in Text Effects, Tutorials • Posted on 14 Comments

In this typography design tutorial, I will guide you on how to transform boring texts to your advantage. You will learn how to utilize typography for your website, or even for your print needs. This article will extend from web page design, to printing to graphic images.

They say letters are boring. Unlike videos and music, text is static. It does not move or tickle other senses besides the eyes. Texts are usually placed as information-dissemination tools which convey the detailed message of the media being used. For example, if you upload a YouTube video tutorial, the video is the dynamic medium which will aid the viewer to achieve the goal. On the other hand, the text will provide all the details needed in case something is not clear.

This fact might give you an impression that texts are really boring. But what if they are really not? What if texts, which are used mainly to detail, are used for the design function? How is that possible? Of course, through typography.

Typography has existed for a long time. It originated from a time we all couldn’t remember. Basically, typography is the technique of putting texts or types in an orderly manner to make it visible, attractive and readable. Simply put, typography is the art of working with texts, graphically.

The tutorial is divided into five parts:

  1. Creating Typographies Using Photoshop
  2. Choosing the Perfect Fonts for Every Occasion
  3. Where to Download Fonts (Free and Premium)
  4. How to Consider the Perfect Colors Fit for Your Design
  5. Sample Finished Product on a Website

Type, Design, Publish!

Aside from Adobe Illustrator, Photoshop is also a good software that can help you render good typographies. This is easier and more advantageous to use if you are a web designer. In Photoshop, you could create typographies, render it as pictures, and even layout your own website!
So, what are the things we should know to create Photoshop typographies?
First, you should familiarize yourself with the Type tool. It’s a flexible tool in Photoshop where you could customize the types according to your preference. You can find it in the tool palette of your Photoshop software, or simply press the shortcut ‘T’.
The Type tool has three sub-tools. They are the:

  • Horizontal Type Tool – this sub-tool will enable you to type text as you type normally, from left to write.

typography-tutorial-Horizontal

  • Vertical Type Tool – this sub-tool will enable you to type text from to bottom.

vertical-tool-typography-01

  • Horizontal Type Mask Tool – this sub-tool will enable you to type horizontally in a mask. This can be used if you want to use your Type in picture backgrounds. For example,

Insert the desired picture:

typography-tutorial-original
Use the horizontal Type mask tool and type your chosen word.

typography-tutorial-typetypography-tutorial-koalatype

You will now have the text masked over the main picture (notice the “marching ants” forming the world Koala).

typography-tutorial-marching-ants
Now you can cut the photo and what will remain is the masked area.

typography-tutorial-ctu

  • Vertical Mask Tool – basically the same as the horizontal mask tool. The only difference is the orientation of the type.

typography-tutorial-vertical-mask
One of the things that you should know are the text panels. In Photoshop, there are two text panels that you can find: one is located on top of the window, just below the Menu bar, and the other one is located at the right side of the window.

typography-tutorial-textpaneltop

typography-tutorial-side
The top panel shows the font face, style, size, alignment, color and warping options. The side panel shows the options for font face, style, size, spacing, kerning, leading, horizontal and vertical size, color, and style options.
The font face shows options where you can select from the different installed fonts recognized by Photoshop. Here, you could choose from Impact, Arial, Times or any other installed fonts. The font style shows you customizations for text styles. You could choose from Bold, Italic, Black, Bold Italic or Regular.

The warping option allows you to choose between options and warp your text, Just simply press the button as shown.

typography-tutorial-Capture
typography-tutorial-warp
Spacing shows you the distance between individual letters, kerning allows you to set the horizontal spaces between all selected letters. Leading, on the other hand, allows you to set the vertical spaces between each line.
Horizontal and vertical settings give you the liberty to decide whether your texts will blow up or shrink down horizontally or vertically. This option is different from the font size because the latter changes the size uniformly on both horizontal and vertical axes.

Aside from that, you can also choose whether to bold, italicize, large caps, small caps, subscript, superscript, underline or strike-through texts.

Familiarize yourself with the functions of these tools first before you move on to the next part.

Find the Fount of Fair Fonts!

Of course, as tools for design, typographies should be typed in attractive and suitable fonts. There are a lot of fonts available on the Web to download.

Fonts should be readable yet peculiarly attractive. It should suggest a feeling of belongingness in the typography that you are designing. Of course, using good fonts is as important as designing it. It creates a sense of identification for your site. Because of this, you need to familiarize yourself on its different kinds, forms and uses.

There are seven font categories. They are the most commonly used font types in designing. They are:

1. Old style – old style fonts are considered the parent fonts. They originated from the traditional methods of printing. These fonts are commonly identified through their serifs. Serifs are fonts which have flag-like endings. Also, the fonts in this category are commonly two-stroked, meaning, they are composed of thin and thick parts. They are often used in print output, like newspapers and books or in designs which require formality, credibility and simplicity.

Examples:

  • Times New Roman
  • Garamond
  • Book Antiqua
  • Baskerville Old Face

typography-tutorial-font-oldstyle

2. Modern – modern typefaces are commonly changing according to trends. One font can be modern depending on the pop culture. Commonly, modern fonts are digitally produced, meaning, they don’t have root traces on print fonts. These fonts are commonly used for movie posters, shows, and events.

Examples:

  • Bauhaus 93
  • Avengance
  • CollegiateHeavyOutline

3. Script – script fonts are fonts that have curves and ornaments. They are calligraphic in nature and suggest a theme of elegance, formality or luxury. Commonly used in weddings and other formal and conservative occasions, the script fonts are more evidently elaborate than the design itself.

Examples:

  • Script MT Bold
  • ANGEL TEARS
  • Before the Rain
  • Brush Script Std

4. Decorative – these decorative fonts are very thematic in nature. They are used to imply a very particular occasion or event. Often used in brandings which require recognition and easy memory stamping, decorative fonts can used for designing purposes.

Examples:

  • a dripping marker
  • Confetti Stream Gretoon

5. Sans serif – literally meaning without serif (sans is a French word which means without), Sans serif fonts are fonts that have no flaglike endings. They are commonly plain. These fonts are commonly used in main texts for print output and web texts. They are easy to read but plain.

Examples:

  • Calibri
  • Arial
  • Century Gothic

6. Ornaments – these are fonts that are based on symbols and pictures. They are best used for logos and secret messages.

Examples:

  • Symbol
  • Wingdings

7. Slabs – slabs are wide fonts with slab serifs. Slab serifs are thick horizontal endings placed on letters.

Example:

  • Blackoak Std

slab

Fonts, fonts, fonts everywhere!

The Internet provides us a huge database of downloadable fonts. Websites offer a wide variety of fonts ranging from usage to font categories. The only challenge that remains for us, is to actually look for them.

  • Font Space – this is one of the best sites as they claim to have 21, 043 fonts in their database. You can choose from the popular ones, or you can look for the newly uploaded ones. It’s up to you. Just click the font name or image and download.
  • 1001fonts - this one’s also claiming a thousand fonts. The only difference of this site from fontspace is that you could actually buy premium fonts here.

Other sites: dafont, 1001freefonts, fonts.

Now you’re probably wondering why the hassle to buy premium fonts if there are free downloads? Well, the thing is, there are fonts that aren’t free. Some of them, which are sold by their authors, are originally made. It means that the designs are as exact as you would want them to be. For more info on this, just read our article on fonts.

Are colors only for design?

Coloring can be fatal to a design. Failure to harmonize color to its target market could result into a decline of viewership for a website. Having a good color that is identified to your company or website, is as good as identifying it with the its logo. That is why a lot of websites have brainstormed on how to have the best logo color possible.

Think of Facebook, YouTube, Twitter, Google and Yahoo. Close your eyes and imagine a color when you hear their names. Of course, you would see exactly how they appear on your browser. That is the power of colors. They make you remember the site itself. With the eyes as the primary organ used in browsing the web, colors can help you earn a lot of money and viewers as well.

Think of your website typography. Will it have the same impact on your viewers? Will it stamp the same memory of your website to them? Or would they just forget it because some other website has a cooler way of using it?

According to Kissmetrics.com, 93 percent of people remember the company by their color. Meanwhile, the same research shows that 83 percent of buyers buy an item because of its branding color. Now think, are colors just for design? I guess not.

So, when will you use a certain color?

  • Use yellow when you want to get attention. Yellow, a hot color, is also a neon. It grabs the eyes’ attention. If you want to make them focus on something, use yellow. It is optimistic and youthful. Likewise, when you create positive typographies, use this color.
  • Use red for urgency. Red suggests alertness, energy and importance. Use red when highlighting warnings, emergency drills, or something that should be done ASAP.
  • Use blue for trust. Often, banks use the color blue to ensure that your money is secure and safe. It suggests a stronghold of something that should not worry you. Use it to make your viewers calm and clear-minded.
  • Use green for relaxation. The eye processes green very easily. It could also suggest wealth, nature, beauty and peace..
  • Use orange for calls. A call to action. A call to move. Use it in advocacies, meetings, and other political matters.
  • Use pink for romance and feminism. Pink suggests a touch of a woman to a design. Use this to attract female teen readers.
  • Use black for luxury. Black is an elegant color. Use it for formal occasions, formal occasions and any design that would suggest luxury.

Typography Tutorial: Make a Cool Typography in 10 minutes

Okay. This one’s a good example of a typography with a simple message: It’s alright to commit mistakes. I made this using the concepts I have discussed in the previous parts of the blog. So how did I make it?

typography-tutorial-final
1. Open Photoshop. Create a new file. I used a preset size with a width of 8 inches and height of 10 inches, with 300dpi. You can, of course, change this one to any size you want.

typography-tutorial-1
2. Next, add a new layer. Name it “background”. Double click it to show the LAYER STYLE window.

typography-tutorial-2
3. Go to Gradient Overlay and click on the gradient. A window will open that will let you select the colors you will use. Use the #6dd0f7 and #4aa8cd colors. Make the Style: Radial.

typography-tutorial-3atypography-tutorial-3b

4. Now, we need to do the ribbon design. Go to the Rectangle tool and draw a rectangle. Color it #8393ca.

typography-tutorial-4a
5. Now, create a triangle using the pen tool. You should be able to create a triangle that would look like a flap of the actual ribbon. Color it #6274b2.

typography-tutorial-5
6. Copy the triangle and flip it. Now draw another rectangle using the rectangle tool. Color it #8393ca. Place the rectangles in a manner that they will overlap with the triangle flaps

7. Duplicate the ribbons.

typography-tutorial-6
8. Now type the message on the ribbons. In this case I used the Yellow Peas Demo font. I colored it black. For the center message, I used the Vermin Vibes 2 White and colored it #6274b2.

typography-tutorial-7

typography-tutorial-9
10. Save it as a JPEG file.

typography-tutorial-final

94 Written ArticlesWebsiteGoogle+

Rudolph is a geek. He loves reading: books, blogs and even nutrition facts found at the back of products. He loves to read interesting internet stuff. Since joining 1stwebdesigner last year, Rudolph has written several articles that concerns Typography, Wordpress, Freelance Lifehacks, Graphic Design and Showcase of Beautiful Web Designs. He also write poems, movie reviews and he puts them in his blog together with rants and some daily life updates.

14 Comments Best Comments First
  • Neha

    Tuesday, August 6th, 2013 13:30

    4

    I like the combination of Quando and Ubuntu Font ! those fonts are faster and increase Google Page speed too + Ubuntu font makes reading experience better than usual old style fonts.

    +5
  • Chris Blake Jones

    Monday, August 5th, 2013 17:25

    2

    Great tutorial on typography!

    +3
  • Ty Underwood

    Monday, August 5th, 2013 13:17

    1

    Just like my dislexic pappy always said, even the best fall nmod sometimes.

    +3
  • Arunshory

    Tuesday, August 6th, 2013 08:17

    3

    Your presentation is nice and easy to understand the beginners. The ten points are very clear for to make a cool typography.

    +2
  • Kukuh Nova Putra

    Saturday, August 10th, 2013 11:20

    9

    Nice tutorial, I’ll try this.

    +1
    • Rudolph Musngi

      Monday, August 12th, 2013 08:26

      10

      Good luck on that. Try experimenting. Your creativity might be better than the output! :) We’ll never know :)

      +1
  • Nimrod

    Saturday, August 17th, 2013 02:47

    13

    Great tutorial! Got a few takeaways here! Especially that I’m not that good with photoshop myself. I didn’t even know about those tiny details about the font design and what they are called.

    +1
  • Johnk

    Thursday, August 15th, 2013 08:26

    12

    Great effort by providing design tutorial for Beginners :)

    +1
  • Paloma Dias

    Wednesday, August 7th, 2013 06:07

    5

    This is really a very well explained tutorial and i like this very much. Many people who faces difficulty in doing so get so much help out of it.

    0
  • Gabriel

    Saturday, September 28th, 2013 14:44

    14

    What comment system is this? I like it.

    0
  • Deveren Werne

    Wednesday, August 7th, 2013 16:16

    8

    Nice blog post, like the comparison of the different types category fonts you explained and the tutorial is nice as well.

    Thanks

    0
  • Gabriel

    Saturday, September 28th, 2013 14:44

    14

    What comment system is this? I like it.

    0
  • Nimrod

    Saturday, August 17th, 2013 02:47

    13

    Great tutorial! Got a few takeaways here! Especially that I’m not that good with photoshop myself. I didn’t even know about those tiny details about the font design and what they are called.

    +1
  • Johnk

    Thursday, August 15th, 2013 08:26

    12

    Great effort by providing design tutorial for Beginners :)

    +1
  • Kukuh Nova Putra

    Saturday, August 10th, 2013 11:20

    9

    Nice tutorial, I’ll try this.

    +1
    • Rudolph Musngi

      Monday, August 12th, 2013 08:26

      10

      Good luck on that. Try experimenting. Your creativity might be better than the output! :) We’ll never know :)

      +1
  • Deveren Werne

    Wednesday, August 7th, 2013 16:16

    8

    Nice blog post, like the comparison of the different types category fonts you explained and the tutorial is nice as well.

    Thanks

    0
  • Paloma Dias

    Wednesday, August 7th, 2013 06:07

    5

    This is really a very well explained tutorial and i like this very much. Many people who faces difficulty in doing so get so much help out of it.

    0
  • Neha

    Tuesday, August 6th, 2013 13:30

    4

    I like the combination of Quando and Ubuntu Font ! those fonts are faster and increase Google Page speed too + Ubuntu font makes reading experience better than usual old style fonts.

    +5
  • Arunshory

    Tuesday, August 6th, 2013 08:17

    3

    Your presentation is nice and easy to understand the beginners. The ten points are very clear for to make a cool typography.

    +2
  • Chris Blake Jones

    Monday, August 5th, 2013 17:25

    2

    Great tutorial on typography!

    +3
  • Ty Underwood

    Monday, August 5th, 2013 13:17

    1

    Just like my dislexic pappy always said, even the best fall nmod sometimes.

    +3

Comments are closed.

54.82.27.141 - unknown - unknown - US