The goal of this post is to help designers and clients understand the importance of good type skills, while avoiding some of the common mistakes. Please keep in mind that most of these mistakes are subjective and can be changed varying on the project, goals or circumstances.
Below is a list of 10 common mistakes used in type design/layout that can make a large impact in the effectiveness and appearance of your designs, in addition to saving you time and money when dealing with printers.
1. Not enough leading
Leading/linespacing can improve the overall readability of large blocks of text on a page, making it easier on readers to follow lines of text without losing their place. Too little can cause a cramped feeling. It’s important to remember that different fonts need different linespacing. Varying heights in letterforms may demand more or less.
2. Not enough tracking
Tracking/letterspacing is applied to a group of letters. It prevents letters from running into each other, especially during print. It’s similar to leading in which it can improve or hinder readability, flow of text and the density/weight of a block of text.
3. Getting tracking confused with kerning
While tracking is applied to a group of characters, kerning is the adjustment of space between two letter pairs. Effective for use with headlines, text with ALL CAPS and logo treatments (it helps with readability at various sizes). Don’t fall into the trap of letting your design software set this by default; it’s character specific. Same applies to the above, #1 & 2.
4. Lengthy lines of text
Reading many long lines of type causes eye fatigue. Readers are forced to moves their heads and eyes more often from one line to the next. Various sources I’ve researched state to keep lines of text under 50 - 60 characters long.
5. Mixing too many typefaces and weights
Too many typefaces on one page can become distracting and disconnecting (lacking unity). Try keeping your fonts choices to three or less per project. Too many weights can cause a reader to be unclear where important elements are on a page. This creates the possibility of the reader missing something important.
6. Not using serifs for lengthy-text material
Serifs are known to make reading lengthy material, such as books and magazines, more sustainable for longer periods of time. It also helps with eye strain/fatigue, and we all know that we need our eyes! Although this can be argued, serifs seem to sit better on the baseline.
7. Printing similar values of color on top of each other
For example, try printing a medium blue text on top of a medium brown box. Not only is it unappealing, but it makes it hard on the eyes. Also creates a muddy effect.
8. Reversed out text on less than 50% tints
Much like the above, this also increases eye strain and hinders readability. The words get lost in the background and typically prints less visible than seen on screen. This will save you time, money and Asprin for your printing headaches.
9. Overusing centered text
Using centered text creates a jagged and broken appearance to text — very disconnecting! Can be viewed as amateurish in most instances. Save it for those wedding invitations.
10. Large body copy
Normally, designers and non-designers (and yes, I did it too!) will immediately use a 12 point font for body copy. Smaller (even slightly smaller) fonts sizes creates a more professional, modern look. Large body copy can be clunky — think about the font size of a children’s book. Clunky right?… unless it’s the look your going for.
It’s also important to note that viewing text on a computer monitor is much different than printing it. In most instances, type on a screen appears smaller and less crisp. Also, most printers will advise you not to use font sizes under 7 points. May result in readability issues.
11. Not knowing what the Grid System is
Being a typography enthusiast, understanding the grid has become one of the best things I’ve learned in design to date. It’s the basis for creating clarity and making your type and layouts more cohesive. Check out the new site, The Grid System, for links and resources pertaining to grid systems.
Remember this list was composed to spread awareness and create discussion, not discourage anyone from trying new things and breaking the “rules”. I fully encourage all of you to go out and experiment with new ideas and concepts to become better typographers and designers.
What are some common mistakes you’ve seen in type design?
Nice post, often overlooked. It would be great to hear what most people use as their default font, size, line-height etc. in their CSS.
A great read, as usual. I’m 100% with you on the centered text - this annoys me so much!
Helluva nice wrapup behoff. I am diggin it. I think you make great pints. Waiting for your “controversy”
my biggest mistake is not knowing what thegridsystem.org is :p
surf’s up!
Fantastic article as always. I couldn’t agree more with point #5. This is a huge issue especially on the web when low quality designs include a multitude of types. It drives me crazy!
In response to Lee’s comment, I really love using Georgia on the web with a fairly decent line height to give it some breathing room. I think Arial can be overused and Times New Roman is simply a no-no in my books.
Thanks for this post. A well designed page looks effortless: there is a clear hierarchy of information and a sense of purpose. Things like tracking, kerning and leading go unnoticed because they are perfectly set. One thing that gives me pause is “distorting” type: tracking, scaling or warping type: I feel like this needs to be done really well to justify it. Justifying Text: this needs to be done really well too and leading, point size and column width become extra important. And what about the choice of a typeface: some argue you should only ever use 10, while many great designers have demonstrated how to just use a few really well. I’m not sure about any of this, but these always seem to look good: Aksidenz Grotesk, Futura, Rockwell, DIN, Frutiger.
The one that kills me the most is centered type… it’s like a disease with some people. Another mistake that I see quite frequently, though not mentioned here, are widows.
This is a great typography crash course (or refresher course). I’d love to see this post make it big for you because everyone could benefit from this… even if they’re not designers. I see most of these errors on a daily basis and have tried to educate, but that hasn’t worked out so well. I think I’ll print this up and leave it on a few desks tomorrow.
I’ve been using Myriad / Myriad Pro lately for web type, 9-14 point depending on situation. I tend to treat designing type for an 8.5″ x 11″ sheet of paper similar to a web site.
nice!
It’s very easy to fall into the trap of letting your design software set the kerning by default! [#3] - couldn’t agree more!
Nice post, certainly makes a good learning
Great post, its the simple rules that get overlooked and you need to take time out to look at this. Nice one.
Great tips here.
Typography is such an overlooked part of design, especially by web designers. I think another tip should be: NEVER EVER use comic sans!
Nice article. I really like it. Hopefully, more “designers” will take more care of the typografical factor of design.
Puh! I passed all 10
Nice article nonetheless.
I think these common mistakes are made mostly amongst untrained designers. Nevertheless, this is a good refresher list.
Great read. It’s always the posts that repeat what you are already feeling that really help. Its good to see someone get it out on “paper” and share it with the web.
Thank.
Very useful - will have to share it with my clients and students. The graphics and rationale help make the point.
I have to disagree with you on the serif subject. It has been extensively proven that we don’t read the letter forms, not even the words, but a whole “impression” instead. And that impression is taken from the upper part of the letters. In no case we get down to the serifs. The serif is only a leftover of the royalty-bourgeois-ecclesial tradition. It is only because everything is printed with serifs that we are used to it, but it doesn’t obey to any functional issue.
Think about it, why do so many foundries (specially north/western Europe) issue sans-serifed typefaces for texts? Let’s say, Meta (FF, Germany), Scala (FF), Seria (FF), Anselm Sans (StormType, Czech), Whitney (H&FJ, USA).
It is said that due to its protestant religion, they broke up with the tradition earlier, sustained in the western side of the world mostly by the catholic (i’m not bashing catholics, i’m one myself) tradition.
Thanks for sharing all this.
Thanks for the post! I agree with the Grid systems, very valuable knowledge to invest in learning. Good stuff!
@Daxion
Exactly. We’re used to it. It’s why we get frustrated with experimental web navigation in designer’s portfolios—it’s not what we’re used to. If it works, why fight it? I do think sans serif for copy is easier to read on the web, though. And I’ve never seen anything that says we only read the tops of the letters. We recognize the forms of the words yes, and that’s easier to do with serif fonts because we’ve been reading them that way since the beginning (notice the fonts in learn-to-read books). I’m not saying it’s wrong to use sans serif for body copy, and I think those examples you mentioned are precisely designed to work for body copy and have hints of tapering and other qualities that make serif fonts easier to read at small sizes.
For some of those asking about ideal font size for web, I asked my ever-smart web wizard husband and he says:
Read this. Basically you need to use relative units for font sizing so fonts can scale up and down gracefully depending on the browser, that means you have to use %s or ems. The nice thing about % and ems is that they cascade, meaning you can set the body type to 80% and then the p tag to 40% and the p tag is effectively 40% of 80%. This way if you want to make the type on the website bigger you just edit the body tag and it effects everything else using a relative unit. Line height (leading) is usually about 1.2 em – 1.5 em.
Great post, though generally, I tend to view type for on screen reading as needing to be set larger than its print counterparts—if only because we usually look at monitors at further distance than we do a piece of paper or book.
You are right in viewing line length in number of characters or words, rather than exact pixel measurement. What we all should remember is that different design situations call for different line length, font size, leading and typeface used.
To see how wildly different each of our (and our user’s) text preferences are, there is Textprefs – http://www.message.uk.com/textprefs/
The space between the letters doesn’t really bother me much… but the rest of the list is stellar. One thing that really gets on my nerves is when websites/brochures have REALLY long lines of text. I don’t stick around to read it… not sure how many other people do.
A lot of basic 101 typography stuff - but you left out using spell check.
Header number 8
8. Revered out text on less than 50% tints
should be reversed
Sorry I didn’t get the chance to reply to everyone earlier, but work was a bit hectic today… Thank so much for everyone’s great comments and feedback.
Kostandinos,
Widows is a great addition to the list. I’ll add it up there…
Paddy,
Comic Sans? What’s that… I try to keep those words out of my vocabulary LOL
Daxion and LaurenMarie,
Great comments, both of you… I agree with Lauren in her statement about Daxion’s listed fonts as being made specifically for body copy — its not to say that sans serifs are awful to use for body copy, I just feel serifs improve long term readability. Great stuff though! It’s comments like these from the both of you that I enjoy reading. Keep em up!
Jim,
Thanks for the “reversed” spot — how embarrassing 
The post was compiled for both beginners and for a refresher for “advanced” designers. You can’t become advanced unless you learn the basics… so hopefully this help someone out there
Great stuff totally agree with almost everything. The debatable one is that we read serif typefaces better than sans serif typefaces. This debate will last for centuries though.
ohhhh, my… you’re my hero of the day (and possibly week) with this post, sir. Fantastic!
I disagree with the centering of text example you use. Yes, in general, centered text is a bad idea, but the example you give is one of the exceptions to that rule. It only looks odd in your example because you left so much empty space around the centered version. If you took the text in the left and centered it, I’m confident that most people would identify it as the more aesthetically pleasing of the two, especially if you placed line breaks in the text to get it to make the text block roughly the same oval shape as the balloon containing it. Small amounts of text running around inside a shape like that is very visually appealing… or are you willing to disagree with the comic industry that has been doing it that way for many decades to little or no complaint from readers?
Another common mistake is not using print/curly quotes and using inch marks instead.
Wow, I honestly had no idea. That is good stuff.
http://www.privacy.es.tc
Good post and a great refresher course - but it piqued my curiosity as to what ideal line-heights and tracking would be for each of the most commonly used fonts (such as Georgia). Perhaps that would make a good follow up post, since I don’t see much information on the Web about that.
Another element of good design overlooked in this post is how much spacing should be used between paragraphs. I’ve seen sites that use too much space - upwards of 40px. I think that much space looks sloppy. I go for no less (and no more) than 10-12px of space between paragraphs myself.
Sort of disagree with Lauren Marie on line-hieght: the lowest I usually set it at is 1.6, but I think type looks best with leading between 1.7 and 1.9. Many designers use “at least 2.0″ but I think that’s too much.
Regarding number 4,
This is a common misconception. Studies show that thinner columns only increase *perceived* reading speed. Actual reading speed remains the same.
http://www.humanfactors.com/downloads/nov02.asp
Hey everyone,
We use Garamond Premier Pro, size 10 (on 12) for body copy. Century Gothic, bold for cutlines.
great post! not coming from a design background, it’s useful knowledge for web design. especially the leading and kerning stuff.
That’s Rad.
I disagree with mixing too many typefaces and weights. You can mix all the types you want as long as one leads to another and you keep consistency
Thanks you.Very useful information.
Great topic to cover… people often overlook the look and layout of the text, especially online where most web designers are more concerned about the layout of the page.
These tips will certailny help some of those messy typists make their text more legible.
How about using Helvetica font on a webpage? Helvetica looks terrible on any Windows computer I have tried.
Also, your blog doesn’t appear to work when looked at with Internet Explorer 7. I’ve tried it on two different machines.
How about cross browser and cross platform compatibility? I use Windows, Linux, OS X, and BSD on a daily basis, because my clients do, and the absolute biggest flaw I see is people using fonts that are only used on one operating system. This flaw can make any web page look hideous. Or using completely uncommon fonts that no one has installed and then not making sure that there is an alternate font that works well.
Designers who only design in IE are a huge problem too.
If you don’t make your content and your code cross-platform/browser-compatible in this day and age, you need your head examined.
By the way, the Name, Email, and Website fields on this form are white for both the text and the fields in FIrefox 3 on Ubuntu 8.10.
With the advent of the zoom feature in most modern browsers (except safari), hopefully we will be able to stop using relative font sizes in a few years. Besides who are we kidding, Not to many sites can handle resizing text well anyway.
I have to disagree with #10. I don’t think you can say, that using 12 pt or larger font on the body copy is a mistake. It depends on the situation. Especially for web design. where I would say that 12 pt is the minimum size.
Excellent Post.
If these principles attract you, as they do me, you may also like to explore the broader topic of design architecture found in books like “Visual Explanations” by Tufte, and “Show Me the Numbers-Designing Tables and Graphs to Enlighten” by Stephen Few.
Great article!
I disagree with the smaller than 12 point font recommendation. It depends on your audience. With the average age of our population increasing, a larger font size than 12 points may be appropriate if much of your audience is in that segment. So be sure to consider your audience in choosing your font size. I hate vitamin, food supplement and drug bottles that have font sizes that only a large magnifying glass will reveal to seniors who are a large segment of that market.
Is the inability to count to 10 a typography mistake?
^ Andre, forcing breaks to achieve a shape would result in lots of hyphens in order to not have the jagged indents you don’t like that is inherent in centering text. The point is long pieces of copy should not be centered; it’s not rational to center and manually rag an entire book for instance — what happens if there’s a word change on page 2 before it hits the press? Sure centered text looks good in comics, but is there a comic that goes on for pages and pages in a single speech bubble?
nice post!
nice post
http://www.youtube.com/watch?v=763vmCrRBDg
Good stuff… And I’d mention that I run the copy desk at a daily paper that’s been in continuing publication for 150 years, and all of these are standard practices per our stylebook. For reference, our normal body text is 9.2 pt., with 10.2 pt. leading, and our normal column width is around 45 chars. We use a grand total of three fonts (not counting different weights, and obviously ignoring feature layouts), and manage to produce an interesting amount of variation while maintaining consistency.
As a long-time word guy, I’d have to say I agree with nine out of ten of these. But because I am a long-time word guy, I’d also have to say that many designers and typographers may need to pay more attention to current demography. Bear with me: there are a lot of ‘aging boomers’ out there. Larger type is clunky, certainly, but for many, many pairs of eyes over a certain age, 10 points verges on unreadable even when assisted by good optics. I’m just sayin’…
Thank you guys, this are really interesting tips.
As a product manager, I’ve come to accept the importance of a grid system in design–but also understand when we should deviate from the grid. Smashing had some good advice and examples here: http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
10? Where’s the other 76 I see all the time?
Faked small caps. They stick out so obviously both in wordprocessor output and on the web. It’s very distracting and looks at best like the writer bought cheap fonts.
I have a major dislike for long lines of centered text.
Having said that I am guilty of using long lines of text, to achieve a design, which I try to balance by only allowing a maximum of three lines per paragraph with a maximum of four paragraphs per page.
Good article, it never hurts to be reminded, even if it makes me wince at my own errors.
Great article. In addition to centered text blocks in web design, justified text is possibly even worse when used in large volume.
Very nice article, important for all designers in the print and screen world.
Viewers should note, these rules can apply to a varying degree between print and screen mediums — for example, letter-spacing is a great tool for CSS inside of web browsers, while kerning is not a practical approach (spacing for individual letter pairs) on a blog or journalism website where it is not practical to modify vast amounts of content.
Read these guide and try and apply them to your own work, it makes a world of difference. Never rely on “defaults”, design your pieces from the ground up!
Just started writing my own blog. I read this page before hand and have implemented many of the tips into my articles.
Number 7 - Printing similar values of color on top of each other has been the most benificial. My title of the blog stands out perfectly and is so clear. Sets up the blog brilliantly.
Excellent article. Keep up the high standard of work. Many thanks.
Thanks! Nice post! The 4th point (long lines of text) I must say is really annoying on some sites, especially when font size 10px or less is used - I often lose my track returning to the beginning of a new line.
Great post, now I know what I should avoid.
Really good points. The study and use of typography is often overlooked or forgotten and it shows in an otherwise basically good design. I see this often in the overuse of added effects such as drop shadows and distorted shapes. Restraint is a good thing. That old kiss it rule: “keep it simple, stupid” continues to be valid. Thanks!
Absolutely amazing post
I find that good typography these days is often shadowed by overdone graphics, and outlandish color schemes.
\text can make or break a design, whether it is online or print
I wish I took more design classes in college. *sniff*
amazingly interesting article!
Thank you for this post!
Thanks. I’ve learned a lot. I’d like to add for purposes of reference - http://designingwithtype.com/worldwide.html
Foot marks instead of apostrophes and not kerning 1 and 9 when setting numbers makes me want to rip out my eyeballs in agony. But I’m not anal about type
In #2 your improved readability example has some pretty brutal windowing going on
d,
The illustrations were simply just illustrations not real examples… Most of them were over exaggerated to pinpoint the areas of focus for learning purposes.
I always seem to have trouble with #3 kerning, but I guess it can be tricky to get it just right and… it’s common! Thanks for another great post.
I agree with almost all of these—except for the statement about large body type looking clunky. It can—yes, but it does not have to.
Here’s an interesting read regarding relative readability—not based on technical jargon, but rather perception. Sometimes designers seem to become lost in technology and forget that their first and foremost goal is to communicate:
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
Inconsitant use of dashes, hyphen, en dash, em dash, and minus, all are different and have different uses. All choises depend on the styleguide of the publication, it is important to have at least some idea of what style guide you are using, from there you can make a decision abou how to go about using each of these four properly.
Great Post! I have really started focusing on the typography my clients wish to have and how that can effect the designs that we do for them. Since designing for the content is the main focus of web and print design, it really pays to focus on the typography and how it is displayed on the page.
Again, great post and great site!
Thank you for this post!!
Great article. Thanks for sharing this!
Great Read Brian!
If i could just get the folks i work with to read it… especially the centered text bit.
thanks again!
~ Aaron I
Faked small caps. They stick out so obviously both in wordprocessor output and on the web. It’s very distracting and looks at best like the writer bought cheap fonts..
vouge magazine
Um… that was 11 mistakes, not 10. I’m surprised nobody caught that!
thanks…
great article…
I always seem to have trouble with #3 kerning, but I guess it can be tricky to get it just right and… it’s common! Thanks for another great post…
I’m at my last typography class at the School at the Museum of Fine Arts in Boston and wrapping up a grid exercise creating a “fanzine” layout. This post basically summarized the semester! Thanks!
Steve,
Oh how I miss design school! Really, cherish the amount of time you have for learning, because once you’re out you wish you had more time. Glad you enjoyed the article and even happy you stopped by and chatted. Hope to see your comments soon!
So agree!
Yea nice info there. There are few things that I’ve tried to not make but there are some of these advices that are reasonable but I never knew them… Thanx for that post
For those saying long line lengths are ok, i will have to disagree (like the author).
The reason long long line lengths (in general) are bad is because your eye has a hard time finding the beginning of the next line.
This can be alleviated, to some extent, by adding leading, and can be a nice design effect used in the proper doses. But if you are setting type at, say, 10/12, then a 100 character line will eventually tire our most readers. The general rule of thumb (and it all depends on the typeface, really, since they’re all different widths and thus different line lengths at the same character count) was 37-65 characters per line.
Unspoken in that is the opposite issue, too. Line lengths that are too *short* can also hamper readability. Again, adding leading can mitigate the effects, and it can be a nice design element in short blocks of text (like captions or pull quotes, for example), but generally it’s a bad thing.
I didn’t notice anyone mentioning double spaces. That’s one of the fastest ways for me to spot a designer who doesn’t understand typography.
(Be gentle with the website if you look. I’m trying to learn internet marketing and that’s my practice page. I recruited a friend to provide the content. So the concentration hasn’t been on the design… yet! I’ll be switching to Wordpress as soon as I can find the time.)
LOVE this blog! I’m so glad I found it from a retweet on Twitter! I feel like I found a great place to come get refresher courses from AIS. (Ditto on wishing for more design classes back then!).
I agree with Kostandinos about the widows but also add orphans! I see lots of both everywhere! They can drive you crazy when you don’t have the option of editing a client’s copy.
Thanks for this great site! I’ll be checking my work against your advice very often!
Looking forward to the replies on Helvetica! I’m getting bored with that one and need something new but can’t make up my mind.
Cindy,
Glad you find DesignCubicle resourceful. Thanks so much for the comment and kind words
Absolutely amazing post
I find that good typography these days is often shadowed by overdone graphics, and outlandish color schemes.
\text can make or break a design, whether it is online or print.
Handy reference! thank you.
Very good.
Top notch! delicious… and dugg… and…
Most common mistake I see in type: spelling
Nice to Read. Want to more read for this kind of stuff….
Type design is the design of letterforms, i.e. creating typefaces, fonts. What this article addresses is typography. Typography is writing with pre-fabricated letterforms. A typographer is not a type designer. In my mind it is a distinction well worth observing in order to sound professional.
Thank you so much for this, my intern thinks I’m so anal! I’ll be sure to show her this.
Most overlooked but so neccessary,you must can read text like a book, or better, like a newspaper.
Text is worth thinking of, very great post!
Thank for these t’n't!
Ciao,
MP
I’m going to be studying this for the next few days.
Thanks for the clarification on typography.
Jacqueline,
Type is a beautiful thing. Glad I could bring more focus to it for you.
Again, great advise and mini-lessons. Now if only clients didn’t suggest or demand certain bad typography (I’m looking at you centered type).
The biggest typography mistake I see that hasn’t been mentioned is “floating heads”–subheads that have equal vertical space above and below. So the reader cannot associate the subhead with the text it belongs to. There should always be more space above the subhead than below.
Thanks for good collection of mistakes.
Overall, your suggestions are good, but I’m certainly not buying that “smaller fonts sizes” would create a more professional, modern look. Yes, it might be if the typeface is still easily readable in the small size (even for older people with weaker vision). I’m more in the camp of people who likes l larger text sizes because they can allow faster person to read content faster (your mileage might vary on the reading speed; some people actually read large blocks of small text faster than others). Still, your point of remembering the possibility to change default 12 point font for body copy is good thing to remember as too many people don’t realize how different things would look with different size.
Wilson Miner has interesting blog post about relative readability http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ and is referencing article written by Oliver Reichenstein of Information Architects Japan http://informationarchitects.jp/100e2r/ that has some nice guidance for many. Your opinion might be different, but it’s worth it to read what they suggest as good behavior.
I’ve been working as a web designer in Chandler, AZ and this article has become a great reference. It is important to understand that typography is not only for the print platform, it is also important on the web and other forms of media.
Using “your” instead of you’re in a sentence annoys me far more than too much or not enough kerning.
Who knew so many mistakes could be used in typing?
lol. thanks for making my intro to graphics class interesting. no sarcasm intended.
allowing comic sans to be used…
I work for a user-centered design studio, and we default to 12 point which looks horrible from a designer’s perspective. Do you factor in user needs and concerns when offering font choice advice?
thx, good info
I think that margins should be kerned more often.
thank you
Thanks for spreading the word. Typography is a learned artform. When you look at many designs, its so very obvious who has a design education and who doesn’t just by looking at the Typography. Its always a dead give away.
Thanks Again
What drives me NUTS is that I can’t get my boss (who gives me my copy) to stop double-spacing after periods! He learned this in his college days before computers and just won’t accept that this is improper and unnecessary nowadays. I do a search and replace and he seldom notices, but I find this is very common even with other writers. When will people give this up?
Great blog, typography is a lot trickier than i thought it would be
Thank you so much~
Guilty…
This was very helpful thanks!
Most overlooked but so neccessary,you must can read text like a book, or better, like a newspaper.
Text is worth thinking of, very great post!
Great post!
Using the correct typefaces can help enhance the message you are trying to get across. Throughout a website design, you should take into account which style is easy to read and can also be viewed on different browsers. This article has successfully addressed all issues relating to typography.
Number 11: Using Comic Sans when it’s not a joke. My English teacher constantly printed up prompts in Comic Sans, and it drove me up the wall… she was a great teacher, but I couldn’t take her seriously for awhile there.
A small note on point 6 - recent studies have shown that the wide use of san serif fonts in the last few decades have altered the reading habbits.
Now sans serif fonts are often read more easily especially by a younger audience. It seems that not the serifs aid the reading but how much we are used to a type of font.
Excellent post, handy for us ignorant web developers too. : )
The web has destroyed good design. ALL of it. No one cares about typography or color any more. You can’t control fonts on the web, so everyone just sticks to verdana because it’s readable and you can’t really control color, either, so what you intend is often NOT what you get. I’m seeing even the PRINT industry give up and start to accept for print documents in RGB. This makes me sad. Typography and CMYK color is going away and there’s precious little that can be done about it. As the world moves away from print and towards electronic, typography and color will continue to be marginalized. I hate it, but it’s happening already. :-/
Thanks for a great post - some really useful tips in there.
I can’t bear the use of justified type when it’s not neccessary, people seem to think they need to stay away from rl to make things look tidy.
Centered text is the most overused for sure!
I think this is a great article. I wish everyone understood how important leading, track and kerning are. And what a difference they all make too!
Great post! Thank you
I’ve never even heard of the grid system… Wow… need to look into that.
I find the serif issue to be quite a big one… MANY clients will call back and ask for san-serif.
Great article. However, I must disagree with some of the conclusions offered:
1. Leading is not something that only has a lower limit - you can also apply too much leading, meaning the eye has a harder time grouping two lines together.
2. Tracking is not something that should be universally recommended, it depends on the typeface. Apply tracking to the wrong typeface and, instead of improved legibility, you’ll actually ruin it. Words are not read one letter at a time - the brain interprets entire word shapes, mainly by scanning the top half ot the words. If you apply tracking too liberally, the spatial contrast between the words starts being insufficient, and the brain struggles to separate them.
3. “Inconsistent pairing” is in fact the core essence of kerning. There is no consistency in kerning at all, since letterspacing is different between each character, and should remain so. Consistent spacing is called monospacing. Characters are spaced individually, to compensate for the different combinations of shapes, and adjust and equalize the space optically - not mathematically. Again, this depends on the typeface: Helvetica is actually one of the fonts where the standard kerning can be trusted to a pretty high degree. What you have done in the example is actually ruin the kerning, especially between the “t” and the “i”. Squint at the image and you’ll see that it now reads “Helvet ica”. Sometimes, kerning needs to be squeezed and sometimes expanded, to make the character space seem less uneven to the eye. Actually, uneven character spacing is inevitable, given the great differences in character shapes. All one can do is try to compensate for it.
4. Regarding the length of a line of text, it very much depends on the distance from the eye to the page. In print, one typically holds the page closer, but in digital design, the monitor is at a greater distance, meaning the eye doesn’t have to move quite as much. So, a print-derived rule about line lengths should not be applied dogmatically.
5. There is no conclusive evidence to suggest that serifs are more suitable for longer screen texts than sans-serifs. When smaller sized low-resolution text is anti-aliased, the serifs are blurred, which distorts the word shapes, affecting legibility negatively. When low-resolution text is NOT anti-aliased, delicate serifs become slab serifs which affects character recognition negatively.
6. Be careful using general rules-of thumb regarding which backgrounds are best for negative text - 50% red is not the same as 50% blue. The legibility of negative text varies greatly depending on the background color.
7. By referring to the concept of a grid system as “the” Grid System, you make it sound as if there is only one universal system. You create your own grid system! It’s different for every design and every layout.
One common mistake I’ve seen and in the past have been guilt of myself is relying on the alignment tools in the application too often and not going back and visually aligning type elements properly. It may seem minor but the difference when you look at your designs becomes notable.
The program will align the text based on the bounding boxes, which more often than not is alright. But on occasion this is not suitable for certain characters and you should visually align them to correct this.
Also something that wasn’t brought up was consistency. Its important to be consistent in a design with regard to how you are using the type. If you use one font, and font size and color for a headline, unless client or supervisor guidance dictates other wise, you should try to be consistent with this unless there is some other very compelling design strategy involved.
I can’t tell you how many times I’ve seen designs or even articles in magazines or papers with various headline fonts or sizes for no good reason, or entirely too many fonts on the page!
Brian, I love your list. These are great tips to remember and review.
I also compiled a list on my blog of typography mistakes: “13 Signs of Badly Designed Type” http://ljdesignstudio.com/104-13-signs-of-badly-designed-type
I’m taking a class called “Introduction to Digital Media.” I have a lot to learn. This article is required reading. I’ve noticed that a lot of the text I’m reading for the class has glaring spelling and grammatical mistakes. This article spells the contraction of “you are” as “your.” Don’t you pros proof-read your own writing? We students might pick up some bad habits.
You forgot #11: taking typography advice from arrogant internet pedants who make a ridiculous generalizatios like “Serifs are known to make reading lengthy material…more sustainable for longer periods of time.” and provide nothing to back it up.
It’s a pretty good starter list: any longer and people will seriously start bickering about the exceptions to the rule (even if you state they are general guidelines).
I think the other common mistake that’s noticeable will be the lack of typographer’s quotes, or use of correct dashes, —, – or -.
One common typography mistake, I reckon, is to read up on articles about which fonts don’t work, and then eliminating it from your library and discrediting all designs that use it. eg: comic sans doesn’t usually work, but there ARE some instances where the typeface is applicable to some designs.
all fonts have a place (yes, even Papyrus). It’s just a matter of whether our designs are the right one for them.
This is a very good list of common mistakes. A couple more you may want to add are:
• Failure to use hanging punctuation
• Not including the space or character proceeding a word that will be italicized
there are 11 mistakes posted in a top 10 list
Big rick,
Finally someone saw my subtle humor
All in all, a great distilling of basic design principles for designing with text.
I take some issue with point number 3. Letter-fit as it relates to headlines is far more art than science. The overall balance is best achieved by “optical” spacing rather than any mechanical spacing. I think that’s what you’re trying to say, but in your examples, the first “Helvetica” is much better spaced than the second.
Great digital typefaces come in text and headline versions and have had master typographers adjust the kerning pairs of all combinations of letters to suit both of these uses. If you want great letterspacing, buy a great typeface family. Check out Berthold Typographers, Linotype, Hoefler Frer-Jones and Font Bureau. You get what you pay for.
I don’t get it. What’s wrong with comic sans? I like it almost as much as Papyrus. Sometimes, when I’m feeling really bold, I use them both and center them.
I think you’ve kerned the l and v too much.
Very helpful and informative text!!! I quite agree with your point that mixing too many type faces can distract the reader. Another element in the post which I agree too is that lengthy lines of text cause eye fatigue. Hence, the reader looses interest…… Thanks for sharing the post.
Very useful article. Thank you.
#4 about the line length is quite simply wrong. Research has shown the print rules about line length do not apply to the web, longer line lengths can improve reading in this medium. More reading here: http://www.viget.com/advance/the-line-length-misconception/ but that isn’t the only source you can find to backup this information.
Don’t blindly apply rules of the old media to new types of media such as the web.
Oops, meant to say other than #4 this is a good article every web designer should read!
Good article. Your first three items can make such a large difference in a project and are typically the three most ignored.
Well worth the read. I’ll be paying better attention to these things and also passing this on! Thank you.
“Serifs are known to make reading lengthy material, such as books and magazines, more sustainable for longer periods of time. It also helps with eye strain/fatigue, and we all know that we need our eyes!”
This is an urban legend; there is no objective evidence (that I know of) that it is true. While studies show that there is indeed a difference in legibility between different typefaces, whether or not they have serifs does not seem to play a role.
Quote:
“There are plenty of studies that show no difference between the legibility of serif and sans serif typefaces.”
via http://www.alexpoole.info/academic/literaturereview.html
There’s also the issue of on-screen text. Many serif fonts don’t look too great at the sizes typically used for screen text, especially using Windows’ pixel grid anti-aliasing. If anything, using serif fonts for on-screen text may be harmful and look crappy.
Also, I’m not actually sure whether you advocate using smaller or larger font sizes in point 10., but a good thing to try is to hold a book at reading distance, and compare the size of the letters to text on your screen at normal screen distance. Since your screen is usually about twice as far from your eyes than a book you’re reading, it’s important to use larger fonts on your screen than what you would use for printing. It also looks better, in my opinion.
nice list, every designer should read this
cheers
It’s very easy to fall into the trap of letting your design software set the kerning by default! [#3] - couldn’t agree more!
I think this is a great article. I wish everyone understood how important leading, track and kerning are. And what a difference they all make too!
I have been guilty of too many typefaces. Usually it is not because of me doing it on purpose, it is due to copy/paste from Microsoft Word. Not sure exactly why it happens, but it does. Sometimes it is hard to change as well!
Couldn’t agree more, great post
Yeah, the grid is my life right now.
Good article. Your first three items can make such a large difference in a project and are typically the three most ignored.
Faked small caps, both on the web and in Word documents. If they aren’t there, don’t pretend to use them. They look stupid and stand out a mile away.
I would also add those backgrounds full of patterns, or the one that are so dark that the font colour needs to be white. They’re really hard on the eyes!
I’ve never even heard of the grid system… Wow… need to look into that.
I find the serif issue to be quite a big one… MANY clients will call back and ask for san-serif.
Great tips, am a web designer and there are things that i am overlooking and didnt even know about!!
so thanks for the tips
regards
steve
Excellent post, really to the point. Thanks for sharing such useful tips.
You should add people setting tracking to -30.
Really gets on my goat - best practice is no more than -5 and 97% horizontal sqeeze. Ofcourse sometimes you have to go further.
Interesting post. A key factor is choice of fonts. Many times, it is the choice of a font that will give away the skill of the designer.
Personally, I tend to dislike bold text that is used gratuitously and without proper thought - anyone else? There should be a valid reason for it, otherwise just say no.
I use bold text in some pages,, the reason for this? catching peoples eye line!! I dont mean that i have bold text all over the pages that would be silly but what i do use it for is catching peoples eye!! Try it.
It’s very easy letting your design software set the kerning by default! [#3] - but I think I still use do it too often.
Thanks. Good work!
read it…this will help you improve your typography, especially in paragraphs. ok BYEEE
I think you’ve kerned the l and v too much.
Most writers fall into the error in writing long sentences. Sometimes I feel nausiatic by reading those very long single sentence.
Well, thanks for showing the mistakes here. At least people will be aware of what to avoid next time.
I have always thought the rule for ellipses stated that if they were to indicate the omission of words within the same sentence, one used three ellipses; if they concluded a sentence, one used four. I’d be interested to hear of any authoritative substantiation (or refutation) of this rule.
This is a very good list of common mistakes. A couple more you may want to add are:
• Failure to use hanging punctuation
• Not including the space or character proceeding a word that will be italicized
Yeah, the grid is my life right now.
well well, that’s pretty interesting on typography
Nice article. Typographic rules and grids seem to elude a lot of designers…
Thanks for a great post - some really useful tips in there.
I think most of us were guilty of at least 1 of these at some point… and sometimes maybe I still am guilty!
spacing is a big issues, more so with logo design, thanks for the info
will craig
As much as I think #10 is a great tip for beginners, you’re breaking your own rules by showing it on tight leading and too short a line length. There’s nothing wrong with 12pt type if it’s on the right leading. It can look professional, and if anything is more legible and readable than it’s smaller counterparts.
Some websites uses Arial as a standard font character.
Great post. Really useful typography tips, these will help me a lot in future.
Thanks for sharing.
Hi,
I have never read such an interesting information. Nice stuff
Brilliant collection
Nice post. Really useful typography tips, these will help me a lot in future.
Thanks for sharing.
Thanks for sharing. Great resource for me.
Nice post. Most users don’t care to spell check much. Wonder why… It could make things much better
nice tips man, great post. maybe useful for me next chance.
any font to build a personal site? i want to create a personal site but no have inspiration to use a font.