Total Followers 132,503
As web designers, our designs have to be both usable and attractive, communicate information and create a name. Our designs must be technically proven and tested for our dear readers. With that in mind, web designing is definitely a form of communication and nowadays, this type of communication is very, very important. As a form of communication, we, as web designers do the speaking and we hope our readers and viewers listen.
For all types of communication, the most important thing is to be able to fully transmit the message to the receiving end. In other words, in web designing, the most important thing is to make our readers understand whatever it is we are trying to convey. This is where typography comes in. If the text in our design is too small to read, or too cramped up, or if it irritates the audience while viewing the design, the page won’t get a second glance.
Now, 95% of the information communicated on the internet is written language. Therefore, it’s just logical to suggest that a web designer should preferably get effective training in the key discipline of shaping written information, putting it simply: Typography.
Whenever people visit a website you have designed, chances are they won’t care much about the illustrations or pictures or sounds, people will immediately look at the text.
People search the internet hoping to find the information they need. They are looking for information and this information come in the form of text content. How else are we supposed to communicate the message we want while integrating it in our design?
Regardless of how many special features you have built into the website you’ve designed, everyone will always depend on text content to obtain whatever they want when visiting the site. This alone should make typography a suitable wife for your web design.
So, why is typography important?
Thus, you want your text to be as catchy as possible. Not flashy, but catchy, just enough to keep the readers interested. For example, what do you think headlines are for? Correct, headlines are there as headlines to grab the readers’ attention.
If we master that 90 %, which is typography, we can already say that our web design is a huge success.
Readers are like spoiled brats (no offense), they like to get what they want, when they want it. They want to get what they are looking for in an instant. That’s why you need to have a design that can attract and maintain the interest of the readers. In order to do that, you need to have a proper blend of typography and graphics.
Our goal as web designer is to showcase our designs to the whole world, and convey information and a clients message through design – in written language!
Speaking of written language, not a lot of people (who just might stay and have a blast with your site!) have the same fancy lineup of fonts that you have. Therefore it just follows that the very first rule in web typography is that web designers should use default fonts.
In order to wow(!) our readers, we need them to be able to read and understand the information and messages we want to convey in our web design. To do that, we need to utilize fonts that all computers have.
Let’s begin with the serif family. Look at the image above. Do you notice those cute little finishing strokes? That’s Serif. If we remove those cute curls and little blobs at the end of the strokes we get Sans Serif.
When creating our designs, we should always consider these types of fonts. All our readers’ computers, for sure, have these fonts!
Here’s the list.
It is said that the Serif family is the older one and originated from the Roman Empire. It is very wise to use Serif in our content body because it guides the horizontal flow of the eyes. And Sans Serif? As we all know, headlines are very important and we need it to catch the readers attention. That’s why Sans Serif is the best choice for headlines. Using Sans Serif as font for headlines helps the headlines pop out from the whole article.
Thus, the most popular combination that CNN and BBC use is to use Serif for the article body, but use Sans Serif for the article headline.
Another term for this is line height. For a great web design, line height is a very important factor to consider. I’m sure each and every good web designer out there already knows this simple fact.
Before we become web designers, we are readers of our own design. We want our design to as easy-to-read as possible, and we want everything in our design to look good. That includes line height.
The best, and perhaps the easiest, way to achieve the most natural balance in the typography of our web design is to use the em measurement in CSS.
It’s a wise decision to utilize between 1.2em and 1.4em. This approach makes sure that the reader will not have a hard time differentiating between the lines of text you’re presenting and will be able to comprehend the text much better.
In the field of web design where creativity and an unlimited source of it is very important, it is really, really hard, especially for beginners to see the fine line that separates a great web design from a very confusing one.
It is very easy to get lost in using a lot of fonts in our designs. Everything always seems good for something. This one’s great for this, and that one’s great for that. But in reality, web designs which include a lot of different fonts are generally unpleasant and confusing to look at. By doing this you may overlook the element of consistency your design should have. This does not necessarily mean that it is best to just use one font, however, try limiting it to two to three fonts per page
The following tools can help beginners (and experts) with their web design and typography.
This is perhaps one of the coolest typography blogs on the planet.
Enter the text you want to modify, test its readability, and see how it will look like in any style you set.
Pronounced as “sense”, this tool allows you to actually focus on developing your website’s style.
This is a beautiful collection of fonts, free to download.
Try out different text and see how it will look like on various web safe fonts.
Throughout history, be it internet or real world, typography has always been very important. It is as important today as it was back then. Typography is an integral part of web design, from headlines to sub headlines to smaller-sized text in the content, typography is a pure combination of art and science and it is a very crucial piece of web design.
Perfecting typography means perfecting readability, ease, usability, and all in all graphic harmony for readers. By doing so, we achieve our goal as web designers to communicate clearly with our readers and they in turn, enjoy our web designs.
Get The Only Freelancer crash course you will ever need to read!
Sunday, March 11th, 2012 18:00
I love really good typography in web design. Choice of typography can make or break a website in my opinion – from a design point of view.
Thursday, May 26th, 2011 20:01
I’ve been told that Serif should be used for print work, and sans serif should be used online. I believe sans serif is definitely easier to read on a monitor, and I tend to stay away from serif in both online headlines as well as online content.
Sunday, February 20th, 2011 06:15
I like the advice on sans serif for titles and serif for body. I hadn’t considered serif “guiding the eyes” before, I guess that’s why most books use it!
Tuesday, February 8th, 2011 06:09
Check this two tools:
http://modularscale.com/
http://lamb.cc/typograph/
Tuesday, February 8th, 2011 09:29
wow, nice share man! interesting tools! Thanks!
Monday, February 7th, 2011 20:23
To piggyback a bit on Rowan’s comment regarding fonts– I would add Verdana to the sans serif list.
Monday, February 7th, 2011 00:20
Sorry, but I got this far: “It is very wise to use Serif in our content body because it guides the horizontal flow of the eyes. And Sans Serif? As we all know, headlines are very important and we need it to catch the readers attention. That’s why Sans Serif is the best choice for headlines. Using Sans Serif as font for headlines helps the headlines pop out from the whole article.”
The reason I skipped the rest? You’re using serif in your headlines and sans serif for the content. If you don’t practice what you preach it just doesn’t seem so credible ; )
Monday, February 7th, 2011 10:56
@Andre well, it only shows I haven’t followed those suggestions myself, which is actually my mistake since I designed a theme. Point taken, critique accepted, will work on finding good looking Sans Serif headline font :) When I designed theme I just picked fonts I seemed to like and work, I didn’t look at any research back than how sans/sans-serif affects reading.
Monday, February 7th, 2011 00:49
“Another term for this is line height.”
Srsly? Another term for the incorrect term you made up is the correct term?
Go away
Sunday, February 6th, 2011 02:49
That fonts list is way off.. no Windows computer comes with Geneva, Helvetica or Lucida Grande; Book Antiqua was for Windows 98. And no Mac comes with Lucida Sans Unicode or Tahoma.
Saturday, February 5th, 2011 17:49
Don’t forget about Google Font Directory! http://code.google.com/webfonts
Saturday, February 5th, 2011 23:58
“As we all know, headlines are very important and we need it to catch the readers attention. That’s why Sans Serif is the best choice for headlines. Using Sans Serif as font for headlines helps the headlines pop out from the whole article.
Thus, the most popular combination that CNN and BBC use is to use Serif for the article body, but use Sans Serif for the article headline.”
It’s funny that I’ve always noticed the opposite thing. My idea is that an headline have to use Serif and the body of the article Sans Serif. Using a Sans Serif text for the body lets you keep it clean and easy-to-read; serifed text is better for using with headline. –CNN site, for example, uses a sans-serif text for both ones.
Saturday, February 5th, 2011 18:32
Regarding line-height, you should actually use a unitless measure, not em. So instead of line-height: 1.5em you would set line-height: 1.5. (See Eric Meyer’s post: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/).
Essentially, if you use ems for line-height a fixed value is passed on to child elements, not a relative value. The unitless measure, however, is a scaling factor.
Saturday, February 5th, 2011 15:01
I did not know “CSS Type Set “, I liked it. To get fonts I always used dafont.com. It’s good to know different websites to found fonts. Thanks to share.
Saturday, February 5th, 2011 12:13
This is what I’m looking for to prepare for the next theme release (that relates to Typography) on KreativeThemes – Typozine. Thanks Luanne!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Amirul Faisyal
Saturday, February 5th, 2011 12:13
This is what I’m looking for to prepare for the next theme release (that relates to Typography) on KreativeThemes – Typozine. Thanks Luanne!
josh
Monday, February 7th, 2011 00:49
“Another term for this is line height.”
Srsly? Another term for the incorrect term you made up is the correct term?
Go away
André
Monday, February 7th, 2011 00:20
Sorry, but I got this far: “It is very wise to use Serif in our content body because it guides the horizontal flow of the eyes. And Sans Serif? As we all know, headlines are very important and we need it to catch the readers attention. That’s why Sans Serif is the best choice for headlines. Using Sans Serif as font for headlines helps the headlines pop out from the whole article.”
The reason I skipped the rest? You’re using serif in your headlines and sans serif for the content. If you don’t practice what you preach it just doesn’t seem so credible ; )
Dainis Graveris
Monday, February 7th, 2011 10:56
@Andre well, it only shows I haven’t followed those suggestions myself, which is actually my mistake since I designed a theme. Point taken, critique accepted, will work on finding good looking Sans Serif headline font :) When I designed theme I just picked fonts I seemed to like and work, I didn’t look at any research back than how sans/sans-serif affects reading.
Rowan
Sunday, February 6th, 2011 02:49
That fonts list is way off.. no Windows computer comes with Geneva, Helvetica or Lucida Grande; Book Antiqua was for Windows 98. And no Mac comes with Lucida Sans Unicode or Tahoma.
Josh
Saturday, February 5th, 2011 17:49
Don’t forget about Google Font Directory! http://code.google.com/webfonts
David Mejias
Saturday, February 5th, 2011 15:01
I did not know “CSS Type Set “, I liked it. To get fonts I always used dafont.com. It’s good to know different websites to found fonts. Thanks to share.
Tim
Saturday, February 5th, 2011 18:32
Regarding line-height, you should actually use a unitless measure, not em. So instead of line-height: 1.5em you would set line-height: 1.5. (See Eric Meyer’s post: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/).
Essentially, if you use ems for line-height a fixed value is passed on to child elements, not a relative value. The unitless measure, however, is a scaling factor.
G369
Saturday, February 5th, 2011 23:58
Thus, the most popular combination that CNN and BBC use is to use Serif for the article body, but use Sans Serif for the article headline.”
It’s funny that I’ve always noticed the opposite thing. My idea is that an headline have to use Serif and the body of the article Sans Serif. Using a Sans Serif text for the body lets you keep it clean and easy-to-read; serifed text is better for using with headline. –CNN site, for example, uses a sans-serif text for both ones.
Raghav
Monday, February 7th, 2011 10:53
great good sharing…
:)
Benjamin
Sunday, February 20th, 2011 06:15
I like the advice on sans serif for titles and serif for body. I hadn’t considered serif “guiding the eyes” before, I guess that’s why most books use it!
Michael Francis
Thursday, May 26th, 2011 20:01
I’ve been told that Serif should be used for print work, and sans serif should be used online. I believe sans serif is definitely easier to read on a monitor, and I tend to stay away from serif in both online headlines as well as online content.
Warren
Sunday, March 11th, 2012 18:00
I love really good typography in web design. Choice of typography can make or break a website in my opinion – from a design point of view.
Elaine
Tuesday, February 15th, 2011 23:34
Fantastic article and links. Thank you for sharing!
Ravikumar V.
Tuesday, February 8th, 2011 15:38
I ♥ Typography
rafael armstrong
Monday, February 7th, 2011 20:23
To piggyback a bit on Rowan’s comment regarding fonts– I would add Verdana to the sans serif list.
jcubic
Tuesday, February 8th, 2011 06:09
Check this two tools:
http://modularscale.com/
http://lamb.cc/typograph/
Dainis Graveris
Tuesday, February 8th, 2011 09:29
wow, nice share man! interesting tools! Thanks!