On Thursday the 12th of April, we hosted a fantastic Facebook Live session where we demonstrated how Divi users can use CSS to control the typography of their Divi website.

If you missed the Facebook live, you can rewatch it at any time!

• Watch the replay on Facebook, or,
• Watch the replay on YouTube.

Even though the Divi theme allows its user to set the varying text sizes for desktop, tablet and mobile devices of each module within the builder, there is a far easier way to universally set each font size using just a few lines of code.

The webinar began with us explaining the nature in which themes such as Divi automatically assign a pixel value to each font on a website. He also explained how these standard pixel fonts function, and how tricky they can be in the face of changing screen sizes.

Even though pixels are universally accepted across all browsers, they’re not the most user-friendly option for the web designer to use.

When designing websites for varying screen sizes, font related pixel values won’t automatically resize. To make the font sizes adjust, the web designer will need to write a number of media queries to adjust each pixel size for the body, paragraph and H1 – H6 tags. If media queries are neglected, the text would either appear too small on desktop screens or too large on smaller devices.

As well as breaking down the option of using pixels, SJ also demonstrates alternate methods for setting font sizes, including keywords (such as medium, xx-large, xx-small etc..) and percentages. He also shares the pros and cons of using each method before introducing his personal favorite, ems.

Tremendously easy to set up, using ems in your Divi child theme’s stylesheet to set the sitewide fonts will shave hours off your development time.

Ems will take their value from the fixed pixel size of the body tag. For example, if the body tag is set to 14 pixels, then one em will equate to 14 pixels. For example, if you were to assign 2em to a font style, the pixel value would equate to 28px.

By simply writing a few media queries for the body text, you’ll be able to set one single em value to the typography tags… and you’ll never have to worry about type resizing on different screens.

At this point in the webinar, there is a full demonstration of writing font sizes using ems within the style sheet of a Divi child theme.

Here, SJ sets the pixel value for the body tag (and includes a few media queries) as well as the em values for the H1 – H6 tags. If the web designer continues using em values throughout the stylesheet, the values will reflect sitewide. One of the best things about writing font sizes using ems vs pixels is that there is far less code in the stylesheet, seeing only a few lines of CSS get the job done.

Next, SJ uses one of the Elegant Themes free layout packs and explains in detail how easy it is to override the default CSS properties assigned within the individual modules.

As opposed to changing each and every text module in the layout page, SJ shows how simple it is to override these font sizes using ems. While explaining about CSS classes, CSS hierarchy and the cascading nature of stylesheets, SJ demonstrates how a few small lines of CSS will save a web designer plenty of time in changing the individual fonts set per the module.

To watch the full webinar replay, head over to Facebook or YouTube, or just click play below.

Also, here is all of the CSS snippets shared in the session!

/* Apply the base font size in a px value to the body element */
body {
 font-size: 14px;
}

/* Media query to adjust the base font size on desktops and above */
@media all and (min-width: 981px) {
 body { font-size: 16px; }
}

/* Media query for tablets and phones in landscape mode */
@media all and (max-width: 980px) {
 body { font-size: 14px; }
}


/* Media query for mobile phones in portrait mode */
@media all and (max-width: 479px) {
 body { font-size: 12px; }
}

/* Setting the font size for title elements: 1em = the body font size px value */

h1, .et_pb_section .et_pb_text h1 {
 font-size: 3em;
}

h2, .et_pb_section .et_pb_text h2 {
 font-size: 1.6em;
}

h3, .et_pb_section .et_pb_text h3 {
 font-size: 1.4em;
}

h4, .et_pb_section .et_pb_text h4 {
 font-size: 1.3em;
}

h5 {
 font-size: 1.2em;
}

h6 {
 font-size: 1em;
}

The Typography for Divi webinar was just a small taste of the incredible knowledge that SJ James has. As one of the trailblazers in the Divi community, SJ James has years of experience with the Divi framework and certainly knows how to work well with it.

If you loved the content of the webinar and loved learning from SJ, then we have some great news for you!

Divi Space has just launched the Transforming Divi with CSS & jQuery Course! Grab your seat, the course will open on the first of May (early bird discount below), and we’d love for you to join us! Here is a sneak peek of whats included in the course:

Here you can create the content that will be used within the module.