Awesome Tips for Designing Perfect Web Typography

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.

Jake Rocheleau

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

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Saeed Neamati says

    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.

  2. Rejser says

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

  3. Hegn says

    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!

  4. Stan says

    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.

  5. Kattie says

    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.

  6. Norman says

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

  7. Jarold says

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

  8. Butterfly says

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

    • Peter says

      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.

  9. Anthony says

    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.

  10. Kellerman says

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

  11. Walter says

    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.

  12. Kathie says

    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.

  13. George says

    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.

  14. zante wedding says

    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

  15. gaspari says

    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.

  16. Dan says

    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.

  17. says

    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.

  18. Larry says

    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…

  19. Chad says

    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.

  20. Chen says

    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.

  21. Lisa says

    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.

  22. Lisa says

    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.

  23. Shrikrishna Meena says

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

  24. Rahul @ MazaKaro says

    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 !! :)