CSS: Change typography

You can change the formatting of fonts like size and weight easily with CSS code.

CSS Commands:

You can change the font style (normal vs italic), the font weight (bold vs normal) and font size (em value) of any HTML element with custom CSS code:

.page-element {
font-weight: bold;
font-style: italic;
font-size: 1.5em;
}

You have to replace the .page-element class with the right CSS id or class which you like to change the font formatting. You can find out the right CSS id or class by using Firebug.

Examples:

Please note that CSS codes are different and depend on the theme you’re using. Most of the time our themes use the same CSS classes and ids, but different CSS styles for each page element.

Change font size of site title

#logo .site-title {
font-size: 3.0em;
}

Change font size and weight of navigation menus

#mainnav-menu a {
font-size: 1.2em;
font-weight: bold;
}

 


In case you need any help with CSS customizations, we can highly recommend these WordPress Customization Experts.