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.

Leave a Reply

Your email address will not be published. Required fields are marked *