You are on page 1of 38

18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Divi 3.0 & The All New Visual Builder Has Arrived! LEARN MORE

Themes Plugins Blog Contact Login JOIN TO DOWNLOAD

How to Effectively
Use Letter Spacing
to Create a
Stunning Design
with Divi
Posted on April 18, 2018 by Donjete Vuniqi in Divi
Resources | 0 comments

Have you ever tried experimenting with font families and


letter spacing at the same time? Let me tell you that it can
bring eye-catching results. It gives an abstract feeling to
your design and it also matches design trends in 2018.

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 1/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Not only can you add extra letter spacing to your text, you
can also use negative letter spacing to bring
your characters closer to each other. In this tutorial, that is
inspired by one of Roney Gibson‘s designs, we’re going to
show you how to creatively and effectively use letter
spacing to obtain beautiful results on all screen sizes. For
this, we’re using Divi’s built-in options only.

Preview
Before we dive into the tutorial, let’s take a quick look at
what you can expect from this tutorial on different screen
sizes.

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 2/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Color Palette #1

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 3/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Color #1: #f44f34

Color #2: #c81a33

Color #3: #e03933

Color #4: #f29d96

Color #5: #44cae1

Color Palette #2

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 4/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Color #1: #dddddd

Color #2: #b2b2b2

Color #3: #cccccc

Color #4: #5b5b5b

Color #5: #ff0022

How to Effectively Use


Letter Spacing to Create a
Stunning Design with Divi

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 5/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

How to Effectively Use Letter Spacing to Create a Stun…

Subscribe To Our Youtube Channel

Approach
There are two color palettes that you can apply to this
design

Choose one color palette and keep the numbering the


way it is

Throughout the tutorial, we’ll refer to a certain color


number which you have to get from the color palette
of your choice

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 6/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Afterwards, you can still clone a section and apply the


other color palette to it instead

We’re using both extra and negative letter spacing to


create the overall look and feel

The letter spacing value depends on the size of your


font

That means we’ll need to change the letter spacing for


every font size (desktop, tablet, phone)

Add a New Standard


Section

Gradient Background

Create a new page or open an existing one and switch over


to Visual Builder. Add a new section next, open the settings
and apply the following gradient background color to it:

First Gradient Color: Color #1

Second Gradient Color: Color #2

Gradient Type: Linear

Gradient Direction: 160deg

End Position: 53%

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 7/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Spacing

Then, move on to the Design tab, open the Spacing


subcategory and create some space at the top and
bottom of your section by adding the following custom
padding:

Top Padding: 60px

Bottom Padding: 180px

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 8/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Add First Row


Column Structure

Once you’re done with the section settings, you can add
your first row using the following column structure:

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 9/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Spacing

Before adding any modules, open the row settings and add
‘150px’ to the bottom padding.

Add First Name Text Module

Text Settings

Now we can start adding the desired modules to this row.


The first thing we’ll do is add a Text Module for the first
name. The text size and letter spacing will be different for
each screen size. We’re using negative letter spacing to
bring the characters closer to each other while still keeping
the size of the text:

Text Font Weight: Ultra Bold

Text Font Style: Uppercase

Text Size: 300px (Desktop), 210px (Tablet), 125px (Phone)

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 10/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Text Color: Color #3

Text Letter Spacing: -20px (Desktop), -15px (Tablet),


-8px (Phone)

Text Line Height: 1em

Text Shadow Vertical Length: 0.03em

Text Shadow Blur Strength: 0.02em

Text Shadow Color: rgba(0,0,0,0.47)

Text Orientation: Center

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 11/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Add Last Name Text Module

Text Settings

Right below the previous Text Module, add another one


containing the last name. Apply the following text settings
to it:

Text Font: Allura

Text Size: 88px (Desktop), 78px (Tablet), 39px (Phone)

Text Color: rgba(255,255,255,0.86)

Text Line Height: 1em

Text Orientation: Center

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 12/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Spacing

To make this Text Module overlap the previous one, add the
following top margin to it as well:

Top Margin: -200px (Desktop), -150px (Tablet), -100px


(Phone)

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 13/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Add Job Title Text Module

Text Settings

The last Text Module in this row is used to share the job title
(or anything else you’d like to share). For this Text Module,
we’re using extra letter spacing to create contrast.

Text Font Style: Uppercase

Text Size: 17px (Desktop), 16px (Tablet), 14px (Phone)

Text Color: Color #4

Letter Spacing: 22px (Desktop), 14px (Tablet), 8px


(Phone)

Text Line Height: 1.5em

Text Orientation: Center

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 14/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Spacing

We’ll also add ‘100px’ to the top margin of this Text Module to
create sufficient space between this Text Module and the
previous ones.

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 15/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Add Second Row


Column Structure

Now that we’re done with the first row, we can move on to
the next. We’ll need the following column structure:

Background Color

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 16/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Before adding any modules, open the row settings and use
‘#ffffff’ as the row background color.

Column 1 Background Color

We’ll also apply a slightly gray background color to the first


column using the ‘#f7f7f7’ color code.

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 17/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Sizing

We want the columns to have the same height, that’s why


we’ll enable the ‘Equalize Column Heights’ option in the
Sizing subcategory.

Spacing

And to remove all of the space above and below the


columns, we’ll add ‘0px’ to the top and bottom padding of
our row.

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 18/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Box Shadow

Lastly, we’ll apply a Box Shadow with quite a blur strength in


combination with a darker shadow color:

Box Shadow Blur Strength: 80px

Shadow Color: rgba(0,0,0,0.49)

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 19/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Add First Text Module to Column 1

Text Settings

Now, let’s start adding modules to the first column. We’ll


start with a ‘get to know me’ Text Module for which we’ll use
the following text settings:

Text Font: Allura

Text Font Weight: Bold

Text Size: 29px

Text Color: Color #5

Spacing

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 20/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

To vertically center the Text Module on desktop, we’ll need


to add some top margin. We’ll also create some space at
the left side:

Top Margin: 250px (Desktop), 50px (Tablet & Phone)

Left Margin: 17% (Desktop), 10% (Tablet & Phone)

Add Second Text Module to Column 1

Text Settings

Right below the previous Text Module, add another Text


Module. After you’ve added your content, apply the
following text settings:

Text Font: Adamina

Text Font Weight: Bold

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 21/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Text Font Style: Uppercase

Text Size: 71px (Desktop), 50px (Tablet), 45px (Phone)

Text Color: Color #2

Letter Spacing: -5px (The text size difference between


screen sizes is neglectable, that’s why we’re using this
value across all screen sizes)

Text Line Height: 1em

Spacing

Open the Spacing subcategory next and apply the


following custom margin to it:

Bottom Margin: 50px (Tablet & Phone)

Left Margin: 17% (Desktop), 10% (Tablet & Phone)

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 22/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Add Image Module to Column 2

Upload Image

We’ve added all the needed modules to the first column so


now we can move on to the second one. The first thing we’ll
add there is an Image Module.

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 23/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Image Alignment

Go to the Design tab next and enable left Image Alignment


in the Alignment subcategory. Also, make sure the ‘Always
Center Image on Mobile’ option is disabled.

Spacing

We’re going to make this image overlap the top of the row
by using the following top margin for it:

Top Margin: -50px (Desktop Only)

Left Margin: 5% (Tablet)

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 24/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Border

We’re also going to add a border to this image using the


following settings:

Border Width: 35px

Border Color: #ffffff

Border Style: Solid

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 25/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Box Shadow

Lastly, we’ll add a box shadow to create some depth:

Box Shadow Vertical Position: 24px

Box Shadow Blur Strength: 41px

Shadow Color: rgba(0,0,0,0.3)

Add Text Module to Column 2

Text Settings

Right below the Image Module you’ve added, add a Text


Module for your description. After adding your content,
apply the following text settings to it:

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 26/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Text Size: 15px

Text Color: #828282

Text Line Height: 1.4em

Text Orientation: Justify

Sizing

We’re going to change the width of this Text Module as well


by opening the Sizing subcategory and assigning ‘70%’ to
the Width.

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 27/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Spacing

Lastly, we’re going to add some top and left margin too:

Top Margin: 50px (Desktop Only)

Left Margin: 10% (Tablet & Phone)

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 28/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Add Button Module to Column 2

Button Alignment

The last module we’ll need to add is the Button Module. After
you’ve added your CTA, open the Alignment subcategory
within the Design tab and enable left Button Alignment.

Button Settings

We’re changing the appearance of the button by using the


following settings:

Use Custom Styles for Button: Yes

Button Text Size: 13px

Button Text Color: #ffffff

Button Background Color: Color #5

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 29/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Button Border Width: 0px

Button Letter Spacing: 6px

Button Font Style: Uppercase

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 30/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Spacing

Last but not least, to create some more background space


for the button, we’ll apply the following custom padding:

Top Padding: 10px

Right Padding: 40px

Bottom Padding: 10px

Left Padding: 40px

Preferential Extra Step


You can always take these tutorial designs a step further
and make them unique. One of the things you can do is add
a vibrant top divider, for instance:

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 31/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Add Top Divider to Section

To add this top divider, go to the Design tab of your section,


open the Dividers subcategory and apply the following
settings to it:

Divider Style: Find in List

Divider Color: Color #5

Divider Height: 500px (Desktop), 300px (Tablet), 250px


(Phone)

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 32/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Preview
Now that we’ve gone through all of the steps, and even
shared a preferential extra step you can add, let’s take a
final look at the result on different screen sizes.

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 33/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Final Thoughts
Experimenting with letter spacing within your design can
bring amazing results. To illustrate that, we’ve shown you
how to create a stunning design that uses both extra and
negative letter spacing. We’ve also provided you with two
color palettes that look great when applied to this design.
There’s a flashy red and a subtler gray one. If you have any
questions or suggestions, make sure you leave a comment
in the comment section below!

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 34/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

By Donjete Vuniqi
Donjetë is a freelance content writer who is
fascinated by content marketing, design, and
technology. She helps clients bring the right
content to the right people. If you're looking for
someone to help you tell your company's story,
she'll know how to handle it.

Leave a Reply
Comments are reviewed and must adhere to our
comments policy.

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 35/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Your Name*

Your Email*

Your URL

SUBMIT COMMENT

Receive notifications about our new blog posts.

Recent Posts Categories Follow Us

How to Effectively Use Community


Letter Spacing to
Customer Spotlight
Create a Stunning
Divi Resources
Design with Divi
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 36/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

2 Ways to Fix the Editorial


  
WordPress Mixed Freebie Of The Week
Content Error Face Twit Drib
General News boo ter bble
k
How to Use a Filterable
Resources
Portfolio and Post
Theme Additions
  
Navigation to Organize
Case Studies with Divi RSS Goo You
Theme Changes/Bug gle+ Tub
e
How to Make Your Fixes

Websites GDPR Theme Releases


Compliant
Theme Sneak Peeks
Get a Free Law Firm
Tips & Tricks
Layout Pack for Divi

492,154
Customers Are
Already Building
Amazing
Websites With
Divi. Join The
Most
Empowered
WordPress

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 37/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Community On
The Web
We offer a 30 Day Money Back
Guarantee, so joining is Risk-Free!

SIGN UP TODAY

112,528 38,814 273,824


FOLLOWERS FOLLOWERS FOLLOWERS

About Us Affiliates Careers Privacy Policy Terms of Service

Copyright © 2018 Elegant Themes ®

https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 38/38