Typography

Fusion includes a set of base typography styles which set up a structure of sizes and vertical rhythm for easy subtheming. You can override specific sizes as needed.

Fusion uses percentages so your font sizes scale correctly when you increase or decrease the base font size for your theme. We don’t use ems because it is a common misconception that ems are not relative sizes, and when stacked can lead to unpleasant results.

Changing default font size

The base font size is set in your theme’s .info file which is located in your theme’s directory along with all your theme files (Usually /sites/all/themes/themename). If you open your theme’s .info file, you will see something similar to this:

This is the line of code that is specifying the default font size for your theme:

Once you locate that line of code you can change it to any number you like. For example if you want the base font size to be 14px you would change that line of code to:

Once the change is made you can save the updated .info file and go back to your website. Now you need to clear the cache on your Performance page and then navigate to the theme’s configuration page.

From here you need to manually change the setting for the default font size. The setting is located under “Theme Specific Settings > Fusion Theme Settings > General Settings > Typography > Font Size”. You should now see an option to select “14px - Theme Default”. The bit of text after “14px” means that the font size is now the theme’s default font size.

Changing specific font sizes

You can also change font sizes for any element or CSS class/ID in your theme. To calculate specific font sizes you take the font size you want it to be divided by the base font size. The total is then used as a percentage.

For this example, we want to change the main page title to 26px.

Example: 26px/14px = 185.7%

Now that we have the percentage for the font size of the title, we need to create a bit of CSS to apply that change.