Good typography on the website of a news organization can help words deliver messages in a more effective way. It improves readers’ experience. Bad typography, on the contrary, makes the webpage look messy and unprofessional.

I want to analyze the typography of a CNN opinion “Why weeping Brazil fans applauded Germany’s team” and the typography on its webpage. I think they did a good job. I will analyze the typography from the four principles of graphic design: contrast, consistency, alignment and proximity.

Contrast

In this opinion as well as on this whole webpage, different parts of information use different fonts. For example, the title is obviously much bigger than the body part of the story. The title for the photo stories is big too, but it is not of the exactly same size as the title for the whole opinion. “Editors’Note” part is italic, which differentiates this part from the true body of the opinion. The “Story Highlights” part on the left use a much smaller size of words than the body part. Also, the use of color intends to present contrasts too. For example, the background color of the head is red and the background of other parts on the page is white. That is a neat contrast of colors. The hyperlinks contained in the opinion are blue so that audience know where they can click if they want to know additional information. The background of the photo part is black and the text in the photo part is white. The colors in the photo part are opposite of those used in the main part of the opinion. That is a contrast too. All in all, if we navigate through this webpage, we have a very clear idea of which part every word belongs to. That is because the typography here makes good use of contrasts and audience never get lost.

Screen Shot 2014-07-09 at 3.28.09 PM

Consistency

Although there are different fonts and colors in this opinion as well as on this webpage, the page still looks neat generally, because consistency is also paid much attention to. Hyperlinks are all blue. The whole page sticks to a few certain typefaces to make sure nothing distracts audience badly. On the right of the page, there is a part called “part of complete coverage on opinion on the news.” In this part, all the captions are of the same font and all the body parts are of the same font. Such efforts in consistency can really give audience a good first impression when they open the page.

Screen Shot 2014-07-09 at 3.34.55 PM

Screen Shot 2014-07-09 at 3.31.39 PM

Alignment

Almost in every part on this webpage, the texts including titles are aligned left. That appeals to readers’ common reading habit that their eyes always go back to the left of the page. This is a good idea especially when there are many texts. The whole page looks organized because almost in every part, texts are aligned left.

Proximity

On newspaper or website pages, things are normally grouped by categories or the information they present, and texts in the same group always have consistent fonts. However, different groups usually use contrasting fonts. As I have mentioned in both the consistency part and the contrast part, different parts of information on this webpage use different fonts. Within the same part, they use consistent fonts. For example, at the bottom, the “From Around the Web” part and the “More from CNN” part consists of blue hyperlink captions. That is the way they are grouped together and differentiated from other information on the page.

Screen Shot 2014-07-09 at 3.35.18 PM

Leave a Reply

Post Navigation