Typogaphy as an element of design

According to Wikipedia typography is:

the art and technique of setting written subject matter in type using a combination of typefaces, point size, line length, leading (line spacing) and letter spacing.

I think this definition puts the subject very accurately. Typography is more than applying some attributes to text. It is art and technique as well. It is actually a design element because as it said above it requires certain design decisions.

Typography lives and evolves through time. It is a Greek word and you can find out more about its etymology at the link above. Instead of talking abstractly about typography I will try to provide you some simple examples which will point out the title of this article.

The following examples show you how you could create a logo for your site by using simple typography elements.

Step #1

Ingedients:

• Font: Verdana
• Size: 16px
• Color: #000
• Style: none

Comments:
Nothing special but simple text which says nothing. Let’s go on.

Step #2

Ingedients:

• Font: Georgia (for “porcupine colors”), Verdana (for “| Web Design and spare parts”)
• Size: 16px
• Color: #000
• Style: none

Comments:
Here I decide to change the type for the title. I use a serif type to emphasize it. However the title now looks too small.

Step #3

Ingedients:

• Font: Georgia (for “porcupine colors”), Verdana (for “| Web Design and spare parts”)
• Size: 18px (for “porcupine colors”), 12px (for “| Web Design and spare parts”)
• Color: #000
• Style: none

Comments:
Things look better in this step. The title is fairly bigger than the subtitle.

Step #4

Ingedients:

• Font: Georgia (for “porcupine colors”), Verdana (for “| Web Design and spare parts”)
• Size: 18px (for “porcupine colors”), 12px (for “| Web Design and spare parts”)
• Color: #000 (for “porcupine colors”), #ccc (for “|”), #999 (for “Web Design and spare parts”)
• Style: none

Comments:
By using different colors I make things clearer. I keep the black for the title, I make the subtitle lighter and the vertical separator even lighter because I want everyone to understand that this place is named “porcupine colors” and then that it has to do with Web Design among other things.

Step #5 - Final result

Ingedients:

• Font: Georgia (for “porcupine colors”), Verdana (for “| Web Design and spare parts”)
• Size: 18px (for “porcupine colors”), 16px (for “| Web Design and spare parts”)
• Color: #000 (for “porcupine colors”), #ccc (for “|”), #999 (for “Web Design and spare parts”)
• Style: Italic (for “porcupine colors”), none for the rest

Comments:
The final step includes emphasizing the title. Italic Georgia creates a flow which easily leads your eye to the subtitle which explains what this page is about. Look how beautiful Georgia looks.

During this procedure I selected to use standard fonts and grayscale because I think that good typography is ruled by simple principles. However meditating those principles needs time, experience and of course work.