Grid Layouts & Basic Typography in Terms of Function
Nearly every website presenting multiple pieces of information to its visitor utilizes a grid layout on its webpages. Grids allow for a minimalist solution for organizing information, and allow for a more structured and readable presentation. Similarly, several basic aspects of typography like typeface, point size, and weight are commonly used with the same goal. Perhaps the main difference from site to site is how these concepts are used. The how is often dictated by the website’s audience, and more importantly, what the website assumes about its audience. I’ve taken a look at several websites with the intention of comparing the use of grid layouts and basic typographic concepts in appealing to each website’s audience. I do not have access to any information about the specifics of every website’s target market, and I’ll be consulting mediabiasfactcheck.com (Media Bias/Fact Check News), where I am assuming a high rating of Factual Reporting dictates a more trustworthy source. My assumptions are also partly based on general knowledge of each brand and my observations.
Newspapers are an example of where information can have a somewhat normalized structure in terms of typography and layout: they often use serif fonts for their bodies of text and exaggerated, bold serif fonts for their titles, and their layout is nearly always a vertically-aligned grid. Assuming a newspaper is considered credible, its target readers are usually a familiar, returning audience, and therefore one which the source can trust to be attracted to its content and navigate its sections without excessive prompting. This trust is implied in several ways, the first being that many newspapers are subscriber-based, with a paywall restricting access to paying subscribers. This means these newspapers understand many of their visitors to be paying subscribers whom the newspaper trusts to make their own informed decisions, having already shown sufficient interest by subscribing.
Trust is also often dictated by the perceived factuality of a source. The below papers are examples of newspapers which all have a “HIGH” rating of Factual Reporting according to Media Bias/Fact Check News, many of which are also subscriber-based.
Their homepage grid layouts have been marked:
Before specifying why these examples may visually convey trust through their grid layouts and typographic decisions, the opposite may also help emphasize this idea. When a source is devoid of this audience trust, it can sometimes be reflected in their grid layout and typographic decisions, just as the above examples may convey trust. Below are several examples of “news” sources which ranked much lower on mediabiasfactcheck.com’s Factual Reporting metric, from “Mixed” to “Conspiracy/Pseudoscience/Fake News“:
Note: the National Enquirer’s website redirects to Radar Online, a publication under the same ownership.
As tabloid newspapers, the sources directly above are often considered untrustworthy. I believe the brands are not blind to this, and format their sites in such a way that the grid layout allows for less freedom in fewer and relatively larger grid sections. The space afforded by these sections then allows for capital-case and bold headers in sans-serif typefaces. These fonts are naturally easier to glance at, so coupled with some “clickbait”-filled content, they can be noticed within the short attention span of their broad audience. These papers’ success hinges on its ability to catch the eye of anybody in the checkout line at a supermarket (hence “supermarket tabloids”), or in this case, the internet equivalent of those browsing the web for any reason. This audience is unlike the more loyal audience of the former, more fact-based newspapers, whose grid layouts afford greater freedom to their more trusted readers. The non-tabloid newspapers feel their readers do not have to be limited to one eye-catching section for fear of their loss of interest, and we see a greater number of smaller, more evenly sized sections. If I had sufficient data, I might expect a decently strong negative RSquare value for a linear regression model quantifying audience size/returning customers and number of sections for each website (as predictor and response variable, respectively).
Because the dependable newspapers can assume their readers are loyal and came with the intention of browsing and spending time reading good content, their fonts carry different intentions than the tabloids’ too. The font usually has a serif typeface with a bold weight, in title-case for headers (unless typeset otherwise, such as small caps), and paragraph-case for bodies of text. The fonts are still effective in structuring the page in a way which clearly dictates hierarchy with font point size, weight, and style, but there is no need to force the reader’s eye to a certain header of capital letters.
The former newspapers also use sans-serif fonts very selectively. In fact, the only areas they are used for each newspaper are clickable text, mainly seen in the menu below the title. This is a powerful way to incorporate web interactivity into an originally-print source, and helps the reader to visually distinguish the flat text making up the content from the sans-serif navigational elements which the reader is likely familiar with on the web.
Fox News is another example of a source with “mixed” responses regarding factual reporting, and falls into a similar style-category to the tabloids:
Based on its function, Fox News appears to lay out its grid and font in a way which points their viewer directly at one section and headline. This example is less extreme than the tabloids, as there are a greater number of slightly more evenly-distributed grid sections, but it still follows a similar convention of capital-case, sans-serif, bold headers.
One interesting example in this conversation is Google News. Somewhat of a meta-news website or news search engine, Google News sources different news outlets on its pages. Though not ranked on Media Bias/Fact Check, it is generally considered factually sound while citing a broad range of news outlets. Its audience is even more broad than the supermarket tabloid audience assuming a similar group of users to the Google brand as a search engine, but its visual strategy for enticing users is much different than that of the tabloids. In keeping with their clean, minimal design, Google’s grid layout and typography are both moderately conservative:
Google News combines some visual strategies from both extremes of newspapers to present a clean, airy layout which still employs a subtle grid structure. The grid is easy to glance at as it holds fewer, more spaced-out sections than do the initial newspapers, but more sections than the tabloid papers. Just as important as the number of sections is how they are displayed. In this case, Google News offers similarly sized sections in the meat of the page: the news headlines, which prompt the user to scroll rather than directing their eye to one destination, a strategy reminiscent of Google’s search engine. In keeping with the web standard of readability, the font style is a sans serif, and the hierarchy of the site is effective using subtle differences in weight and point size. This is a good example of appealing to a broad audience in function while maintaining pleasing visual design.
Sources:
https://www.bostonglobe.com/?refresh=true
https://news.google.com/news/?ned=us&hl=en
https://mediabiasfactcheck.com/the-sun/
https://mediabiasfactcheck.com/huffington-post/
https://mediabiasfactcheck.com/boston-globe/
https://mediabiasfactcheck.com/new-york-times/
https://mediabiasfactcheck.com/national-enquirer/
https://mediabiasfactcheck.com/fox-news/
https://mediabiasfactcheck.com/wall-street-journal/
Grid Layouts In Practice
The assignment here focuses solely on the layout of information:
Typeset a graduation announcement. You’re free to use scale, weight, location, orientation, groupings, and rhythm. However, your submission must be in grayscale. Use only Helvetica (or Arial or similar sans serif). You are free to use different weights (e.g. bold), styles (e.g. italic), and capitalizations. This assignment is not about selecting a typeface, it’s about using visual variables to convey organization and meaning.
Here is the text to use for the announcement:
“You’re Invited! {Your First Name} is graduating from the Interaction Design Specialization! Please join us on {Pick a date} to celebrate. {Your first name}’s portfolio will be on display from 5 – 8; the marching band will play at 7. address: 9500 Gilman Drive, San Diego, CA 92093”
I began with creating a typical, center-aligned invitation, which has a basic hierarchy of information which is separated by only line breaks. From there I created two more layouts focusing more on breaking up information using grids:
Even though each submission has exactly the same text and exactly the same amount of negative space on the page, the ones which use a grid layout show the illusion of having more negative space than does the non-grid layout submission. Personal preference about which design is more visually pleasing may change depending on who you ask, but the effectiveness of grouping information and maximizing space is an applicable takeaway here, something which not only improves organization and visual appeal but can also improve readability and glanceability.
brian franceschi 