Google


Home
NEW YORK
Katrina
The Water Resort
Plaza Tower
Aspects of text
Creativity
Potential Client

Aspects of text


Choosing the right font for the job!
 

Designers spend a large portion of their work time contemplating the aspects of text and/or font. In order to help understand the importance of font, ask yourself “What differences are there between the font and text of professional designs as opposed to low quality work?”.

Answer number one? Size. Size of font is a direct variation to attention. As a rule of thumb, body text should never be over 16 pixels. Now, this may not be the case 100% of the time, but who wants to have to scroll 3 or 4 times to read a small paragraph? As stated above, size relates to importance in the web design world. The title or header may range anywhere from 20 pixels to generally 28 pixels. This is an appropriate size for the title because it is noticeable, yet not overly distracting or taking away from the overall view. Keep font categories the same. What I mean by this is, don’t have one paragraph with a size of 14 pixels, while another is 12 pixels. Decide on a font size that will stay constant throughout the design. Take a look at this site. Notice the title has the largest font on the page. The sub-titles both share the same features: all-capitalized, large size (but smaller than the main title), orange, and a light gray underline that spans to the end of it’s container. Body text is dark grey and smaller in size than both the title and sub-titles. Links are the same size as the body text, but are blue in color to stand out. All of this helps to create consistency throughout the content.

Answer number two? Color. Colors have always been linked to emotions. The color of text on a website can register many feelings within our bodies. For example, certain colors release calming chemicals. Large amounts of black indicate authority and power, and even evil. On the opposite spectrum, white is synonymous with purity, safety and neutrality. Often associated with death, taxes or depression, gray may sway your visitors to feel nothing. The color of movement and excitement, is obviously red. Red is attention grabbing and makes a loud impression; therefore use in moderation is necessary. Blue is the most popular favorite color. Loyalty and respect are found to have blue associated with them (like uniforms). All physical activities are said to be superior in blue conditions. Wealth, superiority and nature have links to green. Shades of light greens are used in hospitals as ways of calming their patents. Happiness, sanguinity and good times are symbolized by yellow. Yet, be very careful with over using this color. It may become annoying or cause tempers to flare. Orange is unlike any other color, the most ostentatious or showy. It has traits linked to ambition and a new attitude. Majestic, royal, rich are examples of purple’s power. Used often to create a feeling of mystery. Overused though, and purple causes an artificial affect. Brown is associated with the earth, stability and harvest. Also, brown should be used moderately. As you can see, mere colors can affect a user’s experience before they even read your site.

Number three? Typeface. All websites should use typefaces that are practical, easy to read and simple. No one wants to read some impact or space typeface on a professional page. One of the most popular typefaces in web design right now is Arial. Why? Arial is a sans-serif typeface that’s easy to read, has great proportions, and looks great when used with proper vertical spacing. Bold, italic and oblique typefaces draw attention to important information. Normally links or hyperlinks are easy to find because they are underlined and/or colored differently than the rest of the content. Personally, I really love dotted underlines under links. Use these whenever you feel the need to make something stand out, but don’t get caught up using these too much — overuse can ruin a good thing.

Thanks for reading! I hope that this little post will help you in working for your next client, or just for yourself!

57 Responses to “Choosing the right font for the job!”

1. Damien Says:
April 1st, 2007 at 7:57 pm

I loved the bit about the colors, it is so true.

Great read, thanks.
2. links for 2007-04-02 « Costi’s evansmemo Says:
April 2nd, 2007 at 5:55 am

[…] DesignersMind » Blog Archive » Choosing the right font for the job! 选择好字体对工作的重要.. 大小颜色等等.. (tags: tips 字体 工作) Explore posts in the same categories: Delicious […]
3. jim Says:
April 2nd, 2007 at 6:55 am

stop. measuring. type. in. pixels.

PLEASE!
4. Tim Says:
April 2nd, 2007 at 7:12 am

I disagree. For text that is to be displayed on the screen, PLEASE measure all fonts in pixels. This allows it to be displayed the same size regardless of the DPI setting in the operating system.

For text that is to be printed, please measure all fonts in points.
5. martoon Says:
April 2nd, 2007 at 7:13 am

Great info, but be careful when choosing a color. The same color can mean different things to different people from different cultures. In the west, white could be used for a wedding, quite effectively. In the east, white could be used for a funeral, quite effectively. Know your audience.
6. 24klogos Says:
April 2nd, 2007 at 7:17 am

Tim, screens (computer screens) measure by PPI (pixels per inch) not DPI. and though the rule of thumb is 72 dots , or pixels fit on one inch. not all moniitors have the same pixel ratio, proportion and run on the same resolution. keeping sized absolute on screen may be a good guideline but its never exact. sizes may even display differently from browser to browser. That being said, yes, for print purposes dots per inch are the standard, though with the new digital presses coming out, we sure will start calling those dots pixels pretty soon.
laters
7. HaHaUK Says:
April 2nd, 2007 at 7:27 am

Sony should have read this before using the various fonts for the PS3 and related advertisement. Especially that hideous Spiderman one.

http://hahauk.com
8. Tim Says:
April 2nd, 2007 at 7:32 am

24klogos, yes I understand that it’s really PPI, but most operating systems call it DPI (Windows included). The problem is that different operating systems use different settings. Windows is 96 PPI by default - a 12 point font is 16 pixels. OS X is 72 PPI by default - a 12 point font is 12 pixels.
9. Choosing the right font for the job! « News Coctail Says:
April 2nd, 2007 at 7:39 am

[…] the right font for the job! Filed under: Uncategorized — recar @ 12:38 pm Choosing the right font for the job! Designers spend a large portion of their work time contemplating the aspects of text and/or font. […]
10. Aidan Says:
April 2nd, 2007 at 7:42 am

Great another print designer article on how to inaccurately choose type for your website. Font sizes should be chosen in percentages based on the base size set for the body element using CSS- not in pixels!
11. tech Says:
April 2nd, 2007 at 7:47 am

can you give some examples?

regards…
12. Alex Says:
April 2nd, 2007 at 7:48 am

Great info for beginners in Web Development and Designers. Sounds like you have some expo under your belt.

Keep on the Great Job.
13. erik Says:
April 2nd, 2007 at 7:48 am

thanks for the tips.
14. Miracle Herbs Says:
April 2nd, 2007 at 7:54 am

Quite a useful Info.
15. Contact Lens For You Says:
April 2nd, 2007 at 7:57 am

Found it Interesting on the Digg.
Well Done….
I wonder why Myspace being the “Worst WebDesign Seen” still rocks the popularity!!!
16. icecoldx2 Says:
April 2nd, 2007 at 8:09 am

does it mean that i digged this article, the title got my attention.. dang..
17. Retired Editor Says:
April 2nd, 2007 at 8:17 am

Readability studies indicate that fonts with serifs (such as Times New Roman or other roman fonts) are easier to read than sans-serif typefaces. We read words by seeing their shapes, and serifs help us to see each word as a unit.
18. Ondra Hosek Says:
April 2nd, 2007 at 8:52 am

I would agree with basically every point except maybe the use of Arial. I’ve grown tired through the years of Arial’s plainness. I’m not saying it’s an ugly font, I’m saying it has been used and overused and I’d rather see less plain but still professional-looking sans-serif fonts like Frutiger at least on paper. (Obviously, Frutiger on the web is a problem due to licensing issues…)

I’m not as tired with Times New Roman, which is also a great piece of design work, but, again, don’t overdo it. I don’t want the whole Internet to use this.
19. Prime News Blog » Blog Archive » xxx wonder woman Choosing the right font for the job! Says:
April 2nd, 2007 at 8:53 am

[…] the font and text of professional designs as opposed to low quality work?”. wonder woman fuckread more | digg […]
20. Andreas Says:
April 2nd, 2007 at 8:59 am

Nice article.
I agree with the clour issue,but i am unsure of its importance- do designers realy take into consideration the issue of what users will feel about the site if you use brght red and black,,or just if colours match and the whole site looks and feels nice-is aligned to corporate brand etc etc.?
21. Raybo Says:
April 2nd, 2007 at 9:12 am

I’d have to disagree with “Retired Editor”. I understand that serifs may be easier to read…in print. But online serifs are harder to read, especially serifs which haven’t been optimally designed for the web as well as serifs which are smoothed by computer rendering.
22. Chris Says:
April 2nd, 2007 at 9:16 am

Great article, very helpful! Thanks
23. Clay Says:
April 2nd, 2007 at 9:17 am

Wow, this is an amateurish article.

Regarding font sizes, (as others have mentioned) you should be using points, not pixels, for the very reason that you want your font to appear the same size on all monitors, no matter their resolution.

Regarding colors, that was about the most elementary and uninsightful regurgitation of color theory I’ve ever heard.

And regarding typefaces, you shared nothing of interest whatsoever. No discussion of how to choose complementary typefaces, or how to use image-based fonts to add visual interest while using text-based (and WEB-SAFE!) fonts for text. And why is Arial popular? Um, because it’s web-safe and ubiquitous. Yes, it’s a clean on-screen font. But honestly, we still have very little choice in this realm, due to the paltry default font set installed on Windows and Mac computers.

A web designer with real experience would have a lot more to say about fonts than this.
24. Shalimar Says:
April 2nd, 2007 at 9:46 am

I agree with Clay, I though I was going to get a helpful and insightful article. Instead i got the common sense any semi visual person might have. Might want to rename the article as to not mislead.
25. Brad Says:
April 2nd, 2007 at 9:51 am

For the love of all that is good an holy, stop the Arial and other san-serif font trends. It’s okay for small things, but for anything longer than a page (say…main body text) use a serif font. Serif fonts reduce eye strain and are easier to read in the long haul. You’ll never see a book printed in Arial. For good reason.
26. Joseph Says:
April 2nd, 2007 at 10:07 am

people, why does EVERYTHING have to have some sort of stupid underlying purpose? Like colors. I hate what the marketing world has become - emotions. why do i hate it, because i THINK about what im doing and what im buying. I dont let my emotions, and the way people try to guide them, run my brain. Blue doesnt represent loyalty to me anymore than pink does. red doesnt appease my appetite anymore than green does. Its all crap-o-la and i cant wait for the aliens to come here and blow us up. They really are, they told me so.
27. Lawton Chiles Says:
April 2nd, 2007 at 10:19 am

Thanks for reminding me what good typography is all about: keeping it simple and not overly fancy.

I will be returning and letting my readers know about your groovy resource.

Thanks!

Lawton Chiles
Graphic Design Minute
28. Michael Says:
April 2nd, 2007 at 12:21 pm

Sorry, but measuring fonts with pixels is so web1.0!
The Web is NOT print! Use em’s!

My advice: http://www.alistapart.com/topics/design/typography/
29. Christian Says:
April 2nd, 2007 at 1:38 pm

Brad - amen about the san serif fonts. They do look nice for short blurbs but they are hard on the eyes after awhile.

What are your thoughts on the new(ish) Segoe font?
30. Cornelius Says:
April 2nd, 2007 at 1:45 pm

I think this is the worst article about type that I’ve ever read, ever.

And I’m not talking about “pixels vs points,” I’m talking about the actual merit of the “knowledge” presented. Before you start trying to give people advice, best that you learn what you’re talking about.

Every single one of your three tips is so far off base and so filled with bullshit. No mention of line length, leading, kerning, heirarchy, or contrast in #1, aside from a basic rule about making your headline larger than its content (this is not something that anyone needs to be told). Everything in #2 about color theory is personal opinion, none of it is rooted in fact, and the one clear piece of advice you seem to give is “use interesting colors sparingly.”

I’m not even going to pick apart #3. What advice do you possibly have to give about type choice? “I like dotted underlines”?

Learn your shit before you try to teach other people. When articles like this spread, they drag down the whole community.
31. Chris A. Says:
April 2nd, 2007 at 1:47 pm

True, Shalimar, the title could stand to be more transparent, but this short, sort of 101 course won’t hurt those who are more savvy at web development and it may help some that are making horrid sites. I only counted two things as bad advice: promoting Arial and pixel-sizing for fonts. Down with Arial and up with relative font sizes.

My take on both: http://inspireaction.mindandmedia.com/index.php/2007/04/02/monstrous-fonts/
32. mike Says:
April 2nd, 2007 at 1:49 pm

Talk about colors. Washed out gray give me the feeling that your ink cartridge is about to run out and you’re too cheep to replace it. What would you do if your printer or copier output stuff like that - I bet you’d replace the cartridge as soon as possible. Why send out stuff on a website with that crappy look?
33. mike Says:
April 2nd, 2007 at 1:52 pm

Font size is another hot spot. Not everyone has the eyesight of 20 year olds. Some fonts are just too small to read comfortable (or at all). Let the user set the default size - you just use the em attribute - preferable at 1.05 and up. This makes it easy for everyone to read it.

If it’s not important enough to get a good crisp color and a readable size, then why waste the bandwidth!
34. Brian Cray Says:
April 2nd, 2007 at 2:05 pm

This is just a response to some of the comments…

1. For the web, font size should be specified in pixels for the BODY element, and specified as percentages thereafter.

2. Serifs should not be used unless in a large size on the web. Monitors do not have a high enough PPI (DPI, WHATEVER) to display serifs nicely, so they just look pixelated.

3. Yea, arial isn’t the greatest font, but web desginers have to stick to web-safe fonts (fonts that are on Winblows and OSex). Arial is more of a designer’s font than verdana… c’mon. Verdana, while easy to read, is as ugly as carp.

My two cents, anyway.
35. Justin Kozuch Says:
April 2nd, 2007 at 2:51 pm

I have a technique that is fail safe for web-fonts:

body {
font-size: x-small; /* for IE5/Win */
voice-family: “\”}\”";
voice-family: inherit;
font-size: small; /* for compliant browsers */
font-family: Arial, Helvetica, sans-serif;
}

html>body { /* Be nice to Opera */
font-size: small;
}

No matter what browser I use, I get the same font “experience” across the board. Love it.
36. Justin Kozuch Says:
April 2nd, 2007 at 2:58 pm

I should also that this makes scaling other elements, headers, paragraphs, etc much easier, as I use percentages for sizing other elements.

For instance:

#somedivname p {
font-size: 90%;
}

That way, IE6/IE7/Ffox 1.5/Ffox 2.0/Opera/etc, scale the fonts the way they should. Perfect. :)
37. tweak Says:
April 2nd, 2007 at 5:35 pm

My only complaint is recommending Arial over Helvetica. Max Miedinger will be rolling over in his grave…
38. SearchRoads » nude batman cartoons Choosing the right font for the job! Says:
April 2nd, 2007 at 5:50 pm

[…] the font and text of professional designs as opposed to low quality work?”. gay comic batmanread more | digg […]
39. Cartoons Fans Lounge Says:
April 2nd, 2007 at 8:48 pm

[…] text of professional designs as opposed to low quality work?”. meg’s X Men fanfictionread more | digg story No Comments so far Leave a comment RSS feed for comments on this post. TrackBack […]
40. lauren’s library blog » Blog Archive » links for 2007-04-03 Says:
April 3rd, 2007 at 12:39 am

[…] DesignersMind » Blog Archive » Choosing the right font for the job! Font tips that are useful for library folks creating marketing materials, websites, and online learning activities. (tags: design tips) […]
41. Fat Mobil Content » batgirl tickled Choosing the right font for the job! Says:
April 3rd, 2007 at 2:47 am

[…] the font and text of professional designs as opposed to low quality work?”. the batman batgirlread more | digg […]
42. Dan Says:
April 3rd, 2007 at 11:59 am

Aprial fool!
43. Scott Says:
April 4th, 2007 at 10:06 am

Brad…

“Serif fonts reduce eye strain and are easier to read in the long haul. You’ll never see a book printed in Arial. For good reason.” This really isn’t true.

Brian Cray is correct. Resolution of monitors make serif fonts difficult to read. The general rule of thumb is to use sans-serif fonts for screens, and serif fonts for print. One could argue that large serif fonts can be used headers, title graphics, etc, but body text should be rendered in an easy-to-read-via-monitor sans-serif font.
44. virtualadrian.com » Blog Archive » So you suck at design!? Says:
April 4th, 2007 at 1:17 pm

[…] 1. It is a common one that most people have, I happen to be a big fan of Verdana ( or you can use flash to solve that issue, although that is kind of an advanced technique… Google “sIFR”) 2. Font color, which this article can help with: http://designersmind.com/articles/choosing-the-right-font-for-the-job […]
45. morganusvitus Says:
April 5th, 2007 at 7:54 pm

 


Home | NEW YORK | Katrina | The Water Resort | Plaza Tower | Aspects of text | Creativity | Potential Client

 Copyright v84u.com