{"id":245,"date":"2022-10-25T18:31:18","date_gmt":"2022-10-25T17:31:18","guid":{"rendered":"https:\/\/zaraknox.co.uk\/journal\/?p=245"},"modified":"2022-10-25T18:35:26","modified_gmt":"2022-10-25T17:35:26","slug":"design-for-web-content-three-examples-of-beautiful-typography-in-websites","status":"publish","type":"post","link":"https:\/\/zaraknox.co.uk\/journal\/2022\/10\/25\/design-for-web-content-three-examples-of-beautiful-typography-in-websites\/","title":{"rendered":"Design for Web Content – Three Examples of Beautiful Typography in Websites"},"content":{"rendered":"\n

TOURISTS<\/strong> (Desktop view)<\/p>\n\n\n\n

This Massachusetts hotel uses two main fonts throughout. Its header, subheadings and nav links are a bold sans-serif that immediately draws the eye. Note that its call to action (‘Book Now’) is the only colouring.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n

The heading font is warm, with somewhat rounded edges and a use of caps that seem reminiscent of the Tintin book series. This gives a sense of adventure, and with its almost khaki background colour, seems to harken to a time of colonial exploration, safaris, and travels of yesteryear.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The site chooses to use a monospace font for its secondary typeface. This is a somewhat bold move, as its fine, small lettering threatens to be easily ignored. However, it serves to contrast with the bold headers, and is not eclipsed by them. It seems like text suited to a mission brief, hastily typed out on a typewriter. This works well with the site’s vintage aesthetic, and a sense of adventure in unknown lands.<\/p>\n\n\n\n

The New Yorker<\/strong> (Desktop view)<\/p>\n\n\n\n

Established in 1925, The New Yorker has not strayed far from its origins in terms of type. It uses characteristic headers with extremely wide counters, giving a rounded appearance to the characters. Serifs are ornate but understated. Overall, there is an art deco, Roaring Twenties feel to the headings.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

When an article is opened, there is a lot of whitespace surrounding the headline. This makes it very clear to the reader which article they are currently reading. <\/p>\n\n\n\n

The New Yorker makes the decision to use all uppercase on its headlines, dates, and its logo. While this may create difficulty for some readers due to all of the characters appearing on the same level, the use of white space around these areas helps to prevent cluttering and confusion.<\/p>\n\n\n\n

A much more ‘web-friendly’ bold sans-serif is used for the author’s name and date, while the byline is in italics. The different weights and styling help the reader to distinguish these pieces of information from each other.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Interestingly, The New Yorker chooses to use serifs for its article text, as well as drop caps for its opening line. In this way, the text closely mimics that of a printed article. Line height also prevents the text from becoming too blocky and difficult to read on phones, tablets, and desktops. This imitation of the printed word gives the reader the sense that they are indeed reading a magazine, and that they are not losing the pleasurable aesthetics of print simply because they have opted to use a screen.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

<\/p>\n\n\n\n

9 Hours<\/strong> (Mobile view)<\/p>\n\n\n\n

9 Hours is a Japanese capsule hotel, and its website has been fully translated into English from the original Japanese.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

With the exception of the logo, where the words ‘nine hours’ are slightly less weighty than the ‘9h’ in bold, this page chooses to use the same bold typeface throughout the site.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

This minimalist approach to type is symbolic of the hotel itself, which makes much of “stripping away the unnecessary.” The site’s use of pictographs and icons in conjunction with text further gives the reader the feel that text has been chosen carefully. <\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Subheadings are bolder than body text to differentiate between the amenities. Key information such as check-in times have slightly wider character spacing\/kerning than the rest of the body text to set it apart and draw attention to it.<\/p>\n\n\n\n

Sections of information are arranged into small blocks or pods, almost as if they too are capsules themselves.<\/p>\n","protected":false},"excerpt":{"rendered":"

TOURISTS (Desktop view) This Massachusetts hotel uses two main fonts throughout. Its header, subheadings and nav links are a bold sans-serif that immediately draws the eye. Note that its call to action (‘Book Now’) is the only colouring. The heading font is warm, with somewhat rounded edges and a use of caps that seem reminiscent […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,6],"tags":[7,13],"_links":{"self":[{"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/posts\/245"}],"collection":[{"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/comments?post=245"}],"version-history":[{"count":16,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/posts\/245\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/posts\/245\/revisions\/282"}],"wp:attachment":[{"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/media?parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/categories?post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/tags?post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}