Awesome Tips for Designing Perfect Web Typography

Posted in Web Design4 years ago • Written by 26 Comments

When it comes to web design it seems typography is the one area often left out of the loop. This is ironic in a sense as typography is what truly powers the web. What are websites without any content, after all?

As the web has advanced we have seen trends in web design rise and fall. Today I’ll be going over some of the most common typography tips for designers and how you can apply these to your current web projects.

Keep in mind these are only tips as I’ve seen showcased throughout the web. As layouts change from site to site you’ll notice there is no single rule for designing awesome type. Implement your own concepts to develop the perfect web typography in any setting!

What Makes Digital Typography Different?

You may question why we even need to consider digital type. What makes web copy so different from newspapers or books? The main consideration is the media from which you’re reading – a computer.

Staring at a dimly-lit computer screen and reading letters off a page gives a completely different feeling than picking up letters off pages in a book or magazine. It is also much easier to access content through the Internet where books are physical objects. This is a huge constraint when comparing the two areas considering you have access to hundreds of millions of articles just through Google alone.

Digital type also isn’t just for desktops anymore. Netbooks have become very popular for reading blogs online and mobile devices are seeing rampant growth. This new technologically powered era is a testament to what humans can build with a bit of hard work and determination, especially considering how quickly we’re advancing.

These facts alone should show you just how different digital type is. This ushers in an entirely new set of rules and regulations for type backed through a screen. And as our views on design grow so will our extension of copy.

Spacing and Padding and Margins, oh my!

When talking about digital text it may seem a bit backwards to start with spacing, however this is a key element in content readability. The amount of space you place between your website’s elements dictates how quickly your reader’s eyes can dart from section to section.

10 years ago you’d be hard pressed to push beliefs that extra spacing can help. Most websites were running 10px Arial font squished together paragraph after paragraph streaming down the page. Setting a strong value for your line-height will give your paragraphs (and your visitors) room to actually breathe.

You’ll also want to ensure there is enough margin spacing set after each paragraph. Distinctive spacing within text blocks can help align your reader’s eyes with the content flow on the page. Anywhere from 15px-25px is perfect for a bottom margin set on all your paragraphs and even a few headings.

Bigger Font is Simpler

You may have noticed by now that most websites and blogs today are not working with 10px or 11px Arial anymore. Serif v sans-serif fonts are irrelevant in the larger scheme of things. Focus is driven towards the size and clarity of the type rather than the type face.

Giving your font extra space helps on many fronts. It allows visitors from mobile devices a fighting chance to actually comprehend and understand your content. It also gives them a sense of accomplishment by barreling through 10-12 paragraphs of largely-typed font.

As humans we thrive for completion of goals and objectives. This is what makes video games so fun! Opening up an article online and reading through all of it can create a huge sense of accomplishment into many people – placement of larger fonts greatly helps with this feeling.

This is not a waste of space, this will not take up “too much” room or cramp your site’s design. Quite the contrary. Larger fonts will actually fill in open areas in your design and spread your content around. Your site will actually seem larger than it really is since the backbone of your entire layout (the content) is filling up most of the room.

Use the Right Styles for the Job

There are only a few typographic elements most designers will concern themselves with. These include paragraphs and heading elements, also blockquotes and hyperlink designs. When starting your stylesheet keep markers for all of the typographic elements you’ll need.

h1-h6 may be a bit much if you don’t need to have so many detailed areas. Personally I will develop styles for h1-h4 and add on extra if I need the other two. Keep in mind how your page headings will separate large areas of content and outline what you’re talking about.

Many visitors will actually skim your page content rather than keep up with every word. This is why unique styles for headings are so helpful. You can give your visitors some useful information by breaking up your page with not only large, distinct styles but extra spacing as well.

Most of these tips will fit well into any type of design. Elements of type generally stick by the same rules throughout all forms of web design (which makes them easy to work with).

Consider playing around on other websites to see what other developers set for typographic styles. The current age of web design is an exciting one and new design trends are popping up every week. As a result many changes will take place in design standards but it will always hold true that proper typography can never go out of style.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

2 Written ArticlesWebsite

Jake Rocheleau is a social media entrepreneur, Twitter addict, and passionate digital artist. He can be found everywhere on the social web! You can learn more and follow his updates on Twitter @jakerocheleau

26 Comments Best Comments First
  • Rahul @ MazaKaro

    Friday, October 22nd, 2010 00:09

    1

    i see all what you were talking about is very important since the way we see depends later on how long we will stay in a certain blog or site ! design is a business now since web-sites look for better !!!!!
    thank you for sharing !! :)

    0
  • gmat prep

    Friday, August 12th, 2011 16:25

    9

    I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy.

    0
  • Dan

    Thursday, September 29th, 2011 14:31

    10

    I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy.

    0
  • gaspari

    Sunday, October 2nd, 2011 10:55

    11

    I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy.

    0
  • zante wedding

    Friday, October 7th, 2011 19:42

    12

    I’ve been looking around for articles similar to this but never found one that actually was valuable such as this. Glad I found this place

    0
  • Larry

    Wednesday, August 3rd, 2011 06:18

    8

    Fantastic site, where did you come up with the info in this piece of content? Im pleased I found it though, ill be checking back soon…

    0
  • Chad

    Friday, July 22nd, 2011 12:39

    7

    I’m going to test that out for sure! Thanks for the tips.i see all what you were talking about is very important since the way we see depends later on how long we will stay in a certain blog or site ! design is a business now since web-sites look for better.

    0
  • Shrikrishna Meena

    Monday, October 25th, 2010 16:04

    2

    Read whole article and liked the last image used.

    0
  • Shrikrishna Meena

    Wednesday, October 27th, 2010 14:37

    3

    Well, When I was Modifying My new template today, Then I actually faced the use of Typography in web-designing (and made me to think about this article),
    Really Typography is an essential part of web-design… and as you mentioned it’s helpful in filling up blank space and also in attracting reader’s attention.
    Thanks for this article… (Atleast for showing me, what is this “typography” thing is about).

    0
  • Lisa

    Thursday, December 9th, 2010 05:34

    4

    Jake:

    This was great for me! I recently switched up the font in my posts, but one thing I never considered before was using different fonts for my sub headings. I’m going to test that out for sure! Thanks for the tips.

    0
  • Chen

    Wednesday, July 20th, 2011 10:24

    6

    This was great for me! I recently switched up the font in my posts, but one thing I never considered before was using different fonts for my sub headings. I’m going to test that out for sure! Thanks for the tips.

    0
  • Lisa

    Thursday, December 9th, 2010 05:34

    4

    Jake:

    This was great for me! I recently switched up the font in my posts, but one thing I never considered before was using different fonts for my sub headings. I’m going to test that out for sure! Thanks for the tips.

    0
  • George

    Sunday, October 9th, 2011 09:34

    13

    Well written write-up. Glad I’m able to locate a site with some knowledge plus a great writing style. You keep publishing and i will continue to keep browsing.

    0
  • Kathie

    Friday, October 21st, 2011 07:13

    14

    he amount of mobile devices being used to access the web is increasing day by day. This is good because the mobile market is a whole new segment your site can be getting traffic from, but the bad news is that mobile devices have many specifics.

    0
  • Kattie

    Tuesday, December 6th, 2011 18:57

    22

    It is an honor to have the opportunity to participate in the discussion of this excellent blog site! I wish to extend my thanks for that.

    0
  • Stan

    Tuesday, December 20th, 2011 13:15

    23

    Happy to see your blog as it is just what I’ve looking for and excited to read all the posts. I am looking forward to another great article from you. After skimming through your website.

    0
  • Hegn

    Sunday, December 25th, 2011 21:03

    24

    Thank you for taking the time to publish this
    information very useful!I’m still waiting for some interesting thoughts
    from your side in your next post thanks!

    0
  • Saeed Neamati

    Thursday, February 9th, 2012 08:41

    26

    line-height and sans-serif fonts are two of the most important factors I found in readable websites. For header, serif fonts work just fine, but for content, nope.

    I read this article till the end, hoping that you introduce at least 10 magnificent fonts, but got disappointed :D.

    0
  • Rejser

    Thursday, January 19th, 2012 21:51

    25

    Thanks for providing such useful information. I really appreciate your professional approach .

    0
  • Norman

    Tuesday, December 6th, 2011 12:36

    21

    I am excited to keep track the thing that I used to do. thanks for sharing. impressive page indeed.

    0
  • Jarold

    Thursday, December 1st, 2011 05:47

    20

    It is very true, i even use my ipad for reading books that I buy online or from amazon.

    0
  • Walter

    Tuesday, October 25th, 2011 07:04

    15

    I recently switched up the font in my posts, but one thing I never considered before was using different fonts for my sub headings. I’m going to test that out for sure! Thanks for the tips.

    0
  • Kellerman

    Friday, October 28th, 2011 06:01

    16

    Then I actually faced the use of Typography in web-designing (and made me to think about this article…..

    0
  • Anthony

    Tuesday, November 15th, 2011 19:07

    17

    Become a Bump Rewards member to take advantage of special promotions and savings offered by participating Bump advertisers. Plus, receive invites to grand openings and mom-to-be events near you.

    0
  • Butterfly

    Wednesday, November 16th, 2011 16:21

    18

    Well, this post is quite good!Thanks for updating my information about the subject.it very useful for me .

    0
    • Peter

      Monday, November 28th, 2011 15:02

      19

      This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.

      0
  • Saeed Neamati

    Thursday, February 9th, 2012 08:41

    26

    line-height and sans-serif fonts are two of the most important factors I found in readable websites. For header, serif fonts work just fine, but for content, nope.

    I read this article till the end, hoping that you introduce at least 10 magnificent fonts, but got disappointed :D.

    0
  • Rejser

    Thursday, January 19th, 2012 21:51

    25

    Thanks for providing such useful information. I really appreciate your professional approach .

    0
  • Hegn

    Sunday, December 25th, 2011 21:03

    24

    Thank you for taking the time to publish this
    information very useful!I’m still waiting for some interesting thoughts
    from your side in your next post thanks!

    0
  • Stan

    Tuesday, December 20th, 2011 13:15

    23

    Happy to see your blog as it is just what I’ve looking for and excited to read all the posts. I am looking forward to another great article from you. After skimming through your website.

    0
  • Kattie

    Tuesday, December 6th, 2011 18:57

    22

    It is an honor to have the opportunity to participate in the discussion of this excellent blog site! I wish to extend my thanks for that.

    0
  • Norman

    Tuesday, December 6th, 2011 12:36

    21

    I am excited to keep track the thing that I used to do. thanks for sharing. impressive page indeed.

    0
  • Jarold

    Thursday, December 1st, 2011 05:47

    20

    It is very true, i even use my ipad for reading books that I buy online or from amazon.

    0
  • Butterfly

    Wednesday, November 16th, 2011 16:21

    18

    Well, this post is quite good!Thanks for updating my information about the subject.it very useful for me .

    0
    • Peter

      Monday, November 28th, 2011 15:02

      19

      This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.

      0
  • Anthony

    Tuesday, November 15th, 2011 19:07

    17

    Become a Bump Rewards member to take advantage of special promotions and savings offered by participating Bump advertisers. Plus, receive invites to grand openings and mom-to-be events near you.

    0
  • Kellerman

    Friday, October 28th, 2011 06:01

    16

    Then I actually faced the use of Typography in web-designing (and made me to think about this article…..

    0
  • Walter

    Tuesday, October 25th, 2011 07:04

    15

    I recently switched up the font in my posts, but one thing I never considered before was using different fonts for my sub headings. I’m going to test that out for sure! Thanks for the tips.

    0
  • Kathie

    Friday, October 21st, 2011 07:13

    14

    he amount of mobile devices being used to access the web is increasing day by day. This is good because the mobile market is a whole new segment your site can be getting traffic from, but the bad news is that mobile devices have many specifics.

    0
  • George

    Sunday, October 9th, 2011 09:34

    13

    Well written write-up. Glad I’m able to locate a site with some knowledge plus a great writing style. You keep publishing and i will continue to keep browsing.

    0
  • zante wedding

    Friday, October 7th, 2011 19:42

    12

    I’ve been looking around for articles similar to this but never found one that actually was valuable such as this. Glad I found this place

    0
  • gaspari

    Sunday, October 2nd, 2011 10:55

    11

    I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy.

    0
  • Dan

    Thursday, September 29th, 2011 14:31

    10

    I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy.

    0
  • gmat prep

    Friday, August 12th, 2011 16:25

    9

    I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy.

    0
  • Larry

    Wednesday, August 3rd, 2011 06:18

    8

    Fantastic site, where did you come up with the info in this piece of content? Im pleased I found it though, ill be checking back soon…

    0
  • Chad

    Friday, July 22nd, 2011 12:39

    7

    I’m going to test that out for sure! Thanks for the tips.i see all what you were talking about is very important since the way we see depends later on how long we will stay in a certain blog or site ! design is a business now since web-sites look for better.

    0
  • Chen

    Wednesday, July 20th, 2011 10:24

    6

    This was great for me! I recently switched up the font in my posts, but one thing I never considered before was using different fonts for my sub headings. I’m going to test that out for sure! Thanks for the tips.

    0
  • Lisa

    Thursday, December 9th, 2010 05:34

    4

    Jake:

    This was great for me! I recently switched up the font in my posts, but one thing I never considered before was using different fonts for my sub headings. I’m going to test that out for sure! Thanks for the tips.

    0
  • Lisa

    Thursday, December 9th, 2010 05:34

    4

    Jake:

    This was great for me! I recently switched up the font in my posts, but one thing I never considered before was using different fonts for my sub headings. I’m going to test that out for sure! Thanks for the tips.

    0
  • Shrikrishna Meena

    Wednesday, October 27th, 2010 14:37

    3

    Well, When I was Modifying My new template today, Then I actually faced the use of Typography in web-designing (and made me to think about this article),
    Really Typography is an essential part of web-design… and as you mentioned it’s helpful in filling up blank space and also in attracting reader’s attention.
    Thanks for this article… (Atleast for showing me, what is this “typography” thing is about).

    0
  • Shrikrishna Meena

    Monday, October 25th, 2010 16:04

    2

    Read whole article and liked the last image used.

    0
  • Rahul @ MazaKaro

    Friday, October 22nd, 2010 00:09

    1

    i see all what you were talking about is very important since the way we see depends later on how long we will stay in a certain blog or site ! design is a business now since web-sites look for better !!!!!
    thank you for sharing !! :)

    0

Comments are closed.

54.243.23.129 - unknown - unknown - US