Fonts
Description
Funding Circle uses a font scaling method called the ditonic golden ratio.
In order to make sure you are using the correct font size, you can send a note (parameter) to a mixin called font()
The font() mixin also will automatically adjust the line-height to the correct value (the line-height is the first multiple of the get-const(config, baseline)).
If you want to disable the line-height, set the 2nd parameter to false.
Options for font size (t-shirt sizing):
x-small, small, medium, large, x-large, 2x-large, 3x-large, 4x-large, 5x-large, 6x-large
E.g. of usage:
.example-element {
@include font(x-large, [$line-height: true/false]);
}
Usage
Usage example
Variations
The variations are modifier classes that can be applied on the default element.
font-size-x-small - font-size .625rem, line-height 1rem
@include font(x-small);
font-size-small - font-size .8125rem, line-height 1rem
@include font(small);
font-size-medium - font-size 1rem, line-height 1.5rem
@include font(medium);
font-size-large - font-size 1.25rem, line-height 1.5rem
@include font(large);
font-size-x-large - font-size 1.625rem, line-height 2rem
@include font(x-large);
font-size-2x-large - font-size 2.0625rem, line-height 2.5rem
@include font(2x-large);
font-size-3x-large - font-size 2.625rem, line-height 3rem
@include font(3x-large);
font-size-4x-large - font-size 3.3125rem, line-height 3.5rem
@include font(4x-large);
font-size-5x-large - font-size 4.25rem, line-height 4.5rem
@include font(5x-large);
font-size-6x-large - font-size 5.375rem, line-height 5.5rem
@include font(6x-large);
Code example
<div class="font-size ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>