{"id":13754,"date":"2017-12-04T10:49:56","date_gmt":"2017-12-04T10:49:56","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13754"},"modified":"2020-09-03T11:30:34","modified_gmt":"2020-09-03T10:30:34","slug":"ten-tips-typography-web-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/ten-tips-typography-web-design\/","title":{"rendered":"Ten Tips On Typography in Web\u00a0Design"},"content":{"rendered":"

Communication plays a vital role in design \u2014 it\u2019s essential to establish a clear connection between the website and user and to help your users accomplish their goals. When we talk about communication in web design context, we usually mean text. Typography plays a vital role in this process:<\/p>\n

<\/div>
<\/svg><\/div>

\"More than 95% percent of information on the web is in the form of written language.\"<\/p><\/span><\/blockquote>\n

Good typography makes the act of reading effortless, while poor typography turns users off. As Oliver Reichenstein states in his article \u201cWeb Design is 95% Typography<\/a>\u201d:<\/p>\n

<\/div>
<\/svg><\/div>

\"Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic\u00a0balance.\"<\/p><\/span><\/blockquote>\n

In other words: optimizing your typography also optimizes your user interface. In this article, I will provide a set of rules that help you improve readability and legibility of your text content.<\/p>\n

Keep The Number of Fonts Used At a\u00a0Minimum<\/h2>\n

Using more than 3 different fonts makes a website look unstructured and unprofessional. Keep in mind that too many type sizes and styles at once can also wreck any layout.<\/p>\n

\"\"<\/a>

In order to prevent situation like this one try to limit the number of font families to a\u00a0minimum<\/p><\/div>\n

In general, limit the number of font families to a minimum (two is plenty, one is often sufficient) and stick to the same ones through the entire website. If you do use more than one font, ensure the font families complement each other based on their character width. Take the example of fonts combinations below. The combination of Georgia and Verdana (left) share similar values that creates a harmonious pairing. Compare that to the pairing of Baskerville and Impact (right) where the heavy weight of Impact vastly overshadows its serif counterpart.<\/p>\n

\"\"<\/a>

Ensure the font families complement each other based on their character width<\/p><\/div><\/center><\/p>\n

<\/p>\n

Try To Use Standard\u00a0Fonts<\/h2>\n

Font embedding services (like Google Web Fonts<\/a> or Typekit<\/a>) have a lot of interesting fonts that can give your designs something new, fresh, and unexpected. They\u2019re also super easy to use. Take Google for example:<\/p>\n

    \n
  1. Choose any font like Open Sans<\/a>.<\/li>\n
  2. Generate the code and paste in your HTML document\u2019s .<\/li>\n
  3. Done!<\/li>\n<\/ol>\n

    So what can go wrong?<\/p>\n

    Actually, this approach has one serious problem\u2014 users are more familiar with standard fonts and can thus read them faster.<\/p>\n

    Unless your website has a compelling need for a custom font, such as for branding purposes or to create an immersive experience, it\u2019s usually best to stick with the system fonts. The safe bet is to use a system font: Arial, Calibri, Trebuchet, etc. Keep in mind that good typography draws the reader to the content, not to the type itself.<\/p>\n

    Limit Line\u00a0Length<\/h2>\n
    \"\"<\/a>

    If a line is too short, the eye will have to travel back too often, breaking the reader\u2019s rhythm. If a line of text is too long, the user\u2019s eye will have a hard time focusing on the text. Image credit: Material\u00a0Design<\/p><\/div>\n

    Having the right amount of characters on each line is key to the readability of your text. It shouldn\u2019t be your design that dictates the width of your text, it should also be a matter of legibility. Consider this advice on readability and line length from the Baymard Institute<\/a>:<\/p>\n

    \u201cYou should have around 60 characters per line if you want a good reading experience. Having the right amount of characters on each line is key to the readability of your\u00a0text.\u201d<\/span><\/p>\n

    For mobile devices, you should go for 30\u201340 characters per line<\/a>\u00a0. Below is an example of two sites viewed on a mobile device. The first one uses 50\u201375 characters per line (optimum number of characters per line for print and desktop), while the second one uses the optimal 30\u201340 characters.<\/p>\n

    \"\"<\/a>

    Image credit: Usertesting<\/p><\/div><\/center><\/p>\n

    <\/p>\n

    In web design you can achieve an optimal number of characters per line by restricting the width of your text blocks using em<\/a> or pixels.<\/p>\n

    Choose a Typeface That Works Well In Various\u00a0Sizes<\/h2>\n

    Users will access your site from devices with different screen sizes and resolutions. Most user interfaces require text elements of various sizes (button copy, field labels, section headers, etc). It\u2019s important to choose a typeface that works well in multiple sizes and weights to maintain readability and usability in every size.<\/p>\n

    \"\"<\/a>

    Roboto typeface by\u00a0Google<\/p><\/div>\n

    <\/p>\n

    Make sure that the typeface you choose is legible on smaller screens<\/strong>! Try to avoid fonts that use cursive script, such as Vivaldi (in the example below): although they are beautiful, they are difficult to read.<\/p>\n

    \"\"<\/a>

    Vivaldi typeface will be difficult to read on the small\u00a0screen<\/p><\/div><\/center><\/p>\n

    <\/p>\n

    Use Fonts With Distinguishable Letters<\/h2>\n

    Many typefaces make it too easy to confuse similar letterforms, specifically with \u201ci\u201ds and \u201cL\u201ds (as seen in the image below), and poor letter spacing, such as when an \u201cr\u201d and \u201cn\u201d look like an \u201cm\u201d. So when choosing your type, be sure to check your type out in different contexts to make sure it won\u2019t cause an issue for your users.<\/p>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    Avoid All\u00a0Caps<\/h2>\n

    All caps text\u00a0\u2014\u00a0<\/em>meaning text with all the letters cap\u00adi\u00adtal\u00adized\u00a0\u2014 is fine in contexts that don\u2019t involve reading (<\/em>such as acronyms or logos), but when your message involves reading, don\u2019t force your users to read all caps text. As mentioned by Miles Tinker<\/a>, in his landmark work, Legibility of Print, all-capital print greatly retards the speed of scanning and reading in comparison with lower-case type.<\/p>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    Don\u2019t Minimize Spacing Between\u00a0Lines<\/h2>\n

    In typography, we have a special term for the spacing between two lines of text \u2014 leading (or line height). By increasing the leading, you increase the vertical white space between lines of text, generally improving readability in exchange for screen real estate. As a rule, leading should be about 30% more than the character height for good readability.<\/p>\n

    \"\"<\/a>

    Good spacing aids readability. Image credit: Microsoft<\/p><\/div>\n

    <\/p>\n

    Properly using white space between paragraphs has been proven to increase comprehension up to 20%, as pointed out by Dmitry Fadeyev. The skill of using white space lies in providing your users with a digestible amount of content, then stripping away extraneous details.<\/p>\n

    \"\"<\/a>

    Left: Almost overlapped text. Right: Good spacing aids readability. Image credit:\u00a0Apple<\/p><\/div>\n

    Make Sure You Have Sufficient Color\u00a0Contrast<\/h2>\n

    Don\u2019t use the same or similar colours for text and background. The more visible the text, the faster users are able to scan and read it. The W3C recommends the following contrast ratios for body text and image text:<\/p>\n