20/01/2010 - Blogger.Iconshock

Hail Typography!(Part 3): Basic Principles

Its very difficult to find any kind of graphic design that doesn't have a certain degree of typography. Everything ranging from a movie to a yogurt cup needs a title and some information. Typography is almost indispensable in our day to day work, and mastering this intricate art can be half the ticket towards a punchy, beautiful and successful design.

Its curious to see that the basics of such an indispensable art form are often ignored and taken lightly by students and teachers. So let's take a quick tour over the basics so all of you folks out there can refresh your knowledge and pinpoint academically just why that American Idol title is so hideous.

What exactly is Typography?

Typography is essentially the art and technique of arranging glyphs. Hmm. What an enlightening definition! So what the Hell is a glyph? Well, a glyph is a letter or a coma or a period. It's any element of writing. The word comes from the french glyphe, which in turn comes from the greek glyphë that means carving or carved, and to tell you the truth I really don't know how on earth can it relate to a character, but I can imagine that as the first written expressions of human kind were symbols carved on stone, well one thing leads to another and here we are talking about typography which is the art of rearranging glyphs. (deep breath)


So. Where were we? or were where we?

Ok, no more fooling around. Typography. A font is a certain aesthetic style of a set of glyphs. Like hmm... Arial Black. And a Type face is the whole family of fonts, such as Arial (Arial italic, Arial Black, Aral regular, etc...)

There are many, almost too many classifications and sub classifications for typefaces, but the basic distinctive types are Serif and Sans Serif. Too much French for you so far? In plain words, Serif is the curvy "thingy" on the end of the strokes of a font. The French word sans means without. SO you can deduce by yourself that Serif means fonts "with that curvy thingy" and Sans Serif translates "without that curvy thingy".

[caption id="attachment_1063" align="aligncenter" width="450" caption="Times New Roman and Arial"]TImes New Roman and Arial[/caption] Fonts also have an anatomy, and the changes on these parts determine the style. These are the basic parts of any font.


Then comes the spacing. Kerning and Tracking are very very relevant to the final look of typography, making the general feel of a design look appropriate and clever rather than dull and default. Kerning refers to the distance between each glyph and tracking refers to the space between each group of glyphs.

kerning_tracking_fonts And of course, there is the Leading, or distance between each line. leading_fonts Alignment is also key in order to find the correct harmony of a design. Generally speaking, left alignment is the most organic and pleasant distribution of text, I guess because our brain is accustomed to read from left to right. (That is if we are from an occidental society) alignment_fonts At first glance, Hyphens, En-dashes and Em-dashes seem names out of a Star Wars movie, but in reality they refer to the horizontal lines used in between characters.

hyphens_fontsHyphens are to be used for dividing syllables at the end of a line, or to connect compound words. For compounds with more than three words, the En-dash is used instead.

hyphens_ii_fonts An En-Dash is used to indicate a range of values. Its longer than a hyphen and shorter than a Em-dash. endash_fonts An Em-Dash is the longest of the three, and is used to make a break in a paragraph indicating thought or context.

emdash_fontsAnother vital issue is the infamous rag. The rag is the uneven edge of a block of text, usually the right one if you are working with left alignment. Rag is one of the most important features to care for in typographic design, since an uneven rag affects readability in such a way that it can ruin your whole design completely, therefore bringing to your life serious consequences as making you loose your job, leaving you without a nickle to pay rent and food; situation that will undoubtedly turn you into an unhappy human being, bringing you to such a crisis that you will eventually contemplate suicide. Rag is that important!

rags_fonts When adjusting blocks of text, you have to be cautious not to leave a lonely single word at the end nor at the top of your columns and paragraphs. This is another detonator for life chaos. So beware of widows and orphans! widowsorphans_fontsWhen you place two characters too close together, some parts of the fonts may juxtapose producing nasty results. Then is when you need a ligature. Ligatures are extensions to the anatomy of fonts in order to combine in a pleasant way those horrid overlaps. ligatures_ii_fontsligatures_fontsligatures_iii_fonts And well, those are the basics. Congratulate yourselves because you have just graduated from Iconshock's crash course on typography! Typography is a much more intricate and fascinating art than what I have exposed in this series. But I do believe you have a neat starting point. I Really hope you enjoy the article. Blogger is abandoning the writer's chair for a quick bite. Until next time! Hail Typography!(Part 2): 10 free font resources Hail Typography!(Part 1): 30 Free handpicked professional fonts


11 Responses to “Hail Typography!(Part 3): Basic Principles”

  1. Stefan
    June 4th

    Great info, clear and precise and perfect.

  2. really good G, excellent work, i’ve just learned some basic things about typographis i didn;t know… keep doing it dude…

  3. G. PiñerosNo Gravatar
    June 4th

    I’m very glad you liked it Stefan. Have you read the other articles on the blog? It would be cool to read more comments from you. ROCK On Friend! We recommend the Photoshop and the Twitter article. Check them out.

  4. Mario ZabaletaNo Gravatar
    June 4th

    Man you are too good! Thank you very much for your article, I’ll bookmark it immediately because it’s a fun way to remember these simple and so necessary basics. I bet you can’t keep up this high bar for another week! It’s impossible!

  5. JjayNo Gravatar
    June 10th

    Good Grief. I didn’t know the subject was that deep, feel like i just skimmed through a History Channel special, n i still learned a thing or two. Love the visual aides! Tho reading all the research and emphasis put into typography one must wonder, who was that bored they needed to box and label the hows and why’s into titles and levels of propriety. Most of us just do, not dissect. But its nice to know the history behind anything, and text is no different. Knowing and understanding all the variables leads to handwriting personality assessment. With so many options for variances in one letter to another, angle, shape, spacing, who we are is in each bit we create. But be forewarned if your planning on looking too hard at me – keep your glyphs to yourself!

  6. AnthonyNo Gravatar
    January 22nd

    Good grief! And I thought that typography was the art of not using Arial! Thanks for the article, was really informative.

  7. Blogger.IconshockNo Gravatar
    January 23rd

    Thanks Anthony for your comments! Typography is an intricate art indeed. Cool website you have BTW. Check our other blog, webdesignshock for more stuff.

Leave a Reply