{"id":33855,"date":"2020-12-07T05:04:32","date_gmt":"2020-12-07T13:04:32","guid":{"rendered":"https:\/\/sacramentowebdesigngroup.com\/?p=33855"},"modified":"2026-02-25T22:11:30","modified_gmt":"2026-02-26T06:11:30","slug":"web-typography-rules-what-you-need-to-know","status":"publish","type":"post","link":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/web-typography-rules-what-you-need-to-know\/","title":{"rendered":"Web Typography Rules: What You Need to Know"},"content":{"rendered":"

90% of all the information on the web is in writing. That means that typography is a skill that dictates that 90%. That\u2019s a staggering figure that highlights just how important typography is.<\/p>\n

It\u2019s absolutely everywhere: blog posts, social media, magazines, reports, books, and so much more.<\/p>\n

What this means for you as a designer is that text is your primary means of communication. If you haven\u2019t got your typography skills down, then you\u2019re not going to be able to deliver your ideas to your audience.<\/p>\n

Luckily for you, we\u2019ve got a list of useful tips and rules that you can follow to avoid that happening. Even if you\u2019re not the best at typography, follow the information that we\u2019ve laid out here, and you\u2019re going to be fine.<\/p>\n

Pick an Industry Standard Font<\/h2>\n

There are a ludicrous number of fonts to choose from when designing your web typography<\/a>. Some of these fonts are much better than others, though, so make sure you do your research and pick one that\u2019s proven to get results.<\/p>\n

There\u2019s nothing worse than looking at an unreadable squiggly mess on a page, so put some thought into what font you\u2019re using.<\/p>\n

Use a Large Front Size<\/h2>\n

Back in the day, tiny font sizes used to be all the rage. That might be passible on massive blocky monitors, but people are using phones and tablets to browse the web these days.<\/p>\n

You need to make sure that those users can read your content, so pick a big font that\u2019s easily visible as soon as you glance at it.<\/p>\n

We\u2019ve found that 15 \u2013 25 px yields the best retention rates, but so long as it\u2019s legible and nice to look at, you shouldn\u2019t have a problem.<\/p>\n

Make Your Headings Proportionate<\/h2>\n

Headings are the signposts of your web typography. It helps the user navigate the page and highlights what information might be important to them.<\/p>\n

It\u2019s vital that your headings stand out, so make sure that you\u2019re using at least a 180% increase in size when compared to your body text.<\/p>\n

Line Spacing<\/h2>\n

There\u2019s nothing more frustrating than trying to read a block of text that has awful line spacing. Not only does it turn the reading into a chore, but it can be incredibly hard to follow.<\/p>\n

That\u2019s why you\u2019re going to set your line spacing appropriately. 120 \u2013 145% percent of the overall point size should do it.<\/p>\n

Tracking and Kerning<\/h2>\n

Adding tracking and kerning to your text is going to help it look neater and roomier. What this does is adjust the spacing between letters proportional to the size of the text. The space between the words of a heading versus lines of text isn\u2019t going to be the same.<\/p>\n

This can help to keep everything separate for your user, making it easier to navigate through the information.<\/p>\n

Don\u2019t Forget Whitespace<\/h2>\n
<\/div>\n

Whitespace is a vital part of web design as a whole, and that includes typography. You need to have some decent whitespace in between your headings and your paragraphs. If you don\u2019t, then the whole thing is going to become a cluster of information, which is exactly what you\u2019re trying to avoid.<\/p>\n

Your user\u2019s eyes need places to rest. This doesn\u2019t just go for on the page, but when they read, too. If you don\u2019t have whitespace, they get fatigued. When they get fatigued, they stop reading.<\/p>\n

This is the exact opposite of what you\u2019re trying to achieve, so make sure you\u2019re obeying this web typography rule at all times.<\/p>\n

Limit Your Line Length<\/h2>\n

Limiting your line length is an industry-standard practice for a reason. If you\u2019re not doing it, then your page is going to suffer when it comes to professionalism.<\/p>\n

45 \u2013 90 characters is a good-sized line length to take that also leaves a lot of room for your personal preference.<\/p>\n

One factor you might want to consider when choosing your line length is what device you expect your clients to be using. There\u2019s a clear difference in device usage across services here, and you can get away with longer line lengths with users visiting from bigger machines.<\/p>\n

Choose and Stick to One Typeface<\/h2>\n
<\/div>\n

Serifs and sans-serifs. Both of these typefaces have advantages and disadvantages, but you should only be using one.<\/p>\n

Determine what your target audience or client is looking for and use that information to influence your decision.<\/p>\n

This is completely separate from your font selection, bear in mind. The typeface is a stylistic family of fonts that fall within it.<\/p>\n

That being said, you should determine your typeface before your font, and not the other way around.<\/p>\n

Structure and Hierarchy<\/h2>\n

If you don\u2019t have a hierarchy, you descend into chaos and pandemonium. This is as true for typography as it is for life.<\/p>\n

We\u2019re not just talking about your H1, H2, H3, and P HTML tags here, but the way in which you present your information, as well.<\/p>\n

If you have quotes, links, lists, or anything in between, make sure that it all follows a uniform structure.<\/p>\n

If you\u2019re doing a listing page, then you don\u2019t want the links to a resource being halfway through one entry, at the bottom of another, and the top of another.<\/p>\n

Further Your Web Typography Education<\/h2>\n

Web typography is a discipline that cannot be learned in a day. It takes constant practice and exercise to develop your skills, and that\u2019s only one part of the equation.<\/p>\n

The industry standard is constantly evolving and changing, meaning that you need to keep up to date with all of those changes.<\/p>\n

Keep yourself plugged in and make use of all the practice and educational resources you can find.<\/p>\n

Conclusion<\/h2>\n

Web typography is an overwhelming discipline that can take its toll on even the most seasoned designer. It\u2019s like a muscle, though, and the more you use it, the stronger you\u2019re going to be.<\/p>\n

It\u2019s, unfortunately, a massive part of web design, meaning it\u2019s completely unavoidable. You\u2019re going to have to tackle it at some point; we just hope that our tips help you when you get there.<\/p>\n","protected":false},"excerpt":{"rendered":"

90% of all the information on the web is in writing. That means that typography is a skill that dictates that 90%. That\u2019s a staggering figure that highlights just how important typography is. It\u2019s absolutely everywhere: blog posts, social media, magazines, reports, books, and so much more. What this means for you as a designer […]<\/p>\n","protected":false},"author":1,"featured_media":33857,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"categories":[16,18,25,24],"tags":[17],"class_list":["post-33855","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content-curation","category-reputation-management","category-social-media-marketing","category-web-design","tag-html"],"_links":{"self":[{"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/posts\/33855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/comments?post=33855"}],"version-history":[{"count":1,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/posts\/33855\/revisions"}],"predecessor-version":[{"id":72259,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/posts\/33855\/revisions\/72259"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/media?parent=33855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/categories?post=33855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/tags?post=33855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}