In this tutorial we learn how to characterize, pair, and source high-quality fonts. We’ll explore different approaches to using fonts creatively in Elementor.
The tutorial will cover:
✔︎ How to characterize fonts
✔︎ How to pair fonts
✔︎ Where to find high-quality fonts
✔︎ How to overlap text in Elementor
✔︎ Using the Animated Headline widget to combine fonts in Headings
✔︎ And much more!
Font resources:
Font Squirrel
Adobe Fonts
Elementor Kits:
Art Museum
Valentines Day
Urban Clothing Shop
Related videos:
Global Fonts
Elementor Kits Library
Margin and Padding
Animated Headline Widget
Short videos:
How to Install Kits
How To Use Adobe Fonts –
Animate Your Fonts Like a Pro
The typeface styles used on websites have a great impact on the way our visitors perceive their design. Choosing the right typography can bring that “wow” element to your website – imagine impactful heroes or text blocks that are not only readable but also communicate with the brand visual language. But how do we choose fonts for our websites?
Hey Everyone, I’m Aviva from Elementor.
In this Tips & Tricks tutorial, we’ll cover the basics of characterizing fonts, pairing fonts, share some font resources, and finally, learn how we can implement these concepts on our own websites, using Elementor.
But before we get started, let’s first discuss the difference between a typeface and a font, which technically have different meanings.
In a nutshell, typeface is the name for all the style possibilities, called fonts, that exist within it. So a font belongs to a typeface, or what is commonly known in web creation as a font family.
Note that nowadays, however, these two terms are often used interchangeably.
Ok, let’s begin with font characterization. There are numerous ways to characterize fonts, and today we’ll cover three of them.
First, we have font classification.
Typefaces are classified as serif, sans-serif, script (or handwritten), monospaced and display.
Serif typefaces show off with slight projections (called serifs) that complete the strokes of their letterforms.
Sans Serif typefaces do not have projections at the end of their letterform strokes.
Script typefaces are based on the strokes of handwriting.
In Monospaced typefaces, each letter has the same width and evokes a sense of absolute symmetry.
Display fonts are a broad category of typefaces designed for use at large sizes, such as headings and posters. They usually are very distinctive.
Another way we can characterize fonts is through contrast.
Many font families include a variety of different weights, which can be used in combination with each other.
We can also characterize fonts by Mood.
Fonts can convey emotion and be used to transmit different messages, such as feelings, and time periods.
Alright! Now that we know how to characterize fonts, we’ll take a look at three different font pairing methods:
Method #1 Combine typefaces of different classifications
Let’s take a look at this Art Museum Kit available for download from the Elementor Kits Library.
Here, we can see how these two serif and sans-serif styles play off each to create a harmonious design.
Method #2 Vary font weights for contrast
In this Valentine’s Day Kit example, we can see the use of different weights throughout the page. Fonts with varying weights create contrast, which helps draw our attention to headlines and calls to action.
Method #3 Select fonts to convey a Mood
Let’s take a look at this unique font from the Urban Clothing Shop Kit. Notice how it conveys elegance in a baroque style?
Great, so that brings us to our next segment, where can we find a variety of high quality fonts?
Let’s begin with Google Fonts. This resource is both free for commercial use and a free feature in Elementor. You can choose from a very long list of Google fonts on your website, without the need to install them.
Font Squirrel is another free font website. Elementor Cloud and Pro subscribers can upload these fonts to their site, from the Elementor Custom Fonts Settings.
Next on the list is Adobe fonts, which is available by paid subscription. If you have access to Adobe fonts and an Elementor Cloud or Pro subscription, you’ll find this integration available in the Elementor settings.
Another great resource for fonts is the Elementor Kits Library. Kits come ready to install on your website, complete with fonts.
Want to know more about Elementor Kits for your website designs?
We have a dedicated video, so be sure to check it out later.
We’ll leave links to these resources and relevant tutorials in the description.
Keep in mind that font licenses are subject to change, and copyright laws may differ internationally. Please be sure to read and abide by the font licenses.
Ok, time to see all these tips in action!
For our first example, we’ll pair two typefaces, use different font sizes for contrast, and create interest with overlapping text.
We’ll start in a section with one column, and drag in a Heading widget. Type in the Heading. I’ll add these
tags to break, or separate the lines in specific places.
Next, we’ll style the text by setting its typography. I’m using the typeface Lato here, available on both Google and Adobe fonts.
Now we’ll go ahead and add our second Heading. Drag in another Heading widget…and type in the text. Align it to the center, and in Style, set the typography. For this one, I’m using Blenny, available from Adobe Fonts.
Now, to get this outlined text effect, click and set the Text Stroke size…and color. Now go back up to the text color and drag the opacity slider all the way to the left, to make it completely transparent.
Our typography looks great. Time to make them overlap.
In the Advanced tab, unlink the margin. For the top margin, we’ll click and hold the down arrow until we get our desired overlapping result. We’ll do the same for the left margin. Perfect.
Now we’ll drag in the last heading…add the text…and style it. Click Advanced, and add some Padding around the widget. Under Background, change the Color….and under Positioning, set the Width to Custom, and adjust the Width. Set the Position to Absolute and we’ll drag the Horizontal offset slider to the right.
Next align the Vertical Orientation to the bottom, and drag the offset slider so that the widget overlaps a bit with the second Heading. Now we’ll change the stack order of the second heading so that it appears above the third heading, by setting its Z index.
Finally, we’ll drag in an image widget above our headings, and select an image. I’m using an SVG image for best quality and fast loading.
Next we’ll position it. Click Advanced, and under Positioning, select Custom Width, and Absolute Position. Align the Horizontal Orientation to the right.
Ok, it looks really good, but we can tweak it a bit more. Select the first Heading, and in Advanced, unlink the Padding, and add some Padding to the left side.
In the Border options, we’ll switch the type to Solid, and change the color. Set the width to zero. Then unlink the values and increase the width for the left border only.
Great, let’s preview. Wow, the overlapping text really adds a layer of depth!
For our second example, we’ll use the Animated Headline widget to combine a sans serif font with a serif font.
The animated Headline widget is available to our Pro and Cloud subscribers.
We’ll drag in the Animated Headline widget. This widget is full of fun animations for our typography, but since we don’t need any animations in this design, let’s skip ahead to the Style tab, and change the shape width to zero. This will hide the animation and keep it from distracting us while we set everything up.
Back in Content, we’ll type in the Before Text, which will be the text for the first font. Then, in Highlighted text, we’ll type in the text for the second font.
Even though we’ve hidden the animation, it’s still running behind the scenes. Toggle infinite loop to No, which will pause the animation, so we don’t use unneeded resources.
Now align the text to the left.
Great! Time to Style our type. In Headline, for the Typography, choose a font style that uses a sans serif font. I’m using the classic Helvetica, which is a System font.
For the Animated Text, which is the second part of our headline, we’ll choose a serif font for the Typography. I’ve selected Ivypresto Display from Adobe Fonts. We can also change the color for this text to contrast even more with the first line. We’ll click Text Color and choose a new color.
And that’s it. Let’s preview. Looks great!
Great, now you know how to characterize and pair fonts, and have the tools to create expressive and impactful typographic layouts on your website.
So go ahead, experiment with trendy fonts, stick to the classics, or mix them up. We can’t wait to see what you come up with. The possibilities are endless.
Thanks for watching! For more tutorials, check out the Elementor Academy, and subscribe to our Youtube channel. Don’t forget to hit that notification bell.
