{"id":701,"date":"2017-06-01T14:56:14","date_gmt":"2017-06-01T14:56:14","guid":{"rendered":"http:\/\/www.web-design.co.za\/blog\/?p=701"},"modified":"2017-06-02T07:54:25","modified_gmt":"2017-06-02T07:54:25","slug":"best-text-alignment-website","status":"publish","type":"post","link":"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/","title":{"rendered":"Best text alignment for your website"},"content":{"rendered":"<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png\" alt=\"Best text alignment for your website\" width=\"760\" height=\"385\" class=\"alignnone size-full wp-image-849\" srcset=\"https:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png 760w, https:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification-300x152.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/>\r\n<br \/><br \/>\r\n<h2>What types of typographic alignments are available?<\/h2>\r\n<p>\r\nBefore we get into what type of text alignment is best for your website, let&#8217;s first discuss the options&#8230;\r\n<\/p>\r\n<h3>Left Aligned Text<\/h3>\r\n<p>\r\nWhen lines of text are left aligned, they are flush on the left hand side and ragged on the right.   \r\n<\/p>\r\n<div class=\"typoexample\">\r\n<h4>Example<\/h4>\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\r\n<\/p>\r\n<\/div><!-- typoexample -->\r\n\r\n<h3>Right Aligned Text<\/h3>\r\n<p>\r\nWhen lines of text are right aligned, they are flush on the right hand side and ragged on the left.  \r\n<\/p>\r\n<div class=\"typoexample typoright\">\r\n<h4>Example<\/h4>\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\r\n<\/p>\r\n<\/div><!-- typoexample -->\r\n\r\n<h3>Center Aligned Text<\/h3>\r\n<p>\r\nWhen lines of text are center aligned, they are ragged on both the left and right.  \r\n<\/p>\r\n<div class=\"typoexample typocenter\">\r\n<h4>Example<\/h4>\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. \r\n<\/p>\r\n<\/div><!-- typoexample -->\r\n\r\n<h3>Justified Text<\/h3>\r\n<p>\r\nWhen lines of text are justified, they are flush on both the left and right.  \r\n<\/p>\r\n<div class=\"typoexample typojustify\">\r\n<h4>Example<\/h4>\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\r\n<\/p>\r\n<\/div><!-- typoexample -->\r\n\r\n<h2>Which text alignment is best for your website?<\/h3>\r\n<p>\r\nPrint media has been around a lot longer than digital media, and so we can look to traditional graphic design for the answer to today&#8217;s digital question.  At least as a starting point.  You may have noticed that:\r\n<\/p>\r\n<ul>\r\n<li>A4 sized documents and magazine articles are usually left aligned.<\/li>\r\n<li>Newspaper columns and books mostly use justified text.<\/li>\r\n<li>Poster text is often centered.<\/li>\r\n<li>Right aligned text is usually reserved for numbers in a column.<\/li>\r\n<\/ul>\r\n<p>\r\nOn websites you won&#8217;t often see centered or right aligned text, and this is probably because people intrinsically know that centered and right aligned text is not as easy or comfortable to read.  That&#8217;s apart from headings and short sentences of course. There are instances where centered text can look great, like on a product banner, but centered text never looks good in long paragraphs.  Likewise, right aligned text has it&#8217;s place, for example pricing and call to action buttons usually look best right aligned.\r\n<\/p>\r\n<p class=\"emphasised\">\r\nThe main debate is really between those who advocate justified text instead of left aligned and vice versa. \r\n<\/p>\r\n<p>\r\nThe left aligned camp will point out that it&#8217;s not as easy to read justified text.  Because every line is the same length, it&#8217;s easier to lose your place while reading.  In contrast, the ragged right nature of left aligned text makes it easier to distinguish the line they just read from the line they are going to read. \r\n<\/p>\r\n<p>\r\nThe justified camp will point out that if newspapers and printed books use justified text, it can&#8217;t be all that bad.  There are two major differences between websites and printed media like books and newspapers though:\r\n<\/p>\r\n<h3>1. Column Width<\/h3>\r\n<p>\r\nNewspapers don&#8217;t start their paragraph text on the left side of the page and stretch it all the way to the right. Instead they have multiple narrow columns.  Narrow columns almost entirely eliminate the problem of losing ones place within the article. It&#8217;s easy for the eyes to keep track of which line they were on because the actual eye movement is minimal.  Books don&#8217;t usually have multiple columns, but the paper size itself limits the width of the lines naturally.\r\n<\/p>\r\n<p>\r\nIf you&#8217;re not breaking up your justified text into narrower areas on your web page, it&#8217;s not as easy to read as left aligned text. That&#8217;s a fact.  The W3C (World Wide Web Consortium) have <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G169.html\">stated<\/a> this is particularly a problem for those with cognitive disabilities.\r\n<\/p>\r\n<h3>2. Hyphenated Text<\/h3>\r\n<p>\r\nEven if you do break your justified text up into columns, or narrower areas on your web page, you then encounter an entirely different readability problem.  Letter spacing (aka kerning) between words becomes variable and unsightly. Here&#8217;s that justified text example again where you can clearly see the issue:\r\n<\/p>  \r\n<div class=\"typoexample typojustify\">\r\n<h4>Look at the ugly spaces:<\/h4>\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\r\n<\/p>\r\n<\/div><!-- typoexample -->\r\n<p>\r\nThe superficial neatness that you gain by justifying your text is offset by the gaps of varying width between words.  Newspapers are able to get around this issue because they have this beautiful thing called a hyphen.  Because newspapers have the ability to hyphenate words, the spacing between words becomes more uniform.\r\nUnfortunately, at this point in time, not all web browsers support hyphens.<\/p>\r\n<ul>\r\n<li><a href=\"http:\/\/caniuse.com\/#feat=css-hyphens\">Here&#8217;s a nifty chart<\/a> showing which browsers do and do not support hyphens.<\/li>\r\n<\/ul>\r\n<p>\r\nIf you see hyphens in the below example, then you are using a browser that supports them.  If you still see the ugly spacing you are probably using an old browser or any version of Opera Mini.\r\n<\/p>\r\n<div class=\"typoexample typojustifyhyphen\">\r\n<h4>Justified with hyphens:<\/h4>\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.\r\n<\/p>\r\n<\/div><!-- typoexample -->\r\n\r\n<h2>Summary<\/h2>\r\n<p>\r\nQualified graphic designers are able to use their training and innate design talent to determine how best to display typographic elements, but for casual web builders, here is a useful guide:\r\n<\/p>\r\n<ul>\r\n<li>Avoid using right aligned text for paragraphs.  Right aligned text is appropriate for numbers within columns, and potentially also &#8216;call to action&#8217; buttons.<\/li>\r\n<li>Use centered text sparingly, and also not for paragraphs of text.  Most headings should be left aligned, but there are cases where centered headings and short sentences can look good.<\/li>\r\n<li>If you are going to use justified text, make sure the lines of text are not too wide and that you use hyphenation (the css for this is: <i>p{hyphens:auto}<\/i>).  Just keep in mind the lack of hyphenation support across browsers. The biggest defectors are old browsers (especially old Android browsers) and, at the time of writing, any version of Opera Mini.<\/li>\r\n<li>When in doubt use left aligned text<\/li>\r\n<\/ul>\r\n\r\n<p>\r\n<br \/><br \/><br \/>\r\n<i>Article by Roxane Lapa of <a title=\"web design company\" href=\"http:\/\/www.coza-web.co.za\/\" target=\"_blank\">.COZA Web Design<\/a><\/i>\r\n<\/p>","protected":false},"excerpt":{"rendered":"What types of typographic alignments are available? Before we get into what type of text alignment is best for your website, let&#8217;s first discuss the options&#8230; Left Aligned Text When lines of text are left aligned, they are flush on &hellip; <a href=\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/\">Continue reading <span class=\"meta-nav\">&raquo;<\/span><\/a>","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-701","post","type-post","status-publish","format-standard","hentry","category-web-design-articles"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Best text alignment for your website - web-design news blog<\/title>\n<meta name=\"description\" content=\"Left, Centered, Right or Justified? Learn how to best align typographic elements on your website. Advice from a qualified graphic designer.\" \/>\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.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best text alignment for your website\" \/>\n<meta property=\"og:description\" content=\"Qualified graphic designers are able to use their training and innate design talent to determine how best to display typographic elements, but for casual web builders, here is a useful guide on text alignment.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/\" \/>\n<meta property=\"og:site_name\" content=\"web-design news blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-01T14:56:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-02T07:54:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png\" \/>\n\t<meta property=\"og:image:width\" content=\"760\" \/>\n\t<meta property=\"og:image:height\" content=\"385\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Roxane\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roxane\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/\",\"url\":\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/\",\"name\":\"Best text alignment for your website - web-design news blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.web-design.co.za\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png\",\"datePublished\":\"2017-06-01T14:56:14+00:00\",\"dateModified\":\"2017-06-02T07:54:25+00:00\",\"author\":{\"@id\":\"https:\/\/www.web-design.co.za\/blog\/#\/schema\/person\/faef3b55c40152bbcbbca31d38f3b03d\"},\"description\":\"Left, Centered, Right or Justified? Learn how to best align typographic elements on your website. Advice from a qualified graphic designer.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#primaryimage\",\"url\":\"https:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png\",\"contentUrl\":\"https:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png\",\"width\":760,\"height\":385,\"caption\":\"Best text alignment for your website\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.web-design.co.za\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best text alignment for your website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.web-design.co.za\/blog\/#website\",\"url\":\"https:\/\/www.web-design.co.za\/blog\/\",\"name\":\"web-design news blog\",\"description\":\"The official blog of www.web-design.co.za\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.web-design.co.za\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.web-design.co.za\/blog\/#\/schema\/person\/faef3b55c40152bbcbbca31d38f3b03d\",\"name\":\"Roxane\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.web-design.co.za\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c378aa79456ca42323caca7a9df1a78c4fc9eb4b202ac25cffc44136fdb566b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c378aa79456ca42323caca7a9df1a78c4fc9eb4b202ac25cffc44136fdb566b?s=96&d=mm&r=g\",\"caption\":\"Roxane\"},\"url\":\"https:\/\/www.web-design.co.za\/blog\/author\/foxyroxy\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Best text alignment for your website - web-design news blog","description":"Left, Centered, Right or Justified? Learn how to best align typographic elements on your website. Advice from a qualified graphic designer.","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.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/","og_locale":"en_US","og_type":"article","og_title":"Best text alignment for your website","og_description":"Qualified graphic designers are able to use their training and innate design talent to determine how best to display typographic elements, but for casual web builders, here is a useful guide on text alignment.","og_url":"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/","og_site_name":"web-design news blog","article_published_time":"2017-06-01T14:56:14+00:00","article_modified_time":"2017-06-02T07:54:25+00:00","og_image":[{"width":760,"height":385,"url":"https:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png","type":"image\/png"}],"author":"Roxane","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Roxane","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/","url":"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/","name":"Best text alignment for your website - web-design news blog","isPartOf":{"@id":"https:\/\/www.web-design.co.za\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#primaryimage"},"image":{"@id":"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#primaryimage"},"thumbnailUrl":"http:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png","datePublished":"2017-06-01T14:56:14+00:00","dateModified":"2017-06-02T07:54:25+00:00","author":{"@id":"https:\/\/www.web-design.co.za\/blog\/#\/schema\/person\/faef3b55c40152bbcbbca31d38f3b03d"},"description":"Left, Centered, Right or Justified? Learn how to best align typographic elements on your website. Advice from a qualified graphic designer.","breadcrumb":{"@id":"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#primaryimage","url":"https:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png","contentUrl":"https:\/\/www.web-design.co.za\/blog\/wp-content\/uploads\/text-justification.png","width":760,"height":385,"caption":"Best text alignment for your website"},{"@type":"BreadcrumbList","@id":"https:\/\/www.web-design.co.za\/blog\/2017\/06\/01\/best-text-alignment-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.web-design.co.za\/blog\/"},{"@type":"ListItem","position":2,"name":"Best text alignment for your website"}]},{"@type":"WebSite","@id":"https:\/\/www.web-design.co.za\/blog\/#website","url":"https:\/\/www.web-design.co.za\/blog\/","name":"web-design news blog","description":"The official blog of www.web-design.co.za","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.web-design.co.za\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.web-design.co.za\/blog\/#\/schema\/person\/faef3b55c40152bbcbbca31d38f3b03d","name":"Roxane","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.web-design.co.za\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c378aa79456ca42323caca7a9df1a78c4fc9eb4b202ac25cffc44136fdb566b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c378aa79456ca42323caca7a9df1a78c4fc9eb4b202ac25cffc44136fdb566b?s=96&d=mm&r=g","caption":"Roxane"},"url":"https:\/\/www.web-design.co.za\/blog\/author\/foxyroxy\/"}]}},"_links":{"self":[{"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/posts\/701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/comments?post=701"}],"version-history":[{"count":39,"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/posts\/701\/revisions"}],"predecessor-version":[{"id":857,"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/posts\/701\/revisions\/857"}],"wp:attachment":[{"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/media?parent=701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/categories?post=701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.web-design.co.za\/blog\/wp-json\/wp\/v2\/tags?post=701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}