Choose font-family with mixins depending on fontsize

This is a example of a mixin that will output a certain font-family depending on the size being sent in as an argument. IN this case its 18px so the font-family will be Georgia, serif

@mixin family($size){
    font-size: $size;
  @if $size <= 16px {
    font-family: Arial, sans-serif;
  } @else if $size <= 24px {
    font-family: Georgia, serif;
  } @else {
    font-family: Helvetica, sans-serif;
.switch {
	@include family(18px);

Add your comment