How to choose the right typography for your website

How to choose the right typography for your website

right-typography-for-your-website

Typography plays a fundamental role in web-projects. However, it often seems to be overlooked. But what is a web typography and how to use it?

 

Print and web design

Typography is such an important topic because it is part of your visual identity, branding, communication, storytelling and much more.

 The major difference between print design and web design is that print design is fixed content. Reading text on a screen is dynamic, often changing and sometimes on a background. If we read something on a screen, our eyes often jump around, searching for as much information as possible in a minimum of time. 

 The text on websites should be readable on different devices (Desktop, Tablet and Mobile). Due to Statista is more than half of the website traffic worldwide generated by mobile devices. That means that your typography should look good on all devices.

 

Font measurements for your web project

You should not just choose your typography because you like it, but you should also think about readability. There must be a balance between the text and the elements around it.

According to iHeartMedia, the font measurements are:

 

Mobile Type:

Mobile Type

iHeartRadio

Web Type:

Web Type

iHeartRadio

You can also try out the type tool from Jeremy Church.

Typefaces

The typefaces, we use to design our website, can be categorized under serif, sans-serif and cursive.

    Sans-Serif typefaces

    Sans-serif typo

    Use sans-serif typefaces in headings, subtitles, buttons:

    • Arial
    • Avenir
    • Futura
    • Helvetica
    • Lato
    • Montserrat
    • Open Sans

    Fonts used in larger sizes are also called „Display Fonts“.

    Serif typeface

    Serif typo

    Serif typefaces are easily readable when written in small body sizes and therefore used in body text.  Serif typefaces are popular to use on screens, such as websites and blogs.

    • Garamond
    • Baskerville
    • Palatino
    • Times New Roman
    • Rockwell
    • Allegro

    Large Font families

    Large families like „Roboto“ make branding easier if you plan a long-term project because you need to handle different situations like f.ex., writing a Newsletter or Blog, planning a marketing campaign or creating a logo. You can use the variety of the font in using different weight, a condensed version end more.

     

    • Alegreya
    • Roboto
    • Nunito
    • Merriweather

    If you still don’t know which font you should choose, think about what you want to communicate with your brand. Who is your target audience? Read other articles like Google’s Beginners Guide about choosing web fonts or Canva’s Guide to font pairing.

    I hope you enjoyed reading this article and it could help you choose the right typography for your web project.

    Signature

    How to use Divi footer as fixed footer

    How to use Divi footer as fixed footer

    use-divi-footer-as-fixed-footer

    In general, you can use the WordPress footer and customize it in your theme customizer or your widget area.

    In my case, I wanted to customize my footer in a more flexible way, which wasn’t possibly doing it in WordPress. That’s why I took a look at the Divi footer, which gave me all the possibilities I wanted, and I could change my footer.php so that the Divi footer has been shown automatically on all sides. And here I want to show you how you can easily do that!⁠

    Did you know, that Element Themes provides a Footer Layout Pack for free? You can choose one out of 10 footer designs and customize it according to your needs.

     

    Let’s start!

    Choose your footer and customize it. I used the Divi Footer Layout Pack 06 for my website as you can see on the screenshot below:

      Screenshot Divi footer pack 6

      Save your section in the Divi library

      After you customized your footer, you have to save this section in your Divi Library.

      Add to library

      Add your footer section to your footer.php

      I was a bit nervous making some changes on my footer.php, but it was really totally easy.

      Dashboard
      Footer Post ID
      ID

      First, we need the Post ID of the layout we created. Open the Divi library in your Dashboard: Divi> Divi library.

      Hover the mouse pointer over the title “Footer website”.

      As soon as it is done, the URL of the layout appears at the bottom. Make a note of the marked Post-ID. In my case, it’s the 6982.

      Now, we have to integrate the footer ID into the footer.php.

      Integration from footer ID into footer.php.

      Open the footer.php on the cPanel from your hosting company: cPanel > File Manager > public_html > wp-content > find your Divi Child theme and open the footer.php.

      Change the marked section against your previously noted footer ID and save the change.

      footer php

      Save it.

      That’s it! Now your footer should be visible on all pages.

       

      Your signature