Fonts Partially Responsive

Yes, even letter-spacing gets responsive love in Beard. Why would you need responsive letter-spacing? Whenever spaced out text changes in size, it's helpful to have the letter-spacing change with it. These helpers make it easy to do so in a similar way to the font-sizing helpers.

Font Family Helpers Not Responsive

Style Class Default Stack
Sans Serif .sans 'Helvetica Neue', Helvetica, Arial, sans-serif
Serif .serif Merriweather, Georgia, serif
Code .code Consolas, Monaco, 'Andale Mono', monospace


<code class="code">Help</code>

Note: The font family helpers are not responsive. That would just be silly.

Font Weight Helpers Not Responsive

Weight Value Classes
Thin 100 .fw1 or .fwthin
Extra Light 200 .fw2 or .fwxlight
Light 300 .fw3 or .fwlight
Normal 400 .fw4 or .fwnormal
Medium 500 .fw5 or .fwmedium
Semibold 600 .fw6 or .fwsemibold
Bold 700 .fw7 or .fwbold
Extra Bold 800 .fw8 or .fwxbold
Black 900 .fw9 or .fwblack


<p class="fw8">This text would be really bold</code>

Font Sizing Helpers Responsive

Beard offers 17 levels of font-sizing. These helpers are responsive to make sizing easy across breakpoints.

Name Class Example
Font Level 1 .ft1 Hi
Font Level 2 .ft2 Hi
Font Level 3 .ft3 Hi
Font Level 4 .ft4 Hi
Font Level 5 .ft4 Hi
Font Level 6 .ft4 Hi
Font Level 7 .ft7 Hi
Font Level 8 .ft8 Hi
Font Level 9 .ft9 Hi
Font Level 10 .ft10 Hi
Font Level 11 .ft11 Hi
Font Level 12 .ft12 Hi
Font Level 13 .ft13 Hi
Font Level 14 .ft14 Hi
Font Level 15 .ft15 Hi
Font Level 16 .ft16 Hi
Font Level 17 .ft17 Hi


<h1 class="ft2 md-ft4 xlg-ft12">This Headline Gets Bigger With Space!</h1>