The incredible versatility of the Divi default font

By default, the Divi Theme uses Open Sans as the font for all headers and paragraph text. You may sometimes find it boring, but hopefully after looking at this, you’ll be filled with ideas on how to jazz it up. We offer you five examples of the default text and the CSS we used to change it.


1. Try auto capitalizing the first letter in headers


2. This chunky look is great for headers


3. A little extra space adds a touch of class


4. “Slanted text is good for quotes etc and a different background style can help make text pop. this is also a good trick for code blocks in tutorials and things like that.”


5. Long headers? Reducing the space between letters can make sure you don’t fall onto a hundred lines…


And here’s the CSS we used…

p.demo-one {
 font-size: 18px;
 text-transform: capitalize;
 font-weight: 600;
 letter-spacing: -0.5px;
p.demo-two {
 font-size: 28px;
 text-transform: uppercase;
 font-weight: 900;
 letter-spacing: 0.5px;
p.demo-three {
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 24px;
 font-weight: 100;
 word-spacing: 2px;
p.demo-four {
 font-style: italic;
 font-size: 30px;
 font-weight: 100;
 background: #e3e3e3;
 border-radius: 10px;
 border: 1px solid #b3b3b3;
 box-shadow: inset 0 0 25px #303030;
 padding-top: 14px;
 padding-right: 20px;
 padding-bottom: 14px;
 padding-left: 20px;
 line-height: 40px;
p.demo-five {
 color: #000000;
 font-weight: bold;
 line-height: 30px;
 font-size: 25px;
 text-transform: uppercase;
 letter-spacing: -1px;
 border-bottom: double 10px;
 padding-bottom: 10px;

By no means meant as the ‘be all’ and ‘end all’ of what is possible with Open Sans and CSS, but hopefully these five examples will give you a good jumping off point. Happy coding!

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.