Husk

A CSS framework for designers

Typography Demo

This browser does not support Husk. Sorry!
Click here for more information
We can't tell if this browser supports Husk. Sorry!
Click here for more information
Easy, common typographical styles

Husk's Type.css is designed to let you easily manage your webpage's typography when, and only when, you need it. To activate Type.css, simply add the husktype class to any element you want to style, or whose children you want to style. This means you can apply Type.css to a whole page simply by adding the husktype class to the <HTML> element.

Headings

Type.css headings follow a visual layout that immediately and consistently sets them apart from normal text, by using different typefaces, different weights, and a horizontal rule.

Heading Level 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus enim sed nibh congue gravida.

Heading Level 2

Pellentesque ut libero tincidunt, tincidunt quam quis, aliquam urna. Sed suscipit odio justo, ultricies.

Heading Level 3

Iaculis sapien rhoncus blandit. Quisque sit amet egestas dui. Aenean sit amet nisi fringilla, bibendum.

Heading Level 4

Lectus rutrum, sollicitudin libero. Aliquam faucibus, dolor ornare mattis vehicula, lectus eros vehicula.

Heading Level 5

Nulla, ac hendrerit mauris ipsum ac dui. In vitae sapien non purus iaculis facilisis et vitae ipsum.

Heading Level 6

Nunc at vehicula turpis. Vestibulum vulputate elementum massa quis dapibus. In hac habitasse platea dictumst.

Font Sizes

Type.css gives you the ability to easily set the relative size of fonts without using the dirty style attribute. Simply apply one of the following classes to whatever element you wish:

Specific sizes

¼× (font-size: .25em or 25%)
font-1qx (1 quarter ×)
font-_25x (.25 ×)
Example
½× (font-size: .5em or 50%)
font-1hx (1 half ×)
font-2qx (2 quarters ×)
font-_5x (.5 ×)
Example
¾× (font-size: .75em or 75%)
font-3qx (3 quarters ×)
font-_75x (.75 ×)
Example
1× (font-size: 1em or 100%)
font-2hx (2 halves ×)
font-4qx, (4 quarters ×)
font-1x (1 ×)
Example
1¼× (font-size: 1.25em or 125%)
font-1-1qx (1 and 1 quarter ×)
font-5qx (5 quarters ×)
font-1_25x (1.25 ×)
Example
1½× (font-size: 1.5em or 150%)
font-1-1hx (1 and 1 half ×)
font-3hx (3 halves ×)
font-1-2qx (1 and 2 quarters ×)
font-6qx (6 quarters ×)
font-1_5x (1.5 ×)
Example
1¾× (font-size: 1.75em or 175%)
font-1-3qx (1 and 3 quarters ×)
font-7qx (7 quarters ×)
font-1_75x (1.75 ×)
Example
2× (font-size: 2em or 200%)
font-4hx (4 halves ×)
font-8qx (8 quarters ×)
font-2x (2 ×)
Example
3× (font-size: 3em or 300%)
font-3x (3 ×)
Example
4× (font-size: 4em or 400%)
font-4x (4 ×)
Example

Vague sizes

font-size: smaller
font-smaller
Example
font-size: xx-small
font-xx-small
Example
font-size: x-small
font-x-small
Example
font-size: small
font-small
Example
font-size: medium
font-medium
Example
font-size: large
font-large
Example
font-size: x-large
font-x-large
Example
font-size: xx-large
font-xx-large
Example
font-size: larger
font-larger
Example

Font weights

Much like font sizes, Type.css provides classes to easily change font weights:

Ultra Light (100)
font-ultra-light
font-100
Thin (200)
font-thin
font-200
Light (300)
font-light
font-300
Normal (400)
font-roman
font-medium
font-normal
font-400
Bold (500)
font-bold
font-500
Heavy (600)
font-heavy
font-600
Black (700)
font-black
font-700

Transformations & Decorations

Plain text is boring. Type.css also lets you transform it! Use these classes to add text transformations and decorations:

Decorations

Overline
text-overline
Strikethrough
text-strike
text-strikethrough
text-line-through
Underline
text-underline

Transformations

Uppercase
text-uppercase
Lowercase
text-lowercase
Capitalize
text-capitalize
text-title