How Strategic Hierarchy Coding Helps Your Audience
Extracting meaning from words and sentences is only part of the reading process. We also need to logically move through text, images and other elements from the most to the least important on a page or screen. Stress increases when you only have time to skim read and are forced to skip details in the hope of catching all the pertinent points.
A deal breaker on making the difference between material that is easy to read, navigate and enticing is visual hierarchy. This is the formatting the developer, designer or content creator uses to organize text, pictures and other visual elements and guide the reader’s eyes through it.
To do this, they apply specific characteristics, such as size, colour, contrast and position, to make some elements more or less prominent than others and categorize them. This formatting helps the reader draw meaning from relationships between elements and find what interests them. A sub-set of this is typographic hierarchy, where characteristics are applied to each part of the text. This can range for example from one prominent coloured headline, set in bold weight, in the largest point size to mandatory but less relevant copyright text rendered in black, light weight, six point text.
Print newspapers demonstrate the value of visual and typographic hierarchy in the simplest way because without it, we’d be overwhelmed with identical black letters forming a sea of grey.
Visual and typographic hierarchy is equally, if not more important, in digital copy but requires additional considerations, particularly as its appearance will vary depending on the browser and device the reader uses to view it.
To ensure that the different hierarchy levels are clearly displayed on a digital screen, you must:
Use legal syntax to specify typographic characteristics or declarations within RuleSets as they are called in Cascading Style Sheets (CSS), as well as corresponding 'attributes' for elements in the HTML documents.
Include workaround RuleSet coding CSSs for browsers that may not recognize or have not adopted the specific tag yet.
Consider the hierarchy of the web pages themselves and how each element can be altered to accommodate a subsequent element’s code. For example, a early declaration for all body text (body) that sets a color value as grey can be overwritten with a more detailed RuleSet for sub-set element, such as a line item (li), that's subsequently documented in the CSS. Also, if an element, such as a paragraph, is nested within another element or ‘parent,’ such as a div in the HTML, it will inherit the attributes of the parent.
Use relational measurement units, such as em, which is generally 16 pixels high or percentage (%) for text, versus specific pixel measurements. Similarly, use scalable declarations for objects or space declarations, such as ‘max-width for containers, to create screens that are responsive and can effectively display on varied devices, and maintain hierarchy proportions.
Build additional RuleSet layers into coding for mobile devices to tell readers how to interact and make sure they can do so. For example, this includes including drop-shadows to highlight buttons and ample spacing around them to ensure the reader can easily tap them.
Fortunately, tools for setting typographic hierarchy were set-up from the onset in HTML 1.0 through heading or ‘h’ tags for heading elements. These tags enable you to establish headings, ranging from <h1> for the most important content, to <h6> for the least important. Heading elements do more than control how the typographic hierarchy will be displayed. They also tell search engines ‘how’ to index the organization and structure of the web pages so that others can find it on the Internet.
There are default values for each heading element that most browsers will use to display them. However, you can also adjust or append these values for the specific scenario and its purpose by setting up specific declarations in the CSS.
One of the key principles of layout design is to keep it simple, often by limiting a document to two typefaces and three or four point sizes. So even though there are six heading tags, it’s not advisable to use all six. In addition to heading elements, RuleSets are also set up in a document’s CSS to define attribute values for other elements, such paragraphs, footers and captions.
This Smashing article (Figure 1) shows how <h1> to <h4>, as well as other elements can be used to show visual, particularly typographic hierarchy on a web page.
As per the way web coding works, the CSS serves as the directions for a how elements on a web page or pages will look. As such, specific details, such as the font, colour and point size, of block-level items, like paragraphs (<p>), that begin on new lines are defined once in the CSS. The specific CSS is then named in the main HTML document (ideally in the head section). In contrast, the main HTML document contains the web content, such as text copy and images, that are displayed according to the directions outlined in the named CSS.
So looking at the HTML for this page (Figure 2), we can see that: <h1> is used for the Smashing blog title. The RuleSet in the corresponding CSS specifies that this text will be rendered at 100% of the <h1> default size, which is 2em or two times the size specified for the body size in the CSS. The margin defaults to the first value of zero set as the element.style, at the top of the CSS.
Looking at Figure 3, we can see that <h2> is used for the article title (Taking A Closer….). With typographic hierarchy, it's important to clearly differentiate the important from the less important elements and so if size is an attribute used to do this, the variance should be significant enough to make a visual impact. In this case, the h2 is set as 2em or two times the default and bolded with a font-weight of 700. In the h2 RuleSet circled at the bottom, there is a font size of 1.5em, which is overwritten by the previous RuleSet for h2. It's also worth noting that the li (line item) class is used for the author's name and date and rendered at the smaller, default size just below the <h2> tag in the HTML.
In Figure 4, <h3> is used for the article sub-headings (beginning with The Aspects Considered) and at a size of 1.5em (as specified in the CSS section at left) that much smaller than the h2 tag. In this same figure, there is a <figcaption> tag circled in the HTML and its corresponding CSS declarations. As it is of significantly less importance than even the body text, it's declared at .875em, or less than the body text, to help visually depict the hierarchy.
In Figure 5, <h4>is used for tertiary sub-headings in the latter part of the article to organize additional ‘ephemera’ points that are hard to evaluate. As the name suggests, these points may not even be worth saving for the long-term. To clearly position them as add ons in the hierarchy, the CSS RuleSet declares them to be rendered in contrasting san-serif font from the rest of the article, as well as the 100% default text size.
This is a very simple example of how visual hierarchy, particularly typographic hierarchy, is reflected in HTML and CSS.
However, as the industry evolves, there are ongoing discussions about the best scale, including text size, xheight and spacing for each heading element. It is particularly challenging to maintain visual hierarchy in responsive designs, which are scalable to mobile devices and tablets.
In response, designer, web strategist and author Jason Pamental has proposed a modern scale for body text and h tags that account for proportion changes across multiple devices. I suspect this is just the beginning as design and coding experts work toward the best solutions to maintain visual and typographic hierarchy in HTML and CSS in varied platforms.
