<h1>Hamburgefonts</h1>
<h2>Hamburgefonts</h2>
<h3>Hamburgefonts</h3>
<h4>Hamburgefonts</h4>
<h5>Hamburgefonts</h5>
<h6>Hamburgefonts</h6>
<button>Button Text</button

@import url(https://rsms.me/inter/inter.css);
html { font-family: 'Inter', sans-serif; }

$base-color: #56E39F;
$blue: #465775;

$font-weight-light: 200;
$font-weight-black: 900;

@mixin font-xxxl {
	font-size: 60px;
	line-height: 1.1;
}

@mixin font-xxl {
	font-size: 45px;
	line-height: 1.22;
}

@mixin font-xl {
	font-size: 35px;
	line-height: 1.13;
}

@mixin font-l {
	font-size: 27px;
	line-height: 1.37;
}

@mixin font-m {
	font-size: 20px;
	line-height: 1.5;
}

@mixin font-s {
  font-size: 16px;
  line-height: 1.5;
}

@mixin font-xs {
  font-size: 12px;
  line-height: 1.5;
}

@mixin font-xxs {
  font-size: 9px;
  line-height: 1.5;
}

 h1 {
	@include font-xxxl;
  font-weight: $font-weight-black;
  color: $base-color;
}

 h2 {
	@include font-xl;
}

 h3 {
	@include font-xxl;
}

 h4 {
  @include font-s;
  color: $blue;
}

 h5 {
  @include font-xs;
}

 h6 {
  @include font-xxs;
}

button {
  @include font-xxxl;
  background-color: $base-color;
  font-weight: $font-weight-light;
  border: none;
  padding: 20px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.