Typography in Design

TypographyIn the early days of most folk's web design and graphic design careers, the choice and application of typography was the same as asking oneself, "What font should I use?"

As many entry-level graphic and web designers will find out, typography is not simply about font. It is about measure, leading, tracking, color and layout. The typography must be readable as well as visually pleasing - and it must fit thematically with the other content on the page. We will attempt to describe in layman's terms the importance of the basic elements of typography.

Font: When designing for print, use serifed fonts. When designing for the screen, use sans serif fonts. There are exceptions to this rule, but mostly in the way of titles and headers. For body text seen on computer monitors, a sans serif font is the way to go for the most readability in most cases. We have seen many beautiful serifed fonts used recently on the web- but they are usually font size 14 and above. This makes the readability of serifed fonts a non-issue - mostly.

Based on our own research and experience, the following fonts are the most available, accessible and readable for the web. Unfortunately, many designers may feel silly using such "archaic" fonts, even if just for body text.

Sans Serif, size 12+: Arial
Sans Serif, size 11-: Verdana
Serif: Georgia

Measure: The width of the body of type. Basically, how wide is your paragraph or body of text? The best practice is usually to limit your width to 50 - 80 characters in length. Any narrower or wider and you risk having readability issues. As a rule, the wider your measure, the more leading you need to retain readability.

Leading: This is what many designers may call "line height". This is the amount of spacing between each line of text. As we mentioned above, the wider your measure (or width of the body text), the more leading you will need. When using light text on a dark background, you would need to add even more leading and tracking to the body of text.

Tracking: This is the spacing between letters and words. Right now we're just interested in word tracking. A good rule to remember is the narrower your measure, the tighter the tracking. The wider your measure, the wider your tracking between words. Letter tracking can be fun, but make sure you are conservative when it comes to body text.

Color & Layout: Color and layout are important elements of typography that must be tested and used by web and graphic designers on a regular basis. There is really nothing we can say here that can prepare a designer for all possible types of designs, styles or color combinations. Any rule of thumb that we could give would eventually be disproven with a typography style that works for an individual design that exists as an exception to the rule.

While many professional designers are in no way experts in typography, they do have some experience putting it all together in a cohesive way. Usual strengths lie in design using color and layout. Even so, the final word of advice we will give is this: when in doubt, make it readable.

 

 

38 comments (Add your own)

1. LUONG TAT TU wrote:
typography

Tue, March 28, 2017 @ 1:30 AM

2. Vianoraburf wrote:
3773 wow cialis buycialis onlin

http://cialisyqwol.com/ - generic cialis online
generic cialis

cialis en suisse forum

Mon, October 15, 2018 @ 8:50 AM

3. Vianoraburf wrote:
3773 cipla cialis online

http://cialisyqwol.com/ - cialis
cialis

levitra cialis canada

Tue, October 16, 2018 @ 12:44 AM

4. Aveniraaburf wrote:
37a1 insurance covers viagra

[url=http://viagrakiier.com/]buy viagra online[/url]
buy viagra

where to get viagra in el paso

Wed, October 17, 2018 @ 7:23 AM

5. viagra wrote:
Hello!

Wed, October 17, 2018 @ 5:54 PM

6. cialis_online wrote:
Hello!

Wed, October 17, 2018 @ 5:54 PM

7. buy_viagra wrote:
Hello!

Wed, October 17, 2018 @ 5:54 PM

8. super wrote:
Hello!

Wed, October 17, 2018 @ 5:54 PM

9. cheap_cialis wrote:
Hello!

Wed, October 17, 2018 @ 5:55 PM

10. viagra_online wrote:
Hello!

Thu, October 18, 2018 @ 10:49 PM

11. cialis_online wrote:
Hello!

Fri, October 19, 2018 @ 7:30 PM

12. viagra wrote:
Hello!

Fri, October 19, 2018 @ 7:33 PM

13. viagra_cheap wrote:
Hello!

Fri, October 19, 2018 @ 7:33 PM

14. viagra_online wrote:
Hello!

Fri, October 19, 2018 @ 7:33 PM

15. buy_viagra wrote:
Hello!

Sun, October 21, 2018 @ 6:53 AM

16. super wrote:
Hello!

Sun, October 21, 2018 @ 6:53 AM

17. viagra_cheap wrote:
Hello!

Sun, October 21, 2018 @ 6:54 AM

18. viagra_cheap wrote:
Hello!

Tue, October 23, 2018 @ 3:17 AM

19. viagra_cheap wrote:
Hello!

Tue, October 23, 2018 @ 3:18 AM

20. viagra wrote:
Hello!

Fri, October 26, 2018 @ 6:12 PM

21. viagra wrote:
Hello!

Fri, October 26, 2018 @ 6:12 PM

22. online_cialis wrote:
Hello!

Fri, October 26, 2018 @ 6:12 PM

23. cialis wrote:
Hello!

Fri, October 26, 2018 @ 6:12 PM

24. viagra wrote:
Hello!

Fri, October 26, 2018 @ 6:12 PM

25. wrote:
This is really interesting, You are a very skilled blogger.
I've joined your rss feed and look forward to seeking more of your excellent post.
Also, I have shared your site in my social networks!

Tue, March 5, 2019 @ 12:56 AM

26. wrote:
If you are going for most excellent contents like me,
simply visit this web page daily since it provides feature contents, thanks

Wed, March 6, 2019 @ 8:42 PM

27. wrote:
Wonderful goods from you, man. I've understand your stuff previous
to and you are just extremely excellent. I really like what you have acquired
here, really like what you are saying and the way in which you say
it. You make it enjoyable and you still take care of to
keep it sensible. I can't wait to read much more from you.
This is actually a great website.
viagra

Wed, March 6, 2019 @ 9:09 PM

28. wrote:
Hi there, just became alert to your blog through
Google, and found that it's truly informative.
I am going to watch out for brussels. I will appreciate if you continue this in future.
Lots of people will be benefited from your writing. Cheers!


Buy Usa Kamagra
[url=http://kamagrainus.com/]Kamagra Pills[/url]

Fri, March 8, 2019 @ 12:56 AM

29. wrote:
Hello i am kavin, its my first occasion to commenting anyplace,
when i read this piece of writing i thought i could also create comment due to
this brilliant article.

Sat, March 16, 2019 @ 7:37 PM

30. wrote:
If some one wants to be updated with most up-to-date technologies after that
he must be pay a quick visit this site and be up to date everyday.

Cialis medicine online acquistare cialis online
forum

Thu, March 21, 2019 @ 1:06 PM

31. wrote:
Can you tell us more about this? I'd care to
find out more details.

Wed, March 27, 2019 @ 8:45 PM

32. wrote:
I like the helpful info you provide in your articles.
I will bookmark your weblog and check again here
frequently. I'm quite sure I will learn a lot of new stuff right here!
Good luck for the next!

Wed, April 10, 2019 @ 3:27 AM

33. wrote:
This text is worth everyone's attention. When can I find out more?

Fri, April 12, 2019 @ 7:36 AM

34. wrote:
Great work! That is the type of information that are meant to be shared across the internet.
Disgrace on the seek engines for not positioning this submit upper!

Come on over and seek advice from my website . Thanks =)

Wed, April 24, 2019 @ 12:58 PM

35. wrote:
Компания "Промтеплострой" предоставляет
на рынок в пределах России и СНГ большой выбор пром.
оборудования, в том числе широкий выбор редукторов различного
назначения. Для изготовления и сборки используются только качественные и
надёжные материалы. Специалисты помогут правильно подобрать и купить с доставкой подходящий редуктор по выгодной цене.


редуктор 1Ц2У-400 редуктор 1Ц2У-400

Mon, May 6, 2019 @ 11:24 AM

36. wrote:
I know this if off topic but I'm looking into starting my own blog and was curious what all is required to get set up?
I'm assuming having a blog like yours would cost a pretty penny?
I'm not very internet smart so I'm not 100% certain. Any tips
or advice would be greatly appreciated. Cheers

Mon, May 13, 2019 @ 5:02 PM

37. wrote:
You ought to take part in a contest for one of the highest
quality blogs online. I will recommend this website!

Wed, May 29, 2019 @ 4:24 AM

38. wrote:
I'm really loving the theme/design of your web site.

Do you ever run into any browser compatibility issues?
A number of my blog audience have complained about my blog not operating
correctly in Explorer but looks great in Opera. Do you have any suggestions to help fix this
problem?

Sun, June 2, 2019 @ 9:01 PM

Add a New Comment


code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

RSSEmailFacebookTwitter

Try it out for free. Create your own demo website in seconds. Sign Up For Free