Utilizing percentage fonts, and percentages overall, allows for more flexibility when writing responsive websites. It might be easy enough to change the pixel values for each element in your media queries that requires it, but the work is already done when you implement percentages so why not leverage it? Percentages get their value from the closest parent element which has the same key value defined.

<div>
	<h1>100%</h1>
	<h2>150%</h2>
</div>

div { font-size: 12px; }
h1 { font-size: 100% }
h2 { font-size: 150% }

The example shows how defining the parent value at 12px seeps down into its children’s percentage value. The h1 is 100% of 12, so it has the same font-size of 12 pixels. However the h2 element has a font-size of 150%, as a result its pixel value renders as 18 pixels. Using this we can scale all the font values of a page off one base value. Knowing that, we can modify just the base to increase proportionately all the fonts inside our page. This is where media queries make things like dynamic font size quick and easy. By just changing the base, all the percentages get updated with minimal code.

@media all and (min-width: 800px) {
    div{ font-size:18px; }
}

In this example our base value would increase and all the percentage fonts would dynamically update. Going from a base of 12px to 18px.

Percentages moves responsive design forward, so its important to understand its concepts as it becomes more common place. Its concepts are basic and used correctly can lead to well crafted and thought out web standards applications.