Webinar Recap – Controlling Typography with CSS for Divi

On Thursday the 12th of April, Divi Space founder SJ James hosted a fantastic Facebook Live session where he 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!

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 SJ 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, SJ offers a full demonstration of writing font sizes using ems within the style sheet of his Divi child themes.

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 Vimeo, 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!

The Divi Space Transforming Divi with CSS & jQuery course opens on May the 1st, 2018! In the course, you’ll learn how to use powerful CSS and jQuery applications to build incredible Divi websites.

For more information or to sign up for the course, head over to the Divi Space store now!

 

Lisa-Robyn Keown

Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa.

Previous post
Next post

1 Comment

  1. Troy

    I just added this CSS to my child theme and it isn’t working. Headline font size is still incredibly huge on mobile.

    Any suggestions if the CSS doesn’t work?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *