The Typographic Scale

Finding a correct hierarchy goes beyond type in webpage design, but type is still a large contributing factor. Don't just randomly choose text sizes, only keeping in mind that headers should be bigger than paragraphs. A correct typographic scale can do wonders with creating balance and correct hierarchy that is both visually appealing and organized.

A scale is important because it establishes a typographic hierarchy that improves readability and creates harmony and cohesiveness within the text.

An example of a typographic scale defined in CSS:

h1 {
	font-size: 48px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 14px;
}
						

The p tag represents the paragraph body copy, any text within a p tag <p> all text inside here </p> will be set to the 14px specified and therefore the scale will work from this.

For more detailed explanations of the typographic scale, please use the links provided.