{"id":2167,"date":"2014-07-31T13:19:21","date_gmt":"2014-07-31T13:19:21","guid":{"rendered":"http:\/\/blog.efrontlearning.net\/?p=2167"},"modified":"2014-11-18T13:57:12","modified_gmt":"2014-11-18T13:57:12","slug":"typography-e-learning-content-design","status":"publish","type":"post","link":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html","title":{"rendered":"Typography for e-learning content design"},"content":{"rendered":"
\n
\"typography-is-fun\"<\/a>In our last post, “10 Graphic Design tips for e-learning educators”, we provided a few essential guidelines for improving the look and feel of your e-learning content.<\/span><\/div>\n
<\/div>\n
Such a list, of course, can only offer a basic overview of the numerous things an educator needs to know when designing his e-learning courses. Don’t worry, though, because we’re here to expand on each of those guidelines and get into specifics, starting with the black art of fonts and typography.\u00a0<\/span><\/div>\n

<\/p>\n

It cannot be emphasized enough: graphic design is mostly typography. Good typography \u2015 which involves choice of fonts, font-sizes, line length, columns etc, can lift even the most mediocre content. Bad typography can render even the best e-learning material unreadable.<\/span><\/div>\n
<\/div>\n
Fortunately, while typography is something that can take years to fully master, you can get eighty-percent of the way there by following a few simple rules:<\/span><\/div>\n
<\/div>\n

Choose your fonts wisely (or stick to the standards)<\/b><\/span><\/h2>\n
In an era when OSes come with 100s of fonts and modern web browsers offer us the ability to serve our users any font we like among tens of thousands, it’s tempting to pick up exotic looking fonts, or render your content in fancy web-fonts. Don’t. Unless you know what you’re doing, it’s better to stick with the standard, boring but reliable, fonts available in all platforms (Arial, Verdana, Times, Georgia, etc).<\/span><\/div>\n
<\/div>\n
Most freely available web-fonts are of low typographic quality (if not downright tacky). Even nicely done web-fonts often look bad in older versions of Windows or older browsers, whereas fonts bundled with Windows and OS X have been finely tuned by\u00a0 professionals to look good on modern LCD displays. As an added bonus, built-in fonts are already installed on your users’ computers, so, unlike web fonts, they load immediately.<\/span><\/div>\n
<\/div>\n
\n

The three-fonts-max rule<\/b><\/span><\/h2>\n
A common mistake many webmasters make is using too many fonts. This looks amateurish. Keep your font-count low, using no more than two or three fonts (e.g one for your titles and one for your copy).<\/span><\/div>\n
<\/div>\n
Keep in mind that not all fonts are created equal. Some are designed for readability and are great for long text, while others are more ornamental or fancy and should be reserved for titles and headings. As a general rule, sans-serif fonts (such as Arial, Verdana, Calibri, Helvetica, etc) have been shown to make it easier to read long passages of text on a computer display with limited resolution (that is all, except the latest modern hi-DPI monitors).<\/span><\/div>\n
<\/div>\n
The warning against using too many different fonts also holds for using too many different font sizes and\/or weights. Stick with fewer, well thought-out font-sizes, preferably based on the hierarchical structure of your content (large font size for the titles, slightly smaller for your subtitles, medium for your content, small for footnotes and asides, etc).<\/span><\/div>\n
<\/div>\n
\n

Use fonts to set the mood<\/b><\/span><\/h2>\n
You should not base your font choices merely on whether you like a particular font itself. It’s more important that the font sits well with your content.\u00a0<\/span><\/div>\n
<\/div>\n
Fonts are not neutral. Depending on their design they can evoke different feelings, convey different notions (professionalism, playfulness, seriousness, friendliness, etc) and even allude to certain historical periods (e.g a gothic or modernist font).<\/span><\/div>\n
<\/div>\n
With the above in mind, try to pick an font appropriate for your target audience and content. An e-learning website aimed at young children, for example, can employ playful fonts (especially for the titles) to pique the kids’ interest. The same choice would obviously look unprofessional on an elearning-site on economics or law.<\/span><\/div>\n
<\/div>\n
\n

Make it readable<\/b><\/span><\/h2>\n
Typography is an art, or rather, an applied art. There are no “laws” set in stone, but guidelines and rules of thumb do exist, for both print and computer typography.<\/span><\/div>\n
<\/div>\n
Contrast, for starters, is especially important. As a computer display is an active source of light (in other words, there’s a lamp behind it), too much contrast can be fatiguing for the eyes. On the other hand, too low contrast is equally, if not more, fatiguing. Opt for a good, strong contrast, but avoid extremes (like 100% white on black, or 100% black on white).<\/span><\/div>\n
<\/div>\n
Regarding size, the latest consensus among graphic designers is for larger fonts – 16px and up. Those are appropriately sized for today’s higher resolution displays. Much larger or much smaller fonts both hinder readability.<\/span><\/div>\n
<\/div>\n
As a rule of thumb, a line of text should have around 75 characters. Longer lines make reading more difficult. You should use left-aligned text, as modern browsers still lack the ability to properly fully justify a paragraph the way a typographer would.<\/span><\/div>\n
<\/div>\n
Let your text breath. Break it in paragraphs, and leave some space after each paragraph. Avoid long running passages without paragraph breaks, as those make it difficult for the reader to track his position in the text (especially when scrolling in involved).<\/span><\/div>\n
<\/div>\n
Line height, the distance between lines of text, is another\u00a0 important aspect for great readability. The standard in most browsers is too small. Set a line height of 1.4em or more, depending on your font and overall design.
\n<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

In our last post, “10 Graphic Design tips for e-learning educators”, we provided a few essential guidelines for improving the look and feel of your e-learning content. Such a list, of course, can only offer a basic overview of the numerous things an educator needs to know when designing his e-learning courses. Don’t worry, though, […]<\/p>\n","protected":false},"author":33872,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,40],"tags":[],"class_list":["post-2167","post","type-post","status-publish","format-standard","hentry","category-best-practices","category-opinion"],"yoast_head":"\nTypography for e-learning content design - eFront Blog<\/title>\n<meta name=\"description\" content=\"Taking about the black art of fonts and typography used in content design in the context of e-learing\" \/>\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.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Typography for e-learning content design\" \/>\n<meta property=\"og:description\" content=\"Taking about the black art of fonts and typography used in content design in the context of e-learing\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html\" \/>\n<meta property=\"og:site_name\" content=\"eFront Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-31T13:19:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-18T13:57:12+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg\" \/>\n<meta name=\"author\" content=\"Nikos Andriotis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nikos Andriotis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html\"},\"author\":{\"name\":\"Nikos Andriotis\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ad73fe0df3ce823020fd1b37d39b1490\"},\"headline\":\"Typography for e-learning content design\",\"datePublished\":\"2014-07-31T13:19:21+00:00\",\"dateModified\":\"2014-11-18T13:57:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html\"},\"wordCount\":853,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg\",\"articleSection\":[\"Best practices\",\"Opinion\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html\",\"url\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html\",\"name\":\"Typography for e-learning content design - eFront Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg\",\"datePublished\":\"2014-07-31T13:19:21+00:00\",\"dateModified\":\"2014-11-18T13:57:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ad73fe0df3ce823020fd1b37d39b1490\"},\"description\":\"Taking about the black art of fonts and typography used in content design in the context of e-learing\",\"breadcrumb\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#primaryimage\",\"url\":\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg\",\"contentUrl\":\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.efrontlearning.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best practices\",\"item\":\"https:\/\/www.efrontlearning.com\/blog\/category\/best-practices\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Typography for e-learning content design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#website\",\"url\":\"https:\/\/www.efrontlearning.com\/blog\/\",\"name\":\"eFront Blog\",\"description\":\"eLearning tips, news and resources\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.efrontlearning.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ad73fe0df3ce823020fd1b37d39b1490\",\"name\":\"Nikos Andriotis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/48d8985b98e486bfd51353ad61bccb0bd18a919f4547bc909e544ba7e0b00892?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/48d8985b98e486bfd51353ad61bccb0bd18a919f4547bc909e544ba7e0b00892?s=96&d=mm&r=g\",\"caption\":\"Nikos Andriotis\"},\"url\":\"https:\/\/www.efrontlearning.com\/blog\/author\/nikos-andriotis\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Typography for e-learning content design - eFront Blog","description":"Taking about the black art of fonts and typography used in content design in the context of e-learing","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.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html","og_locale":"en_US","og_type":"article","og_title":"Typography for e-learning content design","og_description":"Taking about the black art of fonts and typography used in content design in the context of e-learing","og_url":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html","og_site_name":"eFront Blog","article_published_time":"2014-07-31T13:19:21+00:00","article_modified_time":"2014-11-18T13:57:12+00:00","og_image":[{"url":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg","type":"","width":"","height":""}],"author":"Nikos Andriotis","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nikos Andriotis","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#article","isPartOf":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html"},"author":{"name":"Nikos Andriotis","@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ad73fe0df3ce823020fd1b37d39b1490"},"headline":"Typography for e-learning content design","datePublished":"2014-07-31T13:19:21+00:00","dateModified":"2014-11-18T13:57:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html"},"wordCount":853,"commentCount":0,"image":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#primaryimage"},"thumbnailUrl":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg","articleSection":["Best practices","Opinion"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html","url":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html","name":"Typography for e-learning content design - eFront Blog","isPartOf":{"@id":"https:\/\/www.efrontlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#primaryimage"},"image":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#primaryimage"},"thumbnailUrl":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg","datePublished":"2014-07-31T13:19:21+00:00","dateModified":"2014-11-18T13:57:12+00:00","author":{"@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ad73fe0df3ce823020fd1b37d39b1490"},"description":"Taking about the black art of fonts and typography used in content design in the context of e-learing","breadcrumb":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#primaryimage","url":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg","contentUrl":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/07\/typography-is-fun.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/07\/typography-e-learning-content-design.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.efrontlearning.com\/blog"},{"@type":"ListItem","position":2,"name":"Best practices","item":"https:\/\/www.efrontlearning.com\/blog\/category\/best-practices"},{"@type":"ListItem","position":3,"name":"Typography for e-learning content design"}]},{"@type":"WebSite","@id":"https:\/\/www.efrontlearning.com\/blog\/#website","url":"https:\/\/www.efrontlearning.com\/blog\/","name":"eFront Blog","description":"eLearning tips, news and resources","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.efrontlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ad73fe0df3ce823020fd1b37d39b1490","name":"Nikos Andriotis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/48d8985b98e486bfd51353ad61bccb0bd18a919f4547bc909e544ba7e0b00892?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/48d8985b98e486bfd51353ad61bccb0bd18a919f4547bc909e544ba7e0b00892?s=96&d=mm&r=g","caption":"Nikos Andriotis"},"url":"https:\/\/www.efrontlearning.com\/blog\/author\/nikos-andriotis"}]}},"_links":{"self":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts\/2167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/users\/33872"}],"replies":[{"embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=2167"}],"version-history":[{"count":2,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts\/2167\/revisions"}],"predecessor-version":[{"id":2170,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts\/2167\/revisions\/2170"}],"wp:attachment":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=2167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=2167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=2167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}