Thanks for the link out, this is a good beginners guide.
Typography Essentials – A Getting Started Guide
Posted May 19, 2008 in News
What is typography? And why is it so important to graphic designers? As long as you spell everything correctly and make sure the message is what the client wants to see, why does the font style make any difference?
Because everything you touch, see and create is impacted by the use of writing styles and techniques. There are a lot of reasons why designers need to have a solid foundation when it comes to the use of typography.
By understanding the underlying message that your choice of text contains, you will become more effective as you design and layout projects containing words and phrases. A picture may be worth a thousand words, but you have to know a thousand words to replace it.
Typography is the art and process of arranging type for a variety of media purposes and is made up of several parts. Take a look at the image below. Depending on the font style some or all of these parts will always be present.
Understanding The Basics
- The Type Size, also called the Cap Height, is the overall height of capital letters in the formation of words.
- The Ascender is the upward tail on letters like h, l, t, b, d, and k.
- The Descender is the downward tail for letters like g, q, and y.
- The Counter is the white space located inside letters like o and p.
- The X Height is the height of the letter, and does not include ascenders or descenders.
- Baselines are the boundary that the lowest part of the letter rests on. Take a look at the y, p, g, p and y letters in the illustration above. The solid line they are resting on is the baseline.
Have you ever seen a paragraph or advertisement that made the letters appear either s p a c e d w a y out or scrunched all up so it was hard to read? The effective use of kerning and leading will fix that problem. Kerning is the space located between individual letters of a word. If you can remember the kernels on an ear of corn, it’s easy. When the kernels of corn line up, it makes a nice neat row.
If the kerning is off, so will the appearance of the word or line of text you are working with and it will be harder to read.
Leading is the space between the lines of text. If you look at the illustration above, you will quickly notice the space between line one and two is too close, giving the impression of not enough space. By adjusting the amount of leading between lines, the text becomes much more readable and less pinched.
How do you want your text to line up? Is this a standard body of text, a headline or are you in need of a more professional finish? Depending on the type alignment, you may inadvertently create the wrong impact based solely on the placement of your message.
- Default writing techniques will use left alignment to create easy to read text for the reader. Casual letters, unpublished manuscripts, and basic paragraph styles tend to fall into this category.
- Center alignment is used to draw attention and is used a majority of the time for Headlines or Titles. Newspaper headers, book titles, and report titles are excellent examples of center alignment.
- Right Alignment is a clean crisp professional look and is used quite a bit for corporate business letters, return address labels, business cards and a variety of other applications where a formal style of alignment is needed.
- Justified alignment is usually reserved for newspaper print and body text for textbooks, and is more difficult to work with. This type of alignment creates perfect alignment on both the left and right margins without regard for the actual characters. This can lead to a condition called tracking, or the creation of “rivers” of white space throughout the text body. If this happens, reduce the tracking gradually to correct the illusion.
Now that we know how to identify the parts, make sure the spacing is correct and we’ve decided on the image we want to portray, selecting what your message will look like is paramount to leaving the gravy off the mashed potatoes at dinner. You’re still going to have a nice dinner, but if you want to get saucy, pick a type category that fits.
- Serif type has extensions or strokes on the ends of the letters. Times New Roman is a perfect example of this. This type of font is easy to read for longer pieces and tends to be a little more conservative. If you do not deliberately choose another font, most programs default to the Times New Roman style.
- San-Serif does not have extensions or strokes on the ends of the letters and are used heavily for labeling, headlines and titles. This is also easy to read with a more contemporary feel to it. Children’s books use this because it is more easily identifiable as children are learning the alphabet.
- Script, symbols and decorative type are all styles of type categories to create a specific image or message. Weddings might lean more toward the fluid motion of a script type while a child’s birthday might be more inclined to like a decorative font from a favorite movie.
Whatever font family you choose bears careful consideration in the design of any piece. Here are a few suggestions to get you started:
- The font you decide on should not dominate the piece. Fonts are like exquisite jewelry to be placed in just the right context to insure maximum results.
- Use care when mixing fonts. It’s kind of like mixing stripes and plaids. When in doubt, stay with something a little more conservative then add one splash of notice me.
- Use consistency in your layouts. If you start out using an Arial font for the headers, stay with the same font throughout the piece.
- Newsletters with columns will look better if you use the Justified Alignment. Make sure you don’t create rivers of white space though.
- Use an 11 or 12 point font size and a serif type for maximum readability.
- Use Italics and Bold to point out areas of interest or draw quick reference to information.
- Use color for emphasis. Remember, reds draw the most attention if used correctly. It is amazing what one spot of red can do for an ordinary ad.
More resources and posts on typography:
- I Love Typography
- The Font Feed
- Just Creative Design – Type Classification eBook (free!)
- 101 Typography Resources for Web Designers – Vandelay Design
Hope you found this useful, please share your thoughts in the comment section below! And feel free to link to your own articles about typography! :)
Unleash the true potential of your business. Get The Unlimited Freelancer and start transforming your freelance business,
now only $19.
May 20th, 2008 at 4:21 am
May 20th, 2008 at 7:58 am
What an awesome post. People really do need to pay more attention to typography.
I have been a designer for many years but have been frustrated that my lack of web knowledge has been stopping me from getting quality onto my websites. Luckily I am getting to a stage where I am starting to be able to implement good design onto the web pages. It’s a long, important and hard journey though!
May 20th, 2008 at 10:37 am
nice writeup. I never honestly paid too much attention to typography in detail like this, I just knew what looked right in the design. I see now I need to study more :P
May 20th, 2008 at 11:17 am
May 21st, 2008 at 1:04 am
I loved this simple no nerd guide to typography. Hope you’ll like our article on Typography Resources
May 21st, 2008 at 1:00 pm
Excellent topic choice. A change of font can make a huge difference to the perceived value of an article or blog post. I’ve tested my own content on different wordpress testbeds, and it’s amazing how the exact same content looks more important in one place and boring and unreadable elsewhere.
June 1st, 2008 at 9:37 am
Great beginers guide to typography, I submitted this link to designbump.com so others could check it out too.
June 2nd, 2008 at 2:32 pm
Hey guys, when I first started out with a campaign for Times of India’s “Ashok Jain Awareness Advertising” I was working a mech engineer way back in the ’80′s, and had no idea what’s a font or typography. But in retrospect, I see that I loved Helvetica, was bored with Times and Courier.
And all the ads I wrote were created in a “hi-tech” studio and the technician would come out with strips of text printed in Helvetica and guess what I was mesmerized by them. Wow… I was gonna be in print!
This post is a great reminder to me like from where I’m coming.
dogcatcherAugust 13th, 2008 at 11:41 pm
The baseline definition seems off to me…sounds like you are saying that the descenders stop or extend to the baseline. I always understood it to be where all the characters sit (descenders would extend down from the baseline). Like the graphic here: http://en.wikipedia.org/wiki/Baseline_(typography) and here: http://desktoppub.about.com/od/glossary/g/baseline.htm.
February 9th, 2009 at 2:59 pm
awsome ! awsome ! awsome !
February 9th, 2009 at 2:59 pm
loves it <3
February 9th, 2009 at 3:13 pm
i loooove this website .. great idea i was so confused about life before and now i understand and i would love to share this with all my friends and family. they will be so amazed. im like a magician to them they never seen anything like that you know ? this website gave me some amazing and wonderful ideas about typography life is great and wonderful and typography gave me the knowledge and courage to see life in a different light. God gave me this wonderful gift and i would love to share it with the whole world and all the little children who live in the villages and in the tents those littles one ! one day i would love to inspire someone like me .. i was depressed about life, had no job, no money and then one day i woke up and saw this website and it changed my life i was so interested!! now im a rich man with a wonderful life and a gorgeous looking wife, life is great so please dont hate, i gotta go to dinner at like eigth , yea my life is sick and i might act like a prick but its all good because i tell her to s*** my d*** ! no im just playing do you know what m saying ? i just bought myself a civic93′ like how great is life ive always wanted a honda civic its two door all black, dumped to the ground, mint condition, tinted windows, vtec and soo much more that i dont want to brag. anyways ill talk to you all pretty soon i hope all of you keep in touch and call me up for coffee one day so we can sit and chit chat in my car and have a boogie .. okay ? love you all my number is (416)738-9385 bye now !
June 14th, 2009 at 9:22 am
creative , nice ,
daveOctober 16th, 2010 at 3:49 pm
No offence, but a lot of this info is wrong.
Basline is where the bottom of the X sits. Type is made of glyphs not fonts. Font is the means by which a Typeface is produced although, people often use the word font when they mean typeface.
I suggest anyone who is truly interested in this subject buy a book on it. That way you know the information is correct.
DelDecember 3rd, 2010 at 6:19 pm
A couple of the comments here are correct — the definition of baseline is incorrect. The x-height of the characters sits on the baseline, i.e. the base of the type characters not including any descenders (not the boundary where the bottom of the descenders sit).
My cred: Over twenty-five years in graphic arts; my first five years spent working for a typographer; 10 years freelancing; 10 years for design agencies and companies (so far).
ujwal kadode( india)March 9th, 2011 at 9:55 am
i see this page very nice and good guidline…
March 26th, 2011 at 11:34 am
“A picture may be worth a thousand words, but you have to know a thousand words to replace it.”
I didn’t really understand that.
July 31st, 2011 at 6:55 pm
Thank you for sharing this. It will definitely be a reference for my Typography class.
DelAugust 1st, 2011 at 3:36 pm
If you’re going to let a typography class reference this, you may want to point out that some of the information is wrong – specifically the definition of what a baseline is in typography (see some of the earlier comments).
Any typography authority, expert or textbook will contradict this information and it’s a shame that an erroneous description of such a basic type essential is contained on an otherwise good page.
January 29th, 2013 at 6:49 am
In the serif/ sans serif part I would have used the actual fonts as an example. Like you did with bold and italic.
February 5th, 2013 at 6:10 am
Thanks for the article. Shame the example image for alignment is so poorly aligned!! Also, the jury’s still out on whether Serif typefaces are more readable. This is particularly dubious for on-screen text.
February 18th, 2013 at 9:15 am
Awesome, thanks for posting! It’s really great for someone with web development background.
Have a good one!
ElApril 3rd, 2013 at 11:00 pm
A good refresher. Thanks
ThereseMay 19th, 2013 at 11:15 am
Great guide. Another suggestion, if you haven’t done something on it already, a tut on this guide and how to use adobe indesign tools to achieve them. Also, this infographic is a good guide as well https://www.cardprinting.us/blog/2013/03/guide-to-professional-typography/
PavelJune 29th, 2013 at 4:04 pm
a weak article
ChrisSeptember 9th, 2013 at 9:36 pm
Your explanation of tracking is poorly written. Tracking—also known as letter spacing—is the overall spacing between all letters. Kerning is the spacing between two letters. Correct tracking avoids rivers, poor tracking causes rivers.
Font is the typeface at a specific size. Times New Roman at 12pt is a font. The letter forms themselves are glyphs.
We read left to right. Left aligned type forms a hard left hand edge which guides us as we read. Right aligned text is a poor choice for legibility, but can be applied to secondary information, such as the date/business name/address etc on a letter.
Newspapers have large amounts of copy per page. Justified type forms distinct columns of text. This plus grid structure, type size, type choice, leading etc creates visually distinct articles.
Serifs form horizontal weight to guide our eyes from left to right. Their job is to prevent our eyes from wandering up or down to the next line.
I realise this is a guide to the basics, but I don’t think you know enough about type to be teaching. Typography is a science, and you don’t appear to understand the why, only the how. Read and study books on typography, don’t just read “50 best examples of X” online. You and the people you write for will benefit greatly.
October 15th, 2013 at 7:15 pm
Good article, nice informations. I have just to point out that you should never use justify in the web because you don’t have hyphenation so you will have a lot of white space for sure!
- L’importanza della tipografia per un web designer : cssblog.it
- All of my graphic design clients should read this! « Officehounds.com
- Guía básica sobre la tipografía | Isopixel
- 50+ Articles to Make You a Better Web Designer | DesignM.ag
- 50+ Articles to Make You a Better Web Designer | Net Feast
- 66 Links To Learn The Webdesign Basics » DivitoDesign - Webdesign Blog
- Talking Typography Part 2 : Good Type Gone Bad, Tutorials and Tools | Arbenting
- Webwichtel #1 TYPOGRAPHIE | kreativemonster
- What is typography? Typograhy Explained | Acuity Designs
- Weblog Edwin Duinkerken » Blog Archive » Verzameling inspiratie: Typografie
- Design Matters - 10 Tips for a Blog Design Makeover
- Typography Toolbox
- Ultimate Resource for WebDevs & Designers « Dzign Magazine
- 71 Links Help You To Learn Webdesign « Er. Krushna Chandra Muni
- 66 Links To Learn The Webdesign Basics « DivitoDesign
- A Handful of Fascinating Typography Tidbits | Build Internet!
- uberVU - social comments
- Talking Typography Part 2: Good Type Gone Bad, Tutorials and Tools » Arbenting - The Act of Being Creative
- Giduri de urmat pentru design-ul unui magazin online in Romania | HardCoders
- Typography guide for making a great pp-design presentation | ANDYSIDE
- Where to Begin … « julbgordo
- Clever Typography for Print and Web « Web Design Devon – Spoton Corporation Blog
- Search Freelance Projects » Blog Archive » How to Make Your Freelancing Website More “Cutting Edge”
- Design Essentials 2 | Zise
- Let the hacking begin. « Philip Litassy
- Clever typography « it’seeze blog
- Exercise 5: Typography, Color & Content | TTArch.us
- 10 Typography Mistakes that Make You Look Dumb | Web Design Library
- 排版要领——初学者指南 | LiveSign
- Getting to know my fonts | Visual communications
- A picture may be worth a thousand words, but you have to know a thousand words to replace it. | Deja el Cuerpo
- Learning Object | Pat Patrick Graphic Design AEDT2130 My Learning Experience
- SEO Techniques All Top Websites Should Use
- When a Client Can't Afford You: Why It's Still Better to Bid High
- How To Stop Scrambling For Clients And Get A Steady Stream Of Paying Gigs
- A Simple Way To Stop Clients From Rejecting Your Proposals
- 3 Reasons Your Rates Are Still Low (And How To Start Raising Them)