Preview

Headings

Ready

Docs
HTML
Assets

Headings are heavily customizable using variables on _config.scss.

By default, headings appear on the $font-secondary-items map. This means they will receive a different font style, and (if configured), a different bold weight.

Heading configurations

Heading-specific overrides can be set using $heading-font-weight, $heading-decorated-links and $heading-letter-spacing.

It is advisable to set $heading-decorated-links to false. Link decoration can obstruct legibility or interfere with your design when applied to big typefaces.

By default, $heading-letter-spacing will take a negative value to improve legibility.

Font sizing and vertical rhythm

Font sizing follows a type-scale based on http://type-scale.com/. Choose your $scale-ratio and it will be automatically applied to h1-h6 font sizes.

You can also set $h1-ritmo-lines to $h6-ritmo-lines. These variables take a number of ritmo lines and will be applied to the ritmo-font-size() mixin that will set the font size and line height of headings.

Why do I need to manually set the vertical rhythm?
Tweaking this values might seem overkill but the result is far more appealing and legible. The automatic and arithmetic ritmo.scss calculations result on excessive line height, specially on bigger sizes.

Helper classes

The <h1> to <h6> HTML elements can be mimicked using .h1 to .h6 classes.

Example




<h1>Main titles will usualy make use of heading one</h1>
<h2>Subtitules and main sections might need to use h2</h2>
<h3>H3 usually finds its place on nested sections inside a bigger block</h3>
<h4>In case you need further sectioning, use an h4. You can go down any number of levels. Well, actually, not</h4>
<h5>Rarely you will need a heading five. But if you need it, you can use it. This is really nested and the font-size is very decreased</h5>
<h6>Heading six is rather unexpected. On this nesting level the font-size has dropped and is small, even compared with normal text</h6>

Assets

Filesystem Path: src/components/typography/headings/_headings.scss
Size: 804 Bytes


                                h1, .h1 { @include ritmo-font-size($h1-font-size, $h1-ritmo-lines); }
h2, .h2 { @include ritmo-font-size($h2-font-size, $h2-ritmo-lines); }
h3, .h3 { @include ritmo-font-size($h3-font-size, $h3-ritmo-lines); }
h4, .h4 { @include ritmo-font-size($h4-font-size, $h4-ritmo-lines); }
h5, .h5 { @include ritmo-font-size($h5-font-size, $h5-ritmo-lines); }
h6, .h6 { @include ritmo-font-size($h6-font-size, $h6-ritmo-lines); }

@if $heading-letter-spacing {
	h1,.h1,
	h2,.h2 {
		letter-spacing: $heading-letter-spacing;
	}	
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6  {
	color: get-color(text, heading);
	font-weight:$heading-font-weight;

	small {
		color: inherit;
		vertical-align: 0;
	}

	@if $heading-decorated-links == false {
		a {
			@include kill-link(get-color(text, heading));
		}
	}
}