Sometimes a little extra knowledge can go a long way when talking with your website designer. Today's topic is discusing the differences between type display styles and HTML/SEO Header Tags, such as H1, H2, H3, H4, H5 and H6.
Five Type Style Roles
In modern responsive website design, type styles are defined by five roles. The roles are classifed as: Display, Headline, Title, Body, and Label. Below we will take a look at examples of each of these. Visual hierarchy may be communicated through differences in font, font weight, font size, font style (color or emphasis), line height, and letter spacing. As you can see from some of the screenshots below, this is highly subjective and may vary from project to project. Visual hierarchy should not be confused with search engine or HTML structures of H1, H2, H3, H4, H5, or H6 at this point.
Display
The term Display in typography refers to any font that is specifically designed for use in large sizes. You generally identify these as really large text shown on a website, in the top hero section or large section dividers on the home page. In the context of visuals, Display serves as a counterpart to Body, showcasing distinct stylistic variations that make Display fonts more suitable for larger text settings. These variations may include increased stroke contrast and tighter spacing. Additionally, Display is a broad term encompassing decorative typefaces, making it a helpful category when selecting fonts from an extensive library.
Display fonts encompass a wide range of styles and shapes, spanning from inlined, script, ultra-bold, and ultra-light, to distressed or hand-drawn, drawing inspiration from a diverse array of genres. Display typefaces are commonly utilized for titles, headings, logos, or any content requiring a visually striking and expressive design.
Display type can further be broken down into large, medium and small based on the screen sizes.
Headline
The term Headline in typography refers to a font that will be used to display headlines through out a website. Headlines are best-suited for short, high-emphasis text on smaller screens. These styles can be good for marking primary passages of text or important regions of content.
Headlines can also make use of expressive typefaces, provided that appropriate line height and letter spacing is also integrated to maintain readability.
Title
The term Title in typography refers to any font that will be used to display a title. This is sometimes labeled as Subtitles. Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. For example, consider using title styles to divide secondary passages of text or secondary regions of content.
Body
The term Body in typography refers to any font that will be used to display the main text or content body of a website. It’s typically used for long-form writing as it works well for small text sizes.
Use typefaces intended for body styles, which are readable at smaller sizes and can be comfortably read in longer passages. Avoid expressive or decorative fonts for body text because these can be harder to read at small screen sizes.
Typical size font for body is 16px or 18px.
Label
The term Label in typography refers to any font that will be used to display labels. Label styles are smaller, utilitarian styles, used for things like the text inside components or for very small text in the content body, such as captions.
Buttons, for example, use the label large style.
HTML Header Tags
Now that you have some basic understanding of Type Style Roles, we will next begin discussion of HTML structures of H1, H2, H3, H4, H5, or H6. The one thing to remember is that Header Tags could be added to any of the Type Style Roles that we previously discussed but as a good practice header tags generally are only appropriate with Display, Headline and Title role styles.
In this example below you can see there are six lines of text, each of them the same size, but each is using one of the standard header tags and shown on in the colunn to the right (or below on mobile). Font-size, font-weight, color or emphasis has no bearing on HTML Header Tags. These are purely a behind-the-screens code that is used by SEO robots and screen readers to help understand the levels of context within the body of the page.
Headline Using an H1 Tag
Headline Using an H2 Tag
Headline Using an H3 Tag
Headline Using an H4 Tag
Headline Using an H5 Tag
Headline Using an H6 Tag
<h1>Headline Using an H1 Tag</h1>
<h2>Headline Using an H2 Tag</h2>
<h3>Headline Using an H3 Tag</h3>
<h4>Headline Using an H4 Tag</h4>
<h5>Headline Using an H5 Tag</h5>
<h6>Headline Using an H6 Tag</h6>
There are some basic accepted rules that should always be followed with header tags:
- There should be only 1 (ONE) H1 tag on a page. This is almost always the page title.
- You shouldn't skip levels, for example an H4 should only appear within a section that includes and H3. An H3 should only be included in a section that has an H2.
- You can have as many H2, H3, H4, H5 or H6's as necessary.
- Rarely does content breakdown past H3 or H4 levels.
Font scale / size
Now that you have some basic understanding of Type Style Roles AND HTML Header Tags, next we will begin discussion of Font Scale / Size that is commonly used with H1, H2, H3, H4, H5, or H6 title tags to add in visual reading structure of a website page.
Font sizes can come in a variety of units, such as px (pixels), em or rem. I prefer using em for the websites we develop as px has accessibility issues, that don't allow the user to increase the font size on their browser. Standard size body text is generally 16px or 18px for most internet sites today. I always use 18px as the standard base size. A free tool for converting any pixel size into em is available here.
A typographic scale is used to create a balanced and friendly font sizing, which uses a range of type sizes related to each other since they grow by the same ratio.
This method will help develop a type system that is scalable and adaptive. A great free tool can be used to calculate the scale for you.
I generally prefer to use the 1.250 Major Third scale when designing websites as visually it provides enough difference without be exaggerated when you get to the large items in the type scale.
Examples using the 1.250 Major Third scale
Headline Using an H1 Tag - 3.052em
Headline Using an H2 Tag - 2.441em
Headline Using an H3 Tag - 1.953em
Headline Using an H4 Tag - 1.563em
Headline Using an H5 Tag - 1.25em
Headline Using an H6 Tag - 1em BOLD ALL CAPS
Body copy using 1em with a font weight of 400 which is considered normal. Almost all fonts choosen will have a font weight of 400. In addition some fonts have weights of 100, 300, 500, 600, 700, and 900.
Body copy using 1em with a font weight of 100 which is considered normal. Almost all fonts choosen will have a font weight of 100. In addition some fonts have weights of 100, 300, 500, 600, 700, and 900.
Body copy using 1em with a font weight of 300 which is considered normal. Almost all fonts choosen will have a font weight of 400. In addition some fonts have weights of 100, 300, 500, 600, 700, and 900.
Body copy using 1em with a font weight of 500 which is considered normal. Almost all fonts choosen will have a font weight of 400. In addition some fonts have weights of 100, 300, 500, 600, 700, and 900.
Body copy using 1em with a font weight of 700 which is considered normal. Almost all fonts choosen will have a font weight of 400. In addition some fonts have weights of 100, 300, 500, 600, 700, and 900.
Body copy using 1em with a font weight of 900 which is considered normal. Almost all fonts choosen will have a font weight of 900. In addition some fonts have weights of 100, 300, 500, 600, 700, and 900.
Small Display Size - 3.815em
Medium Display Size - 4.768em
Large Display Size - 7.451em
Interested in discussing this topic more and learning how we could apply this knowledge with your new or existing website? Let's chat. Book a free consultation with us.
Related Posts
