Hierarchies & Grouping Content

When I began designing the article layout on this website I wanted to take a deeper look at what exactly Bylines, Footnotes and Side-notes are and how they differ from primary content. So, this article aims to enlighten others as to what they are to and provide some guidelines on their styling.

Typographic Hierarchy

Typographic hierarchy is established through the use of different typefaces, weights and styles, when structuring a document. I have covered aspects of this in previous articles, Working with Modular Scales[1] and Tribal Alliances & Families in Type[2], which are worth a read too.

Early European typographers created entire manuscripts with a single font, size and colour along with hand drawn illuminations. Although these manuscripts still look beautiful in their own sense, they are difficult to read, not just because of the complex black-letter forms they were set in, but because the content all looks the same, causing the reader to become easily lost and confused within the content due to the lack of land marks.

As the craft developed typographers began to incorporate different font sizes based on a scale. These different sizes originally had names of their own rather than pt sizes[3]. Nowadays though, with digital type people can set type in pretty much any size they want so the use of scales has been largely over looked. This is bad, but thankfully scales have re-emerged.

Common Elements

A system was eventually established to help break up content into more structured forms, through the use of crossheads, left side-heads and right side-heads. These components are now commonplace in typography and successfully help us distinguish between separate content and sections.

Crossheads serve as subheadings throughout an article and appear after the main text heading. They are positioned in the centre of the measure and are typically set in small caps, but styles can vary, within reason[4]. If the heading is set to the left or right then it becomes a side-head.

When establishing headings they should be used as supplements and not just breaks in content. They are supposed invite the reader to continue reading and lead them through the article. It’s also important never to use the same styles for a main head and a subhead that is intended to identify a subgroup within the main heading, this disrupts the hierarchy.

Differentiating Content

When you have established the hierarchy of your content, you also need to consider how you group different content as well. you can think in terms of main content as in the actual article content and supplementary content as the meta data or information about the article.

The main content will always be comprised of headings, subheadings and body text. You can think of bylines and footnotes/references as the supplementary content which should be visually distinguished from the primary content so that readers can easily differentiate between them.


Footnotes, also known as bibliographies are used to tell readers where you got your information from and where it is referred to within your content. It also serves to help anyone continue researching the topic further if they wish. Footnotes help add credibility to what you are saying and it shows that you aren’t just making stuff up.

One of the most intimidating factors for me when it comes to creating footnotes is the referencing. It’s so time consuming and I’m always worried that I’m doing it wrong, but a friend of mine developed ReferenceIt which takes most of the hassle out of referencing. It uses the Harvard referencing system, so if you use any other system this may not be applicable to you.

It’s very important that you reference any work you use when writing. If you take information in the form of quotes, ideas or even if you’re only paraphrasing, this will ensure that you are not accused of plagiarism.


Bylines are used to display the author’s name, date of publication and other additional information like the authors profession or if the article is a revised edition or simply being republished again.

Bylines are traditionally placed between the main title and the content [5], but it’s also acceptable to place it at the very start or end of an article, as long as it remains consistent through all your articles. You can see the byline at the very start of all articles in this website, set in 19px Kepler Std light, 3px smaller than body text and in a much lighter colour to help distinguish it.


  1. [1]Phillip Patterson, 05/08/2013, Introducing Modular Scales [Type & Music], [online]. Available:http://typeandmusic.com/introducing-modular-scales/[09/08/2013].
  2. [2]Phillip Patterson, 01/08/2013, Tribal Alliances & Families in Type [ Type & Music ], [online]. Available:http://typeandmusic.com/tribal-alliances-families-in-type/ [09/08/2013].
  3. [3]Frank Romano, 01/09/2009, The History of the Typographic Point [Print History], [online]. Available:http://www.printinghistory.org/ publications/newsletter /APHA-newsletter-171.pdf [09/08/2013].
  4. [4]Mark Boulton, 18/05/2005, Five simple steps to better typography – Part 5 | Journal | The Personal Disquiet of Mark Boulton [Mark Boulton], [online]. Available: http://markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-5 [09/08/2013].
  5. [5]undefined, 19/01/2013, Define byline [Dictionary and Thesaurus], [online]. Available: http://byline.askdefine.com/ [09/08/2013].