Font Settings - LESS

font-settings.md

Fonts

REM fallback for old browsers and set line-height

Mixin

//
// Fonts - REM fallback for old browsers and line-height
// --------------------------------------------------

// Font size
.font-size(@size: 14) {
  font-size: unit(@size, px);
  font-size: unit((@size * 0.10), rem);
}

// Line height
.line-height(@size: 20) {
  line-height: unit(@size, px);
  line-height: unit((@size * 0.10), rem);
}

// Font sets
.font(@font-size: 14; @font-weight: normal) {
  .font-size(@font-size);
  font-weight: @font-weight;

  & when(@font-size =< 30) {
    .line-height(@font-size * 1.75);
  }

  & when(@font-size > 30) {
    .line-height(@font-size * 1.15);
  }
}

Reset

html {
  font-size: 62.5%; 
}

Example

font, font-weight and line-height

// LESS 
h1 {
  .font(40, 700); 
}

// CSS 
h1 {
  font-size:40px;
  font-size:4rem;
  font-weight:700;
  line-height:46px;
  line-height:4.6rem;
} 

font only

// LESS 
h1 {
  .font-size(40); 
}

// CSS 
h1 {
  font-size:40px;
  font-size:4rem;
  font-weight:700;
  line-height:46px;
  line-height:4.6rem;
}