Organizing content is a unbelievably common task for developers: for example, they are making actual design decisions when creating a confirmation e-mail, developing a backend help system, organizing the search results page on a website, or when they display a complex algorithm output for the end user.
Yet, organizing content is one of the tasks that pure web developers often fail to master during their career: many times great developers are heard closing themselves behind the curtains of “I’m not really good at styling content”, and then passing the task of “making the data look good” to design specialists or graphic designers.
Surely, to achieve great results, the contribution of professionals in data and content presentation is often necessary. But there are multiple occasions where this step is not feasible, and in those cases developers are left alone for the task. In some cases, as in many open-source efforts, the entire team working on a project doesn’t count on specialized design skills, and very often this leads to poor interfaces and poor content organization and presentation.
Nevertheless, I found that few notions are enough to totally change the quality of content organization and presentation on the web (and the same concepts can be applied to every text document), and they are simple enough to be applicable even by developers who don’t really like to meddle with design.
The following short list, focusing mostly on typography, doesn’t aspire to be complete, but aims to be a handy set of steps that developers can follow to better organize their content, being this the output data of an algorithm, their resume, or a company presentation web page.
Let’s assume that you start with some data you need to organize in a page. Not all the data has the same importance: there is an information hierarchy that you need to understand well to properly organize the content. Sometimes the hierarchy is subjective, other times it is purely objective: in any case, you have to establish one and work hard to convey that information to the readers.
For the sake of this article, we’ll assume we need to organize the display of a blog post, which includes a title, the author’s name, the publish date, the post’s category and its body copy. Before starting to style the content, we need to determine its hierarchy and identify information groups.
We can assume that the title should be very clear, and that it is someway linked to the author’s name: in fact, those are the information you could display on a index page too (in particular if it’s a multi-author blog). The publish date and category can be considered “metadata”, and they are surely less important for the reader than the title. Finally, we can consider the article’s body copy as an independent block, and we choose to display it with less emphasis than the title.
Let’s see how to do this.
The first tool we can use to communicate information hierarchy and grouping is space.
Using space, we can create groups of data elements or separate them. Keep two elements near and the readers will perceive them as someway connected; keep them distant and they will appear not to share any meaning.
In our example we can use space in a very straight-forward way to achieve a good grade of content styling without much effort.
As you can see, I’ve grouped the main data elements (title and author) and separated them from the article body using an empty line. The metadata are positioned on the right, logically separated from the rest. Using only space, the information hierarchy is already clear.
- Left-to-right readers will give more importance to information displayed on the left side of the page;
- Differences in text alignment can be great ways to logically separating groups of elements;
- You can use different distances between elements to communicate relations between them: their distance measures should be someway related to themselves (for example, use distances that are proportionally multiple of themselves: 5px, 8px, 12px, 18px, 27px, 40px…). This will apply also for the next rule, “Dimension”.
When you are done using space to organize your content, you can use font dimension to enhance importance differences between elements or group of elements in your page.
It’s really important to choose a set of harmonious font dimensions and to stick to it: this care often draws the line between an amateurish design and a professional one. A very easy rule of thumb is to use font dimensions that are sequentially increased by about 50%. For example: 5pt, 8pt, 12pt, 18pt, 27pt, 40pt.
In our case, the body copy is 12pt. We want to make the title more evident, and to reduce the importance of date and category.
As you can see in the image, I’ve made the title bigger (18pt, which is 50% more than the body copy), and reduced the publish date and the category to 8pt (so that the body copy is about 50% bigger).
4. Font Style
Different font styles can be used to communicate that there is a qualitative difference between two elements in the text. Examples of font styling can be bold, italics, and underline.
In our blog post, we can use font styling to highlight the difference between the title and the author name, and to differentiate the publish date from the category.
In general, we can say that bold and underline make the text stand out (giving to it a sort of “power up” in the information hierarchy), while italics makes the text simply different from the rest, while the impact on hierarchy depends from the context and from how much of italics you use in your content.
Color is often overrated when styling content. In the first years of the Internet, web pages were filled with multicolor texts that could seem nice at first, but that very soon led to headaches and frustration. Now that it’s (almost) clear that content styling should be used only when needed to convey meaning, color should be seen with a diffident eye.
The first notion that we can agree on is that text with different colors are perceived as someway ungrouped. The second one, is that we must be careful when choosing colors, because, depending on the context, each one of them can have an intrinsic meaning (the classic example here is white, pure for the western world and associated with death in China).
For what concerns content organization and styling, we should learn to use color only when necessary, carefully choosing the shades depending on the meaning we want to convey. And it’s not necessary to have a multicolor text for using color as a tool of content organization: just playing with saturation, or opacity, we can bring an element up or down in the information hierarchy.
In our example, the publish date and the post’s category seemed a bit too “strong” for the importance they have in our hierarchy. Lowering their saturation (making them gray) I’ve lowered their importance too, and enhanced their logical separation from the rest.
Wrapping it up
As we saw, organizing and styling content can be done using a small set of rules that unfold depending on the information hierarchy you want the content to convey.
Obviously there is a lot more about this matter, going much further than typography and leading to design on its whole. If you’d like to go deeper, a great book to start from is “Design for Hackers”, by David Kadavy. And even if design isn’t one of your interests, the five rules above will help you producing better content without any extra effort.