How to Safely Match Web Design and Typography

Posted in Typography, Web Design • Posted on 18 Comments

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.

Marriage of Typography and Web Design: Why is Typography Important?

Marriage-of-typography-and-

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?

1.  People immediately look at the text of your web design.

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.

2. 90% of your web design is typography.

If we master that 90 %, which is typography, we can already say that our web design is a huge success.

3. If you do not give importance to typography, you won’t reach your readers.

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.

The Golden Rule: In Search of A Perfect Font

Golde-font

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.

Differences between Serif and Sans Serif fonts

Sans-serif

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.

Sans Serif

  • Arial
  • Geneva
  • Helvetica
  • Lucida Grande
  • Lucida Sans Unicode
  • Tahoma

Serif

  • Book Antiqua
  • Georgia
  • Palatino
  • Palatino Linotype
  • Times New Roman

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.

Spacing Between Lines of Text

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.

Limit Your Typefaces

Typeface

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

Tools for Web Designers

Tools

The following tools can help beginners (and experts) with their web design and typography.

1. I Love Typography

This is perhaps one of the coolest typography blogs on the planet.

Ilovetypography

2. CSS Type Set

Enter the text you want to modify, test its readability, and see how it will look like in any style you set.

Csstypeset

3. SenCSs

Pronounced as “sense”, this tool allows you to actually focus on developing your website’s style.

Sencss

4. dafont

This is a beautiful collection of fonts, free to download.

Dafont

5. flipping typical

Try out different text and see how it will look like on various web safe fonts.

Flippingtypical

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.

5 Written Articles

18 Comments Best Comments First
  • Amirul Faisyal

    Saturday, February 5th, 2011 12:13

    1

    This is what I’m looking for to prepare for the next theme release (that relates to Typography) on KreativeThemes – Typozine. Thanks Luanne!

    0
  • josh

    Monday, February 7th, 2011 00:49

    7

    “Another term for this is line height.”

    Srsly? Another term for the incorrect term you made up is the correct term?

    Go away

    0
  • André

    Monday, February 7th, 2011 00:20

    8

    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 ; )

    0
    • Dainis Graveris

      Monday, February 7th, 2011 10:56

      10

      @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.

      0
  • Rowan

    Sunday, February 6th, 2011 02:49

    6

    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.

    0
  • Tim

    Saturday, February 5th, 2011 18:32

    5

    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: .

    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.

    0
  • David Mejias

    Saturday, February 5th, 2011 15:01

    2

    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.

    0
  • G369

    Saturday, February 5th, 2011 23:58

    3

    “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.

    0
  • Josh

    Saturday, February 5th, 2011 17:49

    4

    Don’t forget about Google Font Directory!

    0
  • Raghav

    Monday, February 7th, 2011 10:53

    9

    great good sharing…

    :)

    0
  • Benjamin

    Sunday, February 20th, 2011 06:15

    16

    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!

    0
  • Michael Francis

    Thursday, May 26th, 2011 20:01

    17

    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.

    0
  • Warren

    Sunday, March 11th, 2012 18:00

    18

    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.

    0
  • Elaine

    Tuesday, February 15th, 2011 23:34

    15

    Fantastic article and links. Thank you for sharing!

    0
  • Ravikumar V.

    Tuesday, February 8th, 2011 15:38

    14

    I ♥ Typography

    0
  • rafael armstrong

    Monday, February 7th, 2011 20:23

    11

    To piggyback a bit on Rowan’s comment regarding fonts– I would add Verdana to the sans serif list.

    0
  • jcubic

    Tuesday, February 8th, 2011 06:09

    13
    0
    • Dainis Graveris

      Tuesday, February 8th, 2011 09:29

      12

      wow, nice share man! interesting tools! Thanks!

      0
  • Warren

    Sunday, March 11th, 2012 18:00

    18

    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.

    0
  • Michael Francis

    Thursday, May 26th, 2011 20:01

    17

    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.

    0
  • Benjamin

    Sunday, February 20th, 2011 06:15

    16

    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!

    0
  • Elaine

    Tuesday, February 15th, 2011 23:34

    15

    Fantastic article and links. Thank you for sharing!

    0
  • Ravikumar V.

    Tuesday, February 8th, 2011 15:38

    14

    I ♥ Typography

    0
  • jcubic

    Tuesday, February 8th, 2011 06:09

    13
    0
    • Dainis Graveris

      Tuesday, February 8th, 2011 09:29

      12

      wow, nice share man! interesting tools! Thanks!

      0
  • rafael armstrong

    Monday, February 7th, 2011 20:23

    11

    To piggyback a bit on Rowan’s comment regarding fonts– I would add Verdana to the sans serif list.

    0
  • Raghav

    Monday, February 7th, 2011 10:53

    9

    great good sharing…

    :)

    0
  • André

    Monday, February 7th, 2011 00:20

    8

    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 ; )

    0
    • Dainis Graveris

      Monday, February 7th, 2011 10:56

      10

      @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.

      0
  • josh

    Monday, February 7th, 2011 00:49

    7

    “Another term for this is line height.”

    Srsly? Another term for the incorrect term you made up is the correct term?

    Go away

    0
  • Rowan

    Sunday, February 6th, 2011 02:49

    6

    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.

    0
  • Tim

    Saturday, February 5th, 2011 18:32

    5

    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: .

    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.

    0
  • Josh

    Saturday, February 5th, 2011 17:49

    4

    Don’t forget about Google Font Directory!

    0
  • G369

    Saturday, February 5th, 2011 23:58

    3

    “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.

    0
  • David Mejias

    Saturday, February 5th, 2011 15:01

    2

    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.

    0
  • Amirul Faisyal

    Saturday, February 5th, 2011 12:13

    1

    This is what I’m looking for to prepare for the next theme release (that relates to Typography) on KreativeThemes – Typozine. Thanks Luanne!

    0

Comments are closed.

54.196.159.11 - unknown - unknown - US