{"id":196,"date":"2010-08-06T09:43:40","date_gmt":"2010-08-06T09:43:40","guid":{"rendered":"http:\/\/website-website.co.uk\/?p=196"},"modified":"2011-09-09T14:30:20","modified_gmt":"2011-09-09T14:30:20","slug":"a-bit-of-friday-typography","status":"publish","type":"post","link":"http:\/\/website-website.co.uk\/index.php\/web-design\/a-bit-of-friday-typography\/","title":{"rendered":"A BIT OF FRIDAY TYPOGRAPHY"},"content":{"rendered":"

Typography <\/strong>is a part of the design<\/strong>, especially for\u00a0web design<\/strong> it is extremely important. It is the technique of presenting the text as a state of art<\/strong>. To reach the result of a good typography<\/strong> you need to spend many hours analyzing the way people read.<\/p>\n

Typography comes from the Greek words \u03c4\u03cd\u03c0\u03bf\u03c2 <\/strong>typos <\/strong><\/em>“mark, figure” and \u03b3\u03c1\u03ac\u03c6\u03c9 <\/strong>grapho <\/strong><\/em>“I write”.<\/strong><\/p><\/blockquote>\n

I suppose it would not be a surprise if I tell you that people are not reading each word in the text, people are just scanning<\/strong> the “form” of the word. That is why text which is ALL CAPS<\/strong> is harder to read that the standard way, however ALL CAPS means “attention” and “important” to people, so you can use it for headings and short sentences, but it is not a good idea to use it for text.<\/strong><\/p>\n

Another thing that I would like to mention to prove the theory of reading as scanning is that if you cut a word through the middle and give the bottom part to one person and the top part to another, the one that has the top will read it easier for sure. That just the way people’s head work.<\/p>\n

There are two main font type that are used and they are called Serifs<\/strong><\/a> and Sans-Serifs<\/strong><\/a>. What is the difference? See the image below.<\/p>\n

\"The<\/a><\/p>\n

You can see what are the serifs marked in red<\/strong> on the third row.<\/p>\n

Which one is easier to read? There is no rule that is stating that Serif or Sans-Serif fonts are better – it depends on the situations, purposes, goals, techniques, devices… and here comes the good typography designer to take the decision.<\/p>\n

Basics of the readability and eligibility<\/span><\/h1>\n

Contrast.<\/span><\/strong><\/h2>\n

Make sure that your text and headings have enough contrast to the background. Nobody likes to struggle reading. Like mentioned before, people like spending lots of hours surfing the web, however they totally hate wasting time with unusable websites and illegible and unreadable text.<\/p>\n

***<\/p>\n

Space and Format.<\/span><\/strong><\/h2>\n

Think about the line heights, it is really easier to read text which has enough space between the words and the lines. You can easily manage the line heights using CSS with the following simple line:-<\/p>\n

line-height: 140%<\/p>\n

Value<\/span><\/span> Description<\/span><\/span> normal A normal line height. This is default number A number that will be multiplied with the current font size to set the line height length A fixed line height in px, pt, cm, etc. % A line height in percent of the current font size inherit Specifies that the value of the line-height property should be inherited from the parent element<\/p>\n

Speaking of ways to make the text more readable and legible, do not underestimate the width of your text fields<\/strong>. From distance about 80 cm human being’s eyes can read 8 cm width text without using any muscles. I know it is almost impossible to calculate a formula with all these different screens and resolutions, however the thing that I am trying to say is – please do not place your text from the left side of the monitor to the right side. People are losing the lines while reading and it is not comfortable to struggle with that.<\/p>\n

***<\/p>\n

Font Sizes<\/strong><\/h2>\n

In order to ensure that the visitors of your website will find the information they need in a glance and will read it easy make your hierarchy rules strict and clear. Choose the sizes of the main text, heading ans subheading and use them strictly all over the website.<\/p>\n

***<\/p>\n

\u00bb\u00a0Which is the best font all over the World?<\/strong><\/p>\n

That a question with one true answer – all fonts are good, it depends of how you use them, It is the same as the question “Which is the best color?”<\/p>\n

***<\/p>\n

\u00bb\u00a0Then why people hate Comic Sans?<\/strong><\/p>\n

Because Comic Sans was designed for comic books, not for wide usage. It is just overused and that is why people, especially designers are sick and tired of it.<\/p>\n

***<\/p>\n

\u00bb\u00a0Why everybody says that Helvetica is the best font then?<\/strong><\/p>\n

Because Helvetica is universal font – you can use it for headings on website, posters, everything… personally I do not like it so much. There is not challenge using it.<\/p>\n

Why designers say that it is better to use Verdana and Georgia instead of Arial and Times New Roma?<\/p>\n

Because they were designed for easy reading on the web – see the demos below:-<\/p>\n

\u00bb\u00a0Sans-Serifs<\/strong>
\nThis is sample text showing Verdana <\/strong>at smaller sizes (size 7).<\/span><\/span><\/p>\n

This is sample text showing Verdana<\/strong> at smaller sizes and bold (size 7).<\/strong><\/span><\/span><\/p>\n

This is sample text showing Arial<\/strong> at smaller sizes (size 7).<\/span><\/span><\/p>\n

This is sample text showing Arial at smaller sizes and bold (size 7)<\/strong><\/span><\/span><\/p>\n

\u00bb<\/strong> Serifs<\/strong>
\nThis is sample text showing Times New Roman<\/strong> at smaller sizes (size 10).<\/span><\/span><\/p>\n

This is sample text showing Georgia<\/strong> at smaller sizes (size 10).<\/span><\/span><\/p>\n

***<\/span><\/span><\/p>\n

\u00bb\u00a0Free tool<\/strong>: And in the end here is a free online tool to test your fonts before placing them on the web. It also generates your CSS: http:\/\/www.typetester.org\/<\/a><\/p>\n

Web Design London<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Typography is a part of the design, especially for\u00a0web design it is extremely important. It is the technique of presenting the text as a state of art. To reach the result of a good typography you need to spend many hours analyzing the way people read. Typography comes from the Greek words \u03c4\u03cd\u03c0\u03bf\u03c2 typos “mark, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,95],"tags":[103,161,104,105,101,99,98,97,102,96,100,17,162,160,149,151],"class_list":["post-196","post","type-post","status-publish","format-standard","hentry","category-web-design","category-typography-web-design","tag-comic-sans","tag-e-commerce-development","tag-fomt","tag-font-face","tag-georgia","tag-helvetica","tag-line-height","tag-spacing","tag-times-new-roman","tag-typography-2","tag-verdana","tag-web","tag-web-design-and-development-company","tag-web-design-and-development-london","tag-web-design-london","tag-web-development-london"],"_links":{"self":[{"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=196"}],"version-history":[{"count":7,"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/196\/revisions"}],"predecessor-version":[{"id":199,"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/196\/revisions\/199"}],"wp:attachment":[{"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/categories?post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/website-website.co.uk\/index.php\/wp-json\/wp\/v2\/tags?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}