{"id":49743,"date":"2013-03-04T20:50:03","date_gmt":"2013-03-04T20:50:03","guid":{"rendered":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/"},"modified":"2024-10-01T14:55:27","modified_gmt":"2024-10-01T20:55:27","slug":"a-quick-guide-to-responsive-typography","status":"publish","type":"post","link":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/","title":{"rendered":"A Quick Guide to Responsive Typography"},"content":{"rendered":"

The majority of articles talking about responsive web design<\/a><\/strong><\/em> tend to focus on either a fluid or flexible grid and flexible images. However, as Oliver Reichenstein, founder and Director of Information Architects, points out, web design is 95% typography<\/span>.\u00a0 So what about typography and how it interacts with responsive web design?<\/p>\n

There are two principles to creating effective responsive typography. One is the re-sizable type, or text that is either re-sized automatically based on the size of the screen, or re-sizable by the user. The other is optimized line lengths, while maintaining readability.<\/p>\n

See our article: 3 Simple Ways to Improve Your Website Typography<\/a><\/h3>\n

 <\/p>\n

Resizable Type<\/strong>
\nFor the longest time, designers used either pixels or ems for sizing their type. Pixels provided consistency due to their fixed-size but were inflexible when it came to scaling. Ems provided the scalability lacking in pixels but became increasingly confusing due to their relativity to parent elements. Meet the rem. Rems combine the consistency of pixels with the scalability of ems by remaining relative to the html element rather than individual parent elements. For responsive layouts, instead of worrying about the compounded effect of parent elements, you\u2019re able to set your html element to font-size: 100% and forget it. And to take it a step further, optimizing ALL font sizes for different responsive breakpoints is cake. For example, if you want to increase font sizes for every bit of type on the iPad, you\u2019re able to do so by simply declaring a greater font-size percentage.<\/p>\n

For sizing type automatically based on the size of the screen, there are two options. The first is:
\n
\nMaintaining optimum line lengths<\/strong>
\nAccording to the Baymard Institute, each line of type in a web design should have between 50 and 75 characters for the best usability. Maintaining this standard between different screen sizes can be tricky, but it\u2019s attainable with the use of basic media queries and font sizes. It\u2019s easiest to adjust the font size for different break points based on the number of characters per line. For example, if the default font size of 1em results in 100 characters per line on a mobile device, try bumping up the font size for that break point to 1.25em. Additionally, font sizes for an iPad and an iPhone should always be slightly different, since people tend to hold an iPad further away. For much larger screen (or eventually web TVs), it\u2019s best to set your type in two columns using CSS3\u2019s multi-column specification.<\/p>\n

Even though responsive typography might seem confusing at first, optimizing it isn\u2019t difficult at all. In fact, with the introduction rems, it\u2019s actually quite easy. Providing users with legible and properly set type is just as important, if not more important that optimizing layout and\/or images.<\/p>\n","protected":false},"excerpt":{"rendered":"

The majority of articles talking about responsive web design tend to focus on either a fluid or flexible grid and flexible images. However, as Oliver Reichenstein, founder and Director of Information Architects, points out, web design is 95% typography.\u00a0 So what about typography and how it interacts with responsive web design? There are two principles\u2026<\/p>\n","protected":false},"author":3,"featured_media":49744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[709],"tags":[1251,1119,1252,1247,1253,1199],"class_list":["post-49743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design-usability","tag-responsive","tag-responsive-design","tag-responsive-typography","tag-responsive-web-design","tag-rwd","tag-typography"],"acf":[],"yoast_head":"\nA Quick Guide to Responsive Typography<\/title>\n<meta name=\"description\" content=\"Web design is 95% typography. So what about typography and how it interacts with responsive web design?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Quick Guide to Responsive Typography\" \/>\n<meta property=\"og:description\" content=\"Web design is 95% typography. So what about typography and how it interacts with responsive web design?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/\" \/>\n<meta property=\"og:site_name\" content=\"Webolutions Digital Marketing Agency\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webolutions\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-03-04T20:50:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-01T20:55:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"646\" \/>\n\t<meta property=\"og:image:height\" content=\"391\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Webolutions Digital Marketing Agency\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Webolutions Digital Marketing Agency\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/\"},\"author\":{\"name\":\"Webolutions Digital Marketing Agency\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#\/schema\/person\/ff98cb6f127b58228a48e434705fdc02\"},\"headline\":\"A Quick Guide to Responsive Typography\",\"datePublished\":\"2013-03-04T20:50:03+00:00\",\"dateModified\":\"2024-10-01T20:55:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/\"},\"wordCount\":470,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg\",\"keywords\":[\"Responsive\",\"responsive design\",\"Responsive Typography\",\"Responsive Web Design\",\"RWD\",\"typography\"],\"articleSection\":[\"Web Design & Usability\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/\",\"url\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/\",\"name\":\"A Quick Guide to Responsive Typography\",\"isPartOf\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg\",\"datePublished\":\"2013-03-04T20:50:03+00:00\",\"dateModified\":\"2024-10-01T20:55:27+00:00\",\"description\":\"Web design is 95% typography. So what about typography and how it interacts with responsive web design?\",\"breadcrumb\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#primaryimage\",\"url\":\"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg\",\"contentUrl\":\"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg\",\"width\":646,\"height\":391},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webolutionsmarketingagency.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Quick Guide to Responsive Typography\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#website\",\"url\":\"https:\/\/webolutionsmarketingagency.com\/\",\"name\":\"Webolutions Digital Marketing Agency\",\"description\":\"Digital Marketing Services Nationwide\",\"publisher\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webolutionsmarketingagency.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#organization\",\"name\":\"Webolutions Digital Marketing Agency\",\"url\":\"https:\/\/webolutionsmarketingagency.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/webolutions-agency-logo.svg\",\"contentUrl\":\"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/webolutions-agency-logo.svg\",\"width\":275,\"height\":34,\"caption\":\"Webolutions Digital Marketing Agency\"},\"image\":{\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webolutions\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#\/schema\/person\/ff98cb6f127b58228a48e434705fdc02\",\"name\":\"Webolutions Digital Marketing Agency\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webolutionsmarketingagency.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f5f0d7dcb7fe661db872ebf1231aa347?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f5f0d7dcb7fe661db872ebf1231aa347?s=96&d=mm&r=g\",\"caption\":\"Webolutions Digital Marketing Agency\"},\"description\":\"Webolutions Digital Marketing, Branding & Web Design Company. We are a full-spectrum business consulting and strategic growth implementation company. As a top Denver digital marketing agency since 1994, we help businesses across the country identify and effectively bring their unique story to life throughout all communications and experiences, allowing them to grow and scale faster, smarter, and easier. Our streamlined, data-driven solutions have helped thousands of clients gain a competitive edge in their industry, enabling them and their teams to thrive.\",\"url\":\"https:\/\/webolutionsmarketingagency.com\/author\/webolutions\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Quick Guide to Responsive Typography","description":"Web design is 95% typography. So what about typography and how it interacts with responsive web design?","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:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/","og_locale":"en_US","og_type":"article","og_title":"A Quick Guide to Responsive Typography","og_description":"Web design is 95% typography. So what about typography and how it interacts with responsive web design?","og_url":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/","og_site_name":"Webolutions Digital Marketing Agency","article_publisher":"https:\/\/www.facebook.com\/webolutions\/","article_published_time":"2013-03-04T20:50:03+00:00","article_modified_time":"2024-10-01T20:55:27+00:00","og_image":[{"width":646,"height":391,"url":"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg","type":"image\/jpeg"}],"author":"Webolutions Digital Marketing Agency","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Webolutions Digital Marketing Agency","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#article","isPartOf":{"@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/"},"author":{"name":"Webolutions Digital Marketing Agency","@id":"https:\/\/webolutionsmarketingagency.com\/#\/schema\/person\/ff98cb6f127b58228a48e434705fdc02"},"headline":"A Quick Guide to Responsive Typography","datePublished":"2013-03-04T20:50:03+00:00","dateModified":"2024-10-01T20:55:27+00:00","mainEntityOfPage":{"@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/"},"wordCount":470,"commentCount":0,"publisher":{"@id":"https:\/\/webolutionsmarketingagency.com\/#organization"},"image":{"@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#primaryimage"},"thumbnailUrl":"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg","keywords":["Responsive","responsive design","Responsive Typography","Responsive Web Design","RWD","typography"],"articleSection":["Web Design & Usability"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/","url":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/","name":"A Quick Guide to Responsive Typography","isPartOf":{"@id":"https:\/\/webolutionsmarketingagency.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#primaryimage"},"image":{"@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#primaryimage"},"thumbnailUrl":"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg","datePublished":"2013-03-04T20:50:03+00:00","dateModified":"2024-10-01T20:55:27+00:00","description":"Web design is 95% typography. So what about typography and how it interacts with responsive web design?","breadcrumb":{"@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#primaryimage","url":"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg","contentUrl":"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/photo_263.jpg","width":646,"height":391},{"@type":"BreadcrumbList","@id":"https:\/\/webolutionsmarketingagency.com\/a-quick-guide-to-responsive-typography\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webolutionsmarketingagency.com\/"},{"@type":"ListItem","position":2,"name":"A Quick Guide to Responsive Typography"}]},{"@type":"WebSite","@id":"https:\/\/webolutionsmarketingagency.com\/#website","url":"https:\/\/webolutionsmarketingagency.com\/","name":"Webolutions Digital Marketing Agency","description":"Digital Marketing Services Nationwide","publisher":{"@id":"https:\/\/webolutionsmarketingagency.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webolutionsmarketingagency.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webolutionsmarketingagency.com\/#organization","name":"Webolutions Digital Marketing Agency","url":"https:\/\/webolutionsmarketingagency.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webolutionsmarketingagency.com\/#\/schema\/logo\/image\/","url":"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/webolutions-agency-logo.svg","contentUrl":"https:\/\/webolutionsmarketingagency.com\/wp-content\/uploads\/webolutions-agency-logo.svg","width":275,"height":34,"caption":"Webolutions Digital Marketing Agency"},"image":{"@id":"https:\/\/webolutionsmarketingagency.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webolutions\/"]},{"@type":"Person","@id":"https:\/\/webolutionsmarketingagency.com\/#\/schema\/person\/ff98cb6f127b58228a48e434705fdc02","name":"Webolutions Digital Marketing Agency","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webolutionsmarketingagency.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f5f0d7dcb7fe661db872ebf1231aa347?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f5f0d7dcb7fe661db872ebf1231aa347?s=96&d=mm&r=g","caption":"Webolutions Digital Marketing Agency"},"description":"Webolutions Digital Marketing, Branding & Web Design Company. We are a full-spectrum business consulting and strategic growth implementation company. As a top Denver digital marketing agency since 1994, we help businesses across the country identify and effectively bring their unique story to life throughout all communications and experiences, allowing them to grow and scale faster, smarter, and easier. Our streamlined, data-driven solutions have helped thousands of clients gain a competitive edge in their industry, enabling them and their teams to thrive.","url":"https:\/\/webolutionsmarketingagency.com\/author\/webolutions\/"}]}},"_links":{"self":[{"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/posts\/49743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/comments?post=49743"}],"version-history":[{"count":0,"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/posts\/49743\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/media\/49744"}],"wp:attachment":[{"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/media?parent=49743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/categories?post=49743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webolutionsmarketingagency.com\/wp-json\/wp\/v2\/tags?post=49743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}