How to Choose Typography for a Perfect Website Design

Written on

Nonetheless, the color palette is essential for the website!!

But, we cannot underestimate the typography!
Typography is one of the most impactful and fundamental aspects of positive user experience. You must know that web design is 95% of typography.

How to Choose Typography for a Perfect Website Design Create your own images & animated gifs with PixTeller graphic maker & gif creator

The accurate typefaces improve the design and convert the content as easy to read. On the other hand, improper typography does the reverse. It can destroy the user experience and increase the bounce rate.

Hence, it is recommended to make typography user-friendly in the website design so that they understand where to look and whether they want to stay on the website for a long time or not.

  • What is Typography, and Why is it Needed?

    What is Typography, and Why is it Needed?

    Typography in web design is a set of rules for formatting text and graphic elements of a website, which carries a specific message, affects emotions, and motivates the visitor to take targeted actions. Depending on the direction of the website, these actions can be different. Subscribe to the newsletter, read more articles, leave comments, make purchases. Thus, typography goes hand in hand with sales design.

    There is also a sensible definition. Typography is the science of text ergonomics, created to make the text easy to read and perceived by the website visitor. For this, a balance of text and graphic elements must be observed. Content without visual design can be dull and boring. So, you just need to know how to draw it up correctly.

  • The Basic Rules of Typography

    The Basic Rules of Typography

    The simpler, the better
    Even if many new exciting fonts, emoji, animations have appeared, you do not need to use all of them at once. The website will otherwise look clumsy and not at all stylish.

    The website must be readable
    If you choose between the originality of the idea and the visitor's convenience, any web designer will choose the latter without hesitation.

    The main thing should be different from the secondary
    Good typography immediately shows what is essential and what is not. If the website elements argue with each other and the visitor's eyes rush about, not knowing what to choose, then the typography is lame.

    The rule of the golden ratio
    This is the division of the website page elements into proportions in the ratio of 3/2, or 5/3, and so on. Most often, this principle is used to determine the percentage of ad units and text.

    The text is more important
    Graphics should not pull the blanket over themselves and distract from the content but complement it and draw attention. Text information is often more important than pictures - which means that graphics should be at the service of the content, and not vice versa.

    Remember harmony
    It is not only in music, as it was sung in one famous song. Everything on the website should be done nicely to the eye, harmoniously and naturally.

  • 10 Best Ways to Use Typography in Web Design

    10 Best Ways to Use Typography in Web Design
    1. 1. Use the Minimum Number of Fonts

      When using more than three different fonts, your website loses its structure and looks unprofessional. Remember that overuse of font size and style can mess up any markup. In general, keep the number of fonts to a minimum (two is more than enough, often one is enough) and stick to using the same fonts throughout the website.

      If you choose to work with more than one font, make sure the font families match letter width. Take a look at the example below. The combination of Georgia and Verdana (left) share common characteristics that blend harmoniously with each other. Take the Baskerville and Impact combination (right) for comparison. "Heavy" Impact overwhelms its "notch" partner.

    2. 2. Try to Use the Standard Fonts

      Font services (such as Google Web Fonts or Typekit) have many interesting ones that will add something new and different to your design. Plus, they're straightforward to use. Take Google, for example:

      1. • Choose any font.
      2. • Generate the code and paste it into the <head> of your HTML.
      3. • Done!

      But what could go wrong? This method has one serious problem - users are used to standard fonts and read text written in such fonts faster.

      Usually, the best solution is to use system fonts. An exception may be the need to stick to some type of font that the client has set: for example, for branding or to create something memorable. Remember that good typography affects the reading of the text, not the visual perception of the type.

    3. 3. Limit Line Length

      The correct number of characters on one line is the key to the ease of reading your text. When choosing the text's width, you should focus not on your design but the clarity and legibility of the writing. If you want your reader to be comfortable, each line should be no more than 60 characters.

      If the line is too short, the eyes have to change focus frequently, slowing the reading pace.

      If the line is too long, the reader's eyes, on the contrary, have to focus on the written for a long time. For mobile devices, stick to a range of 30-40 characters per line. In web design, you can achieve the required number of names by reducing text boxes' width using em or pixels.

    4. 4. Choose Typefaces that Read Properly in Any Size

      Users visit your website from different devices, which, accordingly, differ in size and resolution. Most user interfaces use text elements of various sizes (copy button, field labels, section headers, etc.). Choose a typeface that looks good and remains readable at any size. Make sure the headset you choose is comfortable to read on small screens. Try not to use cursive fonts as they look pretty. They can be challenging to understand.

    5. 5. Use Fonts with Crisp Letters

      Many typefaces are designed so that it is sometimes effortless to confuse similar letters, especially the Latin “I” and “L.”In some, the letters are so close to each other that the combination of "r" and "n" can be mistaken for the letter "m".

      Therefore, when choosing a font, test it in different contexts. This way, you can make sure that the typeface doesn't make the reader understand the text.

    6. 6. Avoid Caps

      Text written in caps or capital letters alone is suitable for a situation where the user is not involved in the reading process (for example, in abbreviations or logos). But in other cases, don't rape your readers with text in capital letters.

    7. 7. Do Not Keep the Line Spacing to Minimum

      In typography, there is a particular term for the spacing between lines - leading (or line spacing). By increasing the leading, you increase the vertical space between lines, thereby improving the readability of text on the screen.

      According to the rules, to ensure the readability of the text, the leading should be about 30% more than the height of the character. The correct distance between paragraphs increases reading comprehension by 20%. The designer's ability to work with white space allows users to assimilate the text's content in its entirety without missing out on any details.

    8. 8. Make Sure the Color Contrast is Okay

      Do not use the same or similar colors for text and background. The better the text is visible, the faster users can read it and catch the main points. The World Wide Web Consortium advises using the following ratio for body text and image text:

      • • Small texts should have a contrast ratio of at least 4.5:1 concerning the background.
      • • Large texts (from size 14 in bold / from size 18 and above in standard font) must have a contrast ratio of at least 3:1 with the background.

      When you have chosen the color scheme, you need to give your text readable to real users and preferably on several different devices. If during testing some difficulties with text recognition are revealed, then you can be sure that in the future, many users may face the same problem.

    9. 9. Try Need to Use the Green or Red Color in the Text

      Color blindness is a fairly common phenomenon, especially among men (8% of the male population is color blind). Therefore, in addition to color, it is advisable to use some other signs to highlight important information. Also, try not to resort to red and green colors, as these are the colors most often not recognized by color blind people.

    10. 10. Try Not to Use Flickering Text

      Information that blinks or flickers can cause discomfort in susceptible users. Besides discomfort, it can also irritate many readers as it distracts them from the reading process.

  • Typography Trends in Web Design

    Typography Trends in Web Design

    Web design typography is continuously changing and flourishing. Nowadays, there is an abundance of styles and colors, details, and renderings. This helps to influence the visitors of the portal effectively. Large typography is popular now. It has many advantages over others:

    1. Able to Attract Guests and Keep on the Page

      Bright fonts of large size attract. It is desirable to use an unusual color scheme and correctly position the text on the portal. For example, on the pages of an online store, texts call for action to purchase goods, provide information about discounts and goods receipt, promotions, and presentations.

      On the news portal, the central place on the page should be occupied by an actual and fresh article. Large texts correspond to advertising signs of the night city, urging to look at them, read information, and get acquainted with services.

    2. Arouses Positive Emotions in Website Visitors

      When writing one phrase in small and large print, the visitor will pay attention to the massive letters and prefer to use the services of an attractive portal.

      If you write the correct inviting text, you can influence the emotional state of the visitor. The guest will return to the site and become a regular user. A loud slogan alludes to the website owner’s identity to pique the interest of visitors and make them linger.

    3. Highlight the Main

      The banner blindness effect is known when users skim the page and do not dwell on essential details. Big headlines or advertising slogans written in bright letters help to highlight the main thing and get the desired effect from the site visitor. Smaller headlines show less relevant information.

Concluding Remarks

Typography is crucial. By making the right choices, you provide the website with clarity and legibility. Simultaneously, the wrong choice can lead to the inattentive reading of the text, as it distracts all attention to itself. Typography should be readable, clear, and understandable.

The best typography constitutes a pleasant experience, whereas a type that is tough to read or does not suit the website tone can influence the UX negatively.

Look at the tips mentioned above to get the typography that is suitable for your website. We assure you of profitable results!!

In case you are stuck somewhere, then ask us in the comment section below. Also, if you have some suggestions, then let us know about that as well.

Viviana Folliero

Until next time, Be creative! - Pix'sTory made by Viviana Folliero

Viviana Folliero is a Manager at Awebstar, a website designing agency in Singapore which is dealing with mobile app development, SEO, social media marketing, and more. Connect with her on Facebook, Twitter, and Awebstar.com.sg.

Easy-to-Use
Photo & Animation Maker

Register - It's free
Have an account? Login