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.
0
