My favourite fonts to use in 2020

My favourite fonts to use in 2020

My favourite fonts to use in 2020

Every designer/web designer has their favorite fonts and font pairings they like to use. I have my favorites too and as time goes by and I discover some new fonts – my go-to fonts change. In this post, I am going to list the fonts and fonts pairing I like to use now. My #1 criteria for a good font – it has to be easy to read at any size and font-weight. I also don’t like to use more than 2 fonts on the site, unless it is necessary. Let’s dive into it.

Freight Sans & Proxima Nova

I will start with one of my favourite (I used this combination on my website) is the Feight Sans (headings) + Proxima Nova (body text). Both fonts are from the Adobe Fonts library. Adobe fonts are easy to add to any web project, but you need to have an active Adobe account to use it on your website. You can find instructions on how to add Adobe font to your project here

Rubik

This combo is just one font Rubik with different font-weights. It’s a Google font, which means you can use it for free. Another advantage of using Google fonts is they are easy to integrate into any website. If you are using a page builder like Divi or Beaver Builder or other you don’t have to do any extra steps of installing the font – just select it.

Playfair Display & Muli

This pair is made from Playfair Display font and Muli (Google fonts). Muli looks great on the web page, easy to read and comes with a lot of font-weight variations from Extra Light to Black. I usually use this font for body text, however, the Extra-Bold or Black font-weights look great in Headings as well. The Playfair Display doesn’t need an introduction – this font is hard to pass when you need a strong good-looking display/serif font.

Quicksand & PT Sans

PT Sans (Google font) is one of those fonts that you can pare pretty much with any other font and the italic style of this font looks very nice too. On one of the sites I designed, I used it as the main text font and paired it with Quicksand (Google font) for headings. 

Heebo

The font that doesn’t need pairing and looks good for headings and as a body text by changing the font-weight is Heebo (Google font). However this font comes without Italyc styles, so if you need to have an italic text, you will need to pair wit some other, for example, Open Sans (also Google font and very popular).

Starling & Frank Ruhl Libre

Generally, I prefer to use sans fonts to serif for use on the website. However, I have a favourite combo of serif fonts. It is Starling (Adobe font) and Frank Ruhl Libre (Google font). I think the pair looks great together.  

Free contact form layouts for Divi Page Builder

Free contact form layouts for Divi Page Builder

Free contact form layouts for Divi Page Builder

I recently changed the layout of the contact form on my site. While making the changes I experimented with a few designs and I am excited to share with you 4 Divi Contact Form layouts. Feel free to download them and use them as you wish. They can be used to create a contact page or as a contact section on the one-page website. Here we go…

Contact Form One

I used a section with the 2 column layout. The first column has a background image and a combination of text module and CTA modules. The second column has text and contact form modules. In the second column, I set negative margin for top and bottom and applied css to create a shadow effect. All css code saved in the row advanced settings.

This is what it looks like.

Contact Form Two

This layout is similar to the first, but in this one the row design settings for “Equalize Column Heights” set to “yes” and the background has a contrasting colour to the background in the columns.

This is what it looks like.

Photo used in the layout by Andrew Branch on Unsplash

Contact Form Three

For this layout, I used a section with 2 columns and in the row design settings I set:

Make This Row Fullwidth: Yes
Use Custom Gutter Width: Yes
Gutter Width: 1
Equalize Column Heights: Yes

The padding for the second column is adjusted so the text and contact form are in the right place on the page.

This is what it looks like.

Photo used in the layout by Lionel Gustave on Unsplash

Contact Form Four

This layout also uses 2-column row structure. The image is added as a background image in the section. The contact form added to the second column (there is nothing in the first column). The second column has custom css code added in the Row Advanced settings to set negative margin for top and bottom, to make the column stretch “over” the section borders. The css for box shadow applied to make the form look like it’s floating above the image.

This is what it looks like.

Photo used in the layout by Adam Grabek on Unsplash

How to install these layouts on your Divi site

To upload the layout to your site follow these steps:

Download the layout you like (or all if you want) and save it on your computer. The file you downloaded will be compressed (zipped). You will need to “unzip” it before uploading it to your site.

Login to your site and navigate to Divi > Divi Library. In the Divi Library at the top click the button “Import/Export”. In the pop-up window, go to the “Import” section > click on “Choose file” and find downloaded and unzipped contactform.json file on your computer, click “Open”.

With the .json file uploaded to the library, you can go to the page where the contact form with be added.

All Contact Form layouts saved as a section, except the Contact form Four (that one has more than one section, so it is saved as a page layout).

How to add the layout saved as a section (Contact Form One, Two and Three)

Open the page and add the new section (anywhere under existing section). Click on “Add from Library” and choose one of the contact forms section from the library.

How to add the layout saved as a page (Contact Form Four)

The Contact Form Four is saved as a page layout. To add this layout to your page go to the top of the page in the “Divi Page Builder” click the button “Load From Library” > “Add from Library” > Find the Contact Four layout and click “Load’ button.

If you want to add this layout as a section to existing page make sure that you take out the green tick for “Replace the existing content with loaded layout”. The Contact Form Four layout will be uploaded at the top of the page and you can drag it to the right place.

That’s it – now you can preview the page and if everything looks good – save it.