{"id":378,"date":"2021-10-24T11:06:56","date_gmt":"2021-10-24T04:06:56","guid":{"rendered":"https:\/\/bnsd.binus.ac.id\/graphic-design\/?p=378"},"modified":"2021-10-24T11:06:56","modified_gmt":"2021-10-24T04:06:56","slug":"guide-to-web-typography","status":"publish","type":"post","link":"https:\/\/international.binus.ac.id\/graphic-design\/2021\/10\/24\/guide-to-web-typography\/","title":{"rendered":"Guide to Web Typography"},"content":{"rendered":"

Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through\u00a0great<\/em>\u00a0typography.<\/p>\n

First, it\u2019s worth noting that Typography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained monkeys were able to correctly identify Helvetica 90% of the time.<\/p>\n

\"helvetica<\/p>\n

Today we\u2019re going to talk about web typography in terms of a recipe of four fundamental ingredients. If you\u2019ve ever tried to cook a souffl\u00e9, you\u2019ll know how important the recipe is. Follow\u00a0this<\/em>\u00a0recipe and your typography will rise up like \u2026 that\u2019s enough of the culinary metaphors, let\u2019s cook:<\/p>\n

Contrast<\/h3>\n

Pale pink text on a pale blue background, might match your t-shirt, but it just doesn\u2019t read well. Text exists to be read; make sure that it contrasts enough with the background to achieve that. If you\u2019re ever unsure about contrast, then take a screen dump of your page, open up your image editing software and reduce the image to grey-scale. You\u2019ll soon see if you have enough contrast. Robert Bringhurst, the consummate typographer writes,\u00a0typography exists to honor content<\/em>. Are we honouring the content, if we design our pages in such a way that the text, the content, is difficult to read?
\n\"Contrast\"<\/p>\n

Personally I dislike reading long stretches of reversed out text (i.e. light text on a dark background); how often do we see books set like this? It may well be appropriate for shorter stretches of text on-screen, but I find it very tiring to read for any length of time.<\/p>\n

Size<\/h3>\n

With the birth of Web 2.0 I noticed a rather annoying trend; namely small type. I\u2019ve even emailed site authors and kindly suggested that they increase the default font size. I\u2019ve received mixed replies from, tough, get yourself some glasses to thanks, I\u2019d never even considered that my type might be too small for the average reader. I\u2019ve even heard tiny body text defended with, \u201cit matches my minimalist design\u201d, or similar. It most likely reflects a small something else. Unless Super Man and 20\/20 Vision Girl (Marvel Comics, keep your hands off, she\u2019s mine) are your only readers, then small type is just not on.
\n\"is<\/p>\n

Don\u2019t set body text below 10 or 12px and, if possible, make it bigger. Remember, what\u2019s legible on your 65 inch High Definition Plasma monitor, might not be so on a 15 inch MacBook. If in doubt, make it bigger. The body text on ILT is set at 16px.<\/p>\n

Hierarchy<\/h3>\n

Varying type size is one of the best ways to differentiate content. Colours and pretty boxes might help, but different sizes of type, used consistently throughout your pages, will signal loud and clear to your readers the relative importance of your pages\u2019 elements. It also means that if your readers are in a hurry, they can quickly pick out the important bits \u2014 and that could mean that they stay longer and read on<\/p>\n

\"hierarchy<\/p>\n

Hierarchy can be achieved in other ways too. We\u2019ve just mentioned using different sizes of type to achieve it, but we can also use different styles; for example, all-caps, or using italic for sub-headings. Serif and sans serif faces can also be mixed to good effect.<\/p>\n

Space<\/h3>\n

Let your type breathe. Don\u2019t be afraid to leave blank spaces in your pages. This\u00a0negative<\/em>\u00a0or\u00a0white<\/em>\u00a0space will help focus attention on the text\u2013and it\u2019s the text that speaks loudest, so let it be heard. Next, remember the\u00a0line-height<\/em>\u00a0CSS property; a good rule of thumb is line-spacing that\u2019s\u00a0at least<\/em>\u00a0140% of your text size (remember, I\u2019m writing about\u00a0web<\/em>\u00a0typography here). Good type designers put a whole lot of effort into the micro white space that sits inside type. They spend countless hours attempting to achieve a balance between the black of the type and negative or white space that it envelops. Likewise, we should take time to consider the macro white space, the \u2018voids\u2019 that shape our blocks of text.
\n\"space,<\/p>\n

Remember, these are not rules, but rather guidelines. However, follow them\u2013contrast<\/strong>,\u00a0size<\/strong>,\u00a0hierarchy<\/strong>, and\u00a0space<\/strong>\u2013and your typography will rise like one of Gordon Ramsay\u2019s Souffl\u00e9s. Oh, and I was only kidding about the monkeys.<\/p>\n

In a future three-part series on the fundamentals of typography, I\u2019ll look at all of the above in more detail. I\u2019ll also be discussing numerous things (details) that will go a long way to improving your typography both on- and off-screen.<\/p>\n

 <\/p>\n

Source:I love Typography (ILT)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web […]<\/p>\n","protected":false},"author":41,"featured_media":379,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-378","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/378"}],"collection":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/comments?post=378"}],"version-history":[{"count":0,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/378\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media\/379"}],"wp:attachment":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media?parent=378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/categories?post=378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/tags?post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}