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

Example:


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

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


Font Weight Helpers Not Responsive

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

Example:


<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 .ft5 Hi
Font Level 6 .ft6 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

Example:


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