This works if you are using LESS (CSS pre-compiler). Then all you have to do to change your font-sizes is to change @baseFontSize.
// This allows you to easily change // the font size across the entire site // by only adjusting the @baseFontSize value @baseFontSize: 10px; // changing this affects each element in your site (if you are using the mixin below) // Font size mixin for LESS .font-size(@sizeValue) { @remValue: @sizeValue; @pxValue: (@sizeValue * @baseFontSize); font-size: ~"@{pxValue}"; font-size: ~"@{remValue}rem"; } // Examples of using the mixin in your LESS file… html { // set base font size (all font-size declarations are rem so they point to this) font-size: @baseFontSize; -webkit-text-size-adjust: auto; -ms-text-size-adjust: @baseFontSize; } body { .font-size(1.9); // 19px if @baseFontSize is 10px } h1 { .font-size(3.2); } h2 { .font-size(2.6); } h3 { .font-size(2.2); } See the Pen Font sizes using REM by William (@bigwilliam) on CodePen.
