CSS increase font size

Question

I'm a no expert in CSS, but have this task to increase font size on the site. The site uses a downloaded CSS-theme. As I see there is a single file main.css which contains definitions of fonts. In other css-files font-size is set using percentages.

However, there are 102 matches for the word font-size in main.css itself, because it sets sizes for all possible html elements and their combinations, like

 body { font-size: 13px; }
 h1 { font-size: 32px; }
 h1.smaller { font-size: 31px; }
 h2 { font-size: 26px; }

and so on.

I am thinking to write a script that would extract values of font-size $1 and replace them with $1+1.

In a while, probably there is a more elegant solution? Maybe I can redefine font sizes some way using CSS itself?

Answer 1

I used the following PHP script to convert all font-size: [0-9]+px values into em:

<?php

$filename = "MyCss.css";

$css = file_get_contents($filename);

$css = preg_replace('/font-size\s*\:\s*([0-9]+)\s*px/ie', '"font-size: " . ($1/16) . "em"', $css);

file_put_contents($filename, $css);

Your example CSS above became:

body { font-size: 0.8125em; }
h1 { font-size: 2em; }
h1.smaller { font-size: 1.9375em; }
h2 { font-size: 1.625em; }

I'd then recommend setting a baseline font-size on the HTML element:

html { font-size: 16px; }

Then, if you want to globally affect all font sizes on the page, you can change this single value, and all fonts using em units will scale.

You could also use percentages if you'd rather, but em's are usually preferred.

(Sorry, Ruby is one of the few languages I don't know)