{"id":13764,"date":"2022-09-06T08:00:53","date_gmt":"2022-09-06T13:00:53","guid":{"rendered":"https:\/\/www.webii.net\/blog\/?p=13764"},"modified":"2022-11-28T11:36:07","modified_gmt":"2022-11-28T17:36:07","slug":"design-a-readable-website-rules-of-typography","status":"publish","type":"post","link":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/","title":{"rendered":"How to Design a Readable Website with the Rules of Typography"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">We read digital content all the time. It\u2019s on our phones when we scroll through Twitter, it\u2019s on our computers as we read through blog posts, and it\u2019s on our tablets when we check out an e-book. Our reading also happens on graphics, where the words are surrounded by colorful visuals. While we enjoy consuming all of the above, we may not even stop to think about how much thought has gone into the typography. It\u2019s so much more than just picking out a <\/span><a href=\"https:\/\/www.webii.net\/blog\/2018\/05\/font-tips-for-more-appealing-web-development\/\"><span style=\"font-weight: 400;\">nice-looking font<\/span><\/a><span style=\"font-weight: 400;\">. We are going to cover some major <\/span><span style=\"font-weight: 400;\">rules of typography<\/span><span style=\"font-weight: 400;\"> so that you can make the best web content possible.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Infographic: <\/span><span style=\"font-weight: 400;\">Rules of Typography<\/span><span style=\"font-weight: 400;\"> Terminology<\/span><\/h2>\n<div id=\"attachment_13767\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-13767\" class=\"wp-image-13767 size-full lazyload\" data-src=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Terms-You-Need-to-Know.jpg\" alt=\"Typography Terms You Need to Know\" width=\"800\" height=\"2000\" data-srcset=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Terms-You-Need-to-Know.jpg 800w, https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Terms-You-Need-to-Know-120x300.jpg 120w, https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Terms-You-Need-to-Know-410x1024.jpg 410w, https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Terms-You-Need-to-Know-768x1920.jpg 768w, https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Terms-You-Need-to-Know-614x1536.jpg 614w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/2000;\" \/><p id=\"caption-attachment-13767\" class=\"wp-caption-text\"><em>Infographic resources from Canva.com and Megan Marshall<\/em><\/p><\/div>\n<ul>\n<li><b>X-height:<\/b><span style=\"font-weight: 400;\"> The height of a lowercase x, which represents the main body of the other lowercase letters in a line.<\/span><\/li>\n<li><b>Ascender:<\/b><span style=\"font-weight: 400;\"> The upward stroke in lowercase letters that goes beyond the x-height, including b, d, f, k, l, and t.<\/span><\/li>\n<li><b>Descender:<\/b><span style=\"font-weight: 400;\"> The downward stroke in lowercase letters that goes beyond the x-height, including g, j, p, q, and y.<\/span><\/li>\n<li><b>Baseline:<\/b><span style=\"font-weight: 400;\"> An imaginary line that a line of text rests on, with ascenders and descenders over or below it, respectively.<\/span><\/li>\n<li><b>Leading:<\/b><span style=\"font-weight: 400;\"> The way that you adjust the vertical spacing between multiple lines of text, measuring from baseline to baseline.<\/span><\/li>\n<li><b>Kerning:<\/b><span style=\"font-weight: 400;\"> The way that you adjust the horizontal spacing between two individual letters.<\/span><\/li>\n<li><b>Tracking:<\/b><span style=\"font-weight: 400;\"> The way that you adjust the horizontal spacing between letters to make them even across the word.<\/span><\/li>\n<li><b>Small caps:<\/b><span style=\"font-weight: 400;\"> Uppercase letterforms that are shorter than the capital letters, either in the same size as or slightly taller than the lowercase letters.<\/span><\/li>\n<li><b>Font family:<\/b><span style=\"font-weight: 400;\"> A set of fonts with common design characteristics, despite having different sizes, weights, and styles.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">#1: Don\u2019t Use Too Many Fonts<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When it comes to branding, choosing your fonts is a big deal. They can make someone recognize your business immediately. Think about Disney\u2019s signature font, for example. Everyone knows that Waltograph, or Walt Disney Script, belongs to them. So, if you want to be memorable and evoke emotions from your audience through your fonts, you have to figure out which ones <\/span><a href=\"https:\/\/www.webii.net\/blog\/2022\/06\/signature-brand-style-to-stand-out\/\"><span style=\"font-weight: 400;\">best suit your own brand<\/span><\/a><span style=\"font-weight: 400;\">. Keep in mind that mixing typefaces can make your website appear unprofessional. For this reason, a <\/span><span style=\"font-weight: 400;\">rule of typography<\/span><span style=\"font-weight: 400;\"> is to use no more than three. They should be distinguishable from one another and complementary.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">#2: Scale Your Headings Appropriately<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Visual hierarchy clarifies to the reader what information they should be focusing on. In this <\/span><span style=\"font-weight: 400;\">rule of typography<\/span><span style=\"font-weight: 400;\">, it\u2019s all about decreasing visual prominence on your web pages. Your body text should be the smallest. This way, your reader knows that it\u2019s the detailed content that they are going to want to dive into. The largest-sized heading (known as the H1) on the page can be identified as the most important point. This will be between 180% and 200% of the body text size. From there, your secondary heading (the H2) will be between 130% and 150% of the body text size. Minor section headings will shrink accordingly.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">#3: Pick Colors That are Legible<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Color is a critical part of web design. There are millions of them out there to choose from! But not all of them pair well together. An important <\/span><span style=\"font-weight: 400;\">rule of typography<\/span><span style=\"font-weight: 400;\"> is that you need to think about what is going to contrast enough to ensure that your copy is readable. This means being mindful of both your font colors and background colors. Consider using <\/span><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WebAIM\u2019s Contrast Checker<\/span><\/a><span style=\"font-weight: 400;\"> tool to ensure that you have an accessible palette. It shows you whether your normal text, large text, and graphic components would pass a contrast ratio test.<\/span><\/p>\n<h2>Types of Fonts<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-13775 size-full lazyload\" data-src=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Graphic-2.png\" alt=\"Typography Graphic 2\" width=\"640\" height=\"434\" data-srcset=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Graphic-2.png 640w, https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Graphic-2-300x203.png 300w\" data-sizes=\"(max-width: 640px) 100vw, 640px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 640px; --smush-placeholder-aspect-ratio: 640\/434;\" \/><\/p>\n<ul>\n<li>Serif (With Tails)<\/li>\n<li>Sans serif (No Tails)<\/li>\n<li>Script (Handwritten)<\/li>\n<li>Display (Decorative)<\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">#4: Be Aware of Line Spacing<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You may not put too much thought into line spacing, but it can certainly impact the feel of a design. If it\u2019s too small, it will make the text appear crowded. There needs to be enough white space between lines to give them room to breathe. Optimal spacing is between 120% and 145% of the point size. To fulfill this <\/span><span style=\"font-weight: 400;\">rule of typography<\/span><span style=\"font-weight: 400;\">, you need to keep this spacing consistent. Apply your base white space value as a single-direction margin to all of your relevant elements. This is known as vertical rhythm, which creates a visually relaxing experience.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">#5: Your Text Needs to Be Responsive<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Your website isn\u2019t going to look exactly the same on every device. It simply can\u2019t. A <\/span><a href=\"https:\/\/www.webii.net\/mobile-web-design\/\"><span style=\"font-weight: 400;\">smartphone screen<\/span><\/a><span style=\"font-weight: 400;\"> is a much different size than a desktop computer. So, your web pages are going to be condensed to fit the area. Whenever you add copy to a page, and before you publish it, you need to test that page across device types. By doing this, you will see if some words go off the page or outside of a box. A professional web developer can execute this <\/span><span style=\"font-weight: 400;\">rule of typography<\/span><span style=\"font-weight: 400;\"> through responsive modular scaling.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">#6: Stray Away from Writing in All Caps<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You don\u2019t have to use capital letters to get your point across in a piece of text. The reader may interpret that as you shouting at them, which has the potential to be offputting. Of course, there is a time and a place for it. Maybe your headings are consistently all in caps, for instance. But, according to the <\/span><span style=\"font-weight: 400;\">rules of typography<\/span><span style=\"font-weight: 400;\">, the body copy of your web pages isn\u2019t one of those places. Instead, you could emphasize text by bolding or italicizing certain words. Or, if you are committed to using caps, use them for only short strings of words, not for full-length sentences.<\/span><\/p>\n<hr \/>\n<h3 style=\"text-align: center;\"><strong><em>When professionals are exploring <a href=\"https:\/\/www.designrush.com\/agency\/website-design-development\/trends\/how-to-sell-web-design-services\" target=\"_blank\" rel=\"noopener\">how to sell web design services<\/a>, they focus on the functionality of a website. But a reliable web designer will dig deeper to help clients achieve their business goals by making every aspect of a site pleasing to the eye.<\/em><\/strong><\/h3>\n<hr \/>\n<h2>\u00a0<span style=\"font-weight: 400;\">#7: Limit the Length of Each Line<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Having a huge wall of text doesn\u2019t do anyone favors. It can actually make a sizeable amount of your site\u2019s visitors bounce. After all, the attention span of humans is dwindling. In 2000, it was clocked at an <\/span><a href=\"https:\/\/www.wyzowl.com\/human-attention-span\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">average of 12 seconds<\/span><\/a><span style=\"font-weight: 400;\">. But as of 15 years later, it was down to 8.25 years. For that reason, a <\/span><span style=\"font-weight: 400;\">rule of typography<\/span><span style=\"font-weight: 400;\"> is finding the sweet spot of the amount of text on a line. Web designers agree that this is about 60 characters. By the time you get up to 90 characters per line, that\u2019s when your readers will start feeling especially overwhelmed.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">WEBii has been designing websites for over two decades. With clients spanning from e-commerce gift shops to engineering solutions to cookie-baking companies, there is no doubt that your business will fit right in the mix. <\/span><a href=\"https:\/\/www.webii.net\/contact-us\/\"><span style=\"font-weight: 400;\">Get in touch<\/span><\/a><span style=\"font-weight: 400;\"> with the team for great custom web design work. Let us use our knowledge of the <\/span><span style=\"font-weight: 400;\">rules of typography<\/span><span style=\"font-weight: 400;\"> to make your site even more attractive.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We read digital content all the time. It\u2019s on our phones when we scroll through Twitter, it\u2019s on our computers as we read through blog posts, and it\u2019s on our tablets when we check out an e-book. Our reading also happens on graphics, where the words are surrounded by colorful visuals. While we enjoy consuming [&hellip;]<\/p>\n","protected":false},"author":40,"featured_media":13766,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[509,3,300],"tags":[],"class_list":["post-13764","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive-web-design","category-web-design","category-www-learning-center"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Design a Readable Website with the Rules of Typography<\/title>\n<meta name=\"description\" content=\"You need to consider these seven major rules of typography as you are building web pages and implementing content into them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design a Readable Website with the Rules of Typography\" \/>\n<meta property=\"og:description\" content=\"You need to consider these seven major rules of typography as you are building web pages and implementing content into them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Marketing &amp; Web Development Company Blog - WEBii\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-06T13:00:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-28T17:36:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Graphic.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"434\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Megan Marshall\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Megan Marshall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/\"},\"author\":{\"name\":\"Megan Marshall\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/person\\\/13e6130fbedfea692719a26e0641fe00\"},\"headline\":\"How to Design a Readable Website with the Rules of Typography\",\"datePublished\":\"2022-09-06T13:00:53+00:00\",\"dateModified\":\"2022-11-28T17:36:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/\"},\"wordCount\":1176,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Typography-Graphic.png\",\"articleSection\":[\"Responsive Web Design\",\"Web Design\",\"WWW Learning Center\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/\",\"name\":\"How to Design a Readable Website with the Rules of Typography\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Typography-Graphic.png\",\"datePublished\":\"2022-09-06T13:00:53+00:00\",\"dateModified\":\"2022-11-28T17:36:07+00:00\",\"description\":\"You need to consider these seven major rules of typography as you are building web pages and implementing content into them.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Typography-Graphic.png\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Typography-Graphic.png\",\"width\":640,\"height\":434,\"caption\":\"Image provided by sketchify via Canva.com\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/design-a-readable-website-rules-of-typography\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WWW Learning Center\",\"item\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/category\\\/www-learning-center\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Design a Readable Website with the Rules of Typography\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\",\"name\":\"Web Marketing &amp; Web Development Company Blog - WEBii\",\"description\":\"web design . web development . seo . marketing . web hosting . + more\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\",\"name\":\"WEBii\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/fb-banner-webii-seo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/fb-banner-webii-seo.jpg\",\"width\":1200,\"height\":598,\"caption\":\"WEBii\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/person\\\/13e6130fbedfea692719a26e0641fe00\",\"name\":\"Megan Marshall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/949\\\/9499f2156bca3e854008e190a0246c96x96.jpg\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/949\\\/9499f2156bca3e854008e190a0246c96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/949\\\/9499f2156bca3e854008e190a0246c96x96.jpg\",\"caption\":\"Megan Marshall\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Design a Readable Website with the Rules of Typography","description":"You need to consider these seven major rules of typography as you are building web pages and implementing content into them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/","og_locale":"en_US","og_type":"article","og_title":"How to Design a Readable Website with the Rules of Typography","og_description":"You need to consider these seven major rules of typography as you are building web pages and implementing content into them.","og_url":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/","og_site_name":"Web Marketing &amp; Web Development Company Blog - WEBii","article_published_time":"2022-09-06T13:00:53+00:00","article_modified_time":"2022-11-28T17:36:07+00:00","og_image":[{"width":640,"height":434,"url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Graphic.png","type":"image\/png"}],"author":"Megan Marshall","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Megan Marshall","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/#article","isPartOf":{"@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/"},"author":{"name":"Megan Marshall","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/person\/13e6130fbedfea692719a26e0641fe00"},"headline":"How to Design a Readable Website with the Rules of Typography","datePublished":"2022-09-06T13:00:53+00:00","dateModified":"2022-11-28T17:36:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/"},"wordCount":1176,"commentCount":0,"publisher":{"@id":"https:\/\/www.webii.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Graphic.png","articleSection":["Responsive Web Design","Web Design","WWW Learning Center"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/","url":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/","name":"How to Design a Readable Website with the Rules of Typography","isPartOf":{"@id":"https:\/\/www.webii.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/#primaryimage"},"image":{"@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Graphic.png","datePublished":"2022-09-06T13:00:53+00:00","dateModified":"2022-11-28T17:36:07+00:00","description":"You need to consider these seven major rules of typography as you are building web pages and implementing content into them.","breadcrumb":{"@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/#primaryimage","url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Graphic.png","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/08\/Typography-Graphic.png","width":640,"height":434,"caption":"Image provided by sketchify via Canva.com"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webii.net\/blog\/design-a-readable-website-rules-of-typography\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webii.net\/blog\/"},{"@type":"ListItem","position":2,"name":"WWW Learning Center","item":"https:\/\/www.webii.net\/blog\/category\/www-learning-center\/"},{"@type":"ListItem","position":3,"name":"How to Design a Readable Website with the Rules of Typography"}]},{"@type":"WebSite","@id":"https:\/\/www.webii.net\/blog\/#website","url":"https:\/\/www.webii.net\/blog\/","name":"Web Marketing &amp; Web Development Company Blog - WEBii","description":"web design . web development . seo . marketing . web hosting . + more","publisher":{"@id":"https:\/\/www.webii.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webii.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webii.net\/blog\/#organization","name":"WEBii","url":"https:\/\/www.webii.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2015\/12\/fb-banner-webii-seo.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2015\/12\/fb-banner-webii-seo.jpg","width":1200,"height":598,"caption":"WEBii"},"image":{"@id":"https:\/\/www.webii.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/person\/13e6130fbedfea692719a26e0641fe00","name":"Megan Marshall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/949\/9499f2156bca3e854008e190a0246c96x96.jpg","url":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/949\/9499f2156bca3e854008e190a0246c96x96.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/949\/9499f2156bca3e854008e190a0246c96x96.jpg","caption":"Megan Marshall"}}]}},"_links":{"self":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts\/13764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/comments?post=13764"}],"version-history":[{"count":0,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts\/13764\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/media\/13766"}],"wp:attachment":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/media?parent=13764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/categories?post=13764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/tags?post=13764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}