{"id":22733,"date":"2015-04-14T06:46:53","date_gmt":"2015-04-14T10:46:53","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=22733"},"modified":"2016-09-26T20:46:07","modified_gmt":"2016-09-27T00:46:07","slug":"6-questions-to-ask-about-your-websites-typography","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/","title":{"rendered":"6 Questions To Ask About Your Website&#8217;s Typography"},"content":{"rendered":"<p><em>Author Bio: Tomer Lerner is an award-winning designer and a UX Manager at Webydo \u2013 the code-free website design platform for professional designers \u2013 where he manages the UX development team to push beyond the limits of creativity.<\/em><\/p>\n<p>Strong typographic design skills are an important part of working on the Web today. At <a href=\"http:\/\/www.webydo.com\/\" target=\"_blank\">Webydo<\/a>, we\u2019ve understood that well executed typography ensures that the content on websites is easy and enjoyable to read and ultimately contributes to the overall success of that website.<\/p>\n<p>So how do you know if your typography is up to snuff? In this article, we will cover 6 questions you should ask about a website\u2019s typography.<\/p>\n<h2>1. Do the fonts chosen include easy to distinguish letterforms?<\/h2>\n<p><a href=\"http:\/\/www.webydo.com\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/1-fonts-680x480.jpg\" alt=\"1-fonts\" width=\"680\" height=\"480\" class=\"alignnone size-large wp-image-22736 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/480;\" \/><\/a><\/p>\n<p>One of the most important principles of good typography is readability \u2013 after all, the text on the websites we design is meant to be read by that site\u2019s visitors, so ensuring that all text is easy to read is critical. When considering readability, the first area that you must look at is the letterforms in the font you have chosen.<\/p>\n<p>There are literally thousands of fonts available to use in your designs, but not all of those fonts are conducive to readability. Many fonts include letterforms that are difficult to make out, making the words and sentences they spell out very challenging to read. Fonts with very thin letters or overly ornate designs, two traits you will find in many script fonts, can make the content hard to read, and when content is hard to read, you risk that people will simply not read it at all!<\/p>\n<p>When evaluating font choices, look for letterforms that are easy to distinguish from one another. This does not mean you need to only stick with sans-serif fonts with thick, bold letters, but it does mean that if you decide to utilize more exotic font choices, that you must always be mindful of readability.<\/p>\n<h2>2. Is the contrast sufficient?<\/h2>\n<p><a href=\"http:\/\/www.webydo.com\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/2-Punko2-680x398.jpg\" alt=\"2-Punko2\" width=\"680\" height=\"398\" class=\"alignnone size-large wp-image-22737 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/398;\" \/><\/a><\/p>\n<p>Adequate contrast between the color you select for your text and the background on which that text sits is another factor in website readability. Black text against a white background may not work for all designs, but purely from a contrast perspective, you can\u2019t get any better than those choices!  <\/p>\n<p>While text will very low contrast may look visually appealing as a design, it is unusable, and since website must be used to be successful, you have to find a contrast that both looks good and is sufficient to make it easy to read.<\/p>\n<p>Contrast also plays a role in helping to discern one type of content from another, especially when you consider hyperlinks. By using a contrasting color for links versus the rest of a site\u2019s text, you clearly show visitors which text is \u201cclickable\u201d and which text is not. This makes it easier on a site\u2019s visitors get around the site and complete whatever actions they came to the site to accomplish.<\/p>\n<h2>3. Is the size of the text readable on all devices and screen sizes? <\/h2>\n<p><a href=\"http:\/\/www.webydo.com\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/3-comp-680x417.jpg\" alt=\"3-comp\" width=\"680\" height=\"417\" class=\"alignnone size-large wp-image-22738 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/417;\" \/><\/a><\/p>\n<p>Different screen sizes requires different font sizes. A font size that looks good on a desktop computer may not be large enough on small screen devices like smartphones. On the other side of the equation, text set very, very large may make a bold impact on large screens, but may be way too large to look appropriate for small screens. You need to look at the size of your fonts and adjust them based on the screen size of the visitor accessing that site. Responsive web design will allow you to do this.<\/p>\n<p>Having a responsive website that reflows its layout, and adjusts font sizes, for different screen is a critical component to successful sites on today\u2019s Web. Websites can be hand coded to be responsive, or a platform like <a href=\"http:\/\/www.webydo.com\/features.html\" target=\"_blank\">Webydo and their Pixel Perfect Responsive Editor<\/a> can bring this same functionality to a site without the need to hand code anything. This can give designers complete control over all aspects of a site\u2019s design, including font styles, for all screen sizes.<\/p>\n<h2>4. Will the fonts display for all visitors? <\/h2>\n<p><a href=\"http:\/\/www.webydo.com\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/4-Stella-680x398.jpg\" alt=\"4-Stella\" width=\"680\" height=\"398\" class=\"alignnone size-large wp-image-22735 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/398;\" \/><\/a><\/p>\n<p>For years, websites were limited to using \u201cweb safe fonts\u201d, a select group of fonts that were all but guaranteed to be found on user\u2019s computers (which is where websites traditionally loaded the font file from). With the rise of @font-face and web fonts, the variety of fonts that can be reliable used on websites has increased exponentially. This is accomplished by including font files along with a website in the same way you would include other resources, like images. <\/p>\n<p>You can also link to font files that are hosted at 3rd party solutions like Typekit, Google fonts, or the aforementioned Webydo platform which includes hundreds of open-source fonts that are optimized for web delivery. By using web fonts, you give yourself an exciting range of typefaces to choose from and you ensure that those fonts will display accurately for all visitors.<\/p>\n<h2>5. Is the white space around text adequate?<\/h2>\n<p>\u00a0<\/p>\n<p>From a readability perspective, we have already covered the concepts of letterforms, contrast, and sizing, but one additional factor to consider is the spacing, or \u201cwhitespace\u201d around content. <\/p>\n<p>Good typography includes adequate use of whitespace, allowing readers to easily process the content and see where one piece ends and another begins.  Unlike printed pages where space is often as a premium, websites can scroll as the content on a page gets longer. This means that you do not need to cram too much content into too small a space simply to get it all in. By spacing content out, you allow the site to flow more naturally and once again, you improve the reading experience for site visitors.<\/p>\n<h2>6. Does it look good?<\/h2>\n<p>While the previous 5 questions have all focused on readability and the technical aspects of a site\u2019s typography, you must also ensure that the design looks good and that the fonts chosen and the styles selected work with the overall look of the site and the brand of the company whom that site is for. You should never disregard a site\u2019s usability of the readability of the content, but that does not mean you need to sacrifice the visual aesthetics of the site\u2019s design. A successful website is one that works well and looks great, and with so much of the Web being text content, a great looking site is one whose typography is attractive and well executed.<\/p>\n<p>When evaluating your site\u2019s typography, address the technical considerations covered in this article, but also remember to simply ask whether or not the typography looks good!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Author Bio: Tomer Lerner is an award-winning designer and a UX Manager at Webydo \u2013 the code-free website design platform for professional designers \u2013 where he manages the UX development<\/p>\n","protected":false},"author":1,"featured_media":22738,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[537,109,24,35,1,5633,107],"tags":[5148,5145,5567,159,5227,848,5147],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>6 Questions To Ask About Your Website&#039;s Typography<\/title>\n<meta name=\"description\" content=\"Author Bio: Tomer Lerner is an award-winning designer and a UX Manager at Webydo \u2013 the code-free website design platform for professional designers \u2013\" \/>\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.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 Questions To Ask About Your Website&#039;s Typography\" \/>\n<meta property=\"og:description\" content=\"Author Bio: Tomer Lerner is an award-winning designer and a UX Manager at Webydo \u2013 the code-free website design platform for professional designers \u2013\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-14T10:46:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-09-27T00:46:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/3-comp.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3086\" \/>\n\t<meta property=\"og:image:height\" content=\"1894\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andy Sowards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Sowards\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/\",\"name\":\"6 Questions To Ask About Your Website's Typography\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/3-comp.jpg\",\"datePublished\":\"2015-04-14T10:46:53+00:00\",\"dateModified\":\"2016-09-27T00:46:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\"},\"description\":\"Author Bio: Tomer Lerner is an award-winning designer and a UX Manager at Webydo \u2013 the code-free website design platform for professional designers \u2013\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/3-comp.jpg\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/3-comp.jpg\",\"width\":3086,\"height\":1894},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"6 Questions To Ask About Your Website&#8217;s Typography\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\",\"description\":\"Design Inspiration &amp; Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\",\"name\":\"Andy Sowards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"caption\":\"Andy Sowards\"},\"description\":\"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards\",\"sameAs\":[\"https:\/\/www.andysowards.com\"],\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"6 Questions To Ask About Your Website's Typography","description":"Author Bio: Tomer Lerner is an award-winning designer and a UX Manager at Webydo \u2013 the code-free website design platform for professional designers \u2013","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.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/","og_locale":"en_US","og_type":"article","og_title":"6 Questions To Ask About Your Website's Typography","og_description":"Author Bio: Tomer Lerner is an award-winning designer and a UX Manager at Webydo \u2013 the code-free website design platform for professional designers \u2013","og_url":"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2015-04-14T10:46:53+00:00","article_modified_time":"2016-09-27T00:46:07+00:00","og_image":[{"width":3086,"height":1894,"url":"https:\/\/www.andysowards.com\/blog\/assets\/3-comp.jpg","type":"image\/jpeg"}],"author":"Andy Sowards","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Andy Sowards","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/","url":"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/","name":"6 Questions To Ask About Your Website's Typography","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/3-comp.jpg","datePublished":"2015-04-14T10:46:53+00:00","dateModified":"2016-09-27T00:46:07+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415"},"description":"Author Bio: Tomer Lerner is an award-winning designer and a UX Manager at Webydo \u2013 the code-free website design platform for professional designers \u2013","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/3-comp.jpg","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/3-comp.jpg","width":3086,"height":1894},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2015\/6-questions-to-ask-about-your-websites-typography\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"6 Questions To Ask About Your Website&#8217;s Typography"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","description":"Design Inspiration &amp; Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415","name":"Andy Sowards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","caption":"Andy Sowards"},"description":"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards","sameAs":["https:\/\/www.andysowards.com"],"url":"https:\/\/www.andysowards.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/22733"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=22733"}],"version-history":[{"count":0,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/22733\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/22738"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=22733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=22733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=22733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}