{"id":3035,"date":"2010-02-09T11:07:04","date_gmt":"2010-02-09T09:07:04","guid":{"rendered":"http:\/\/tokao.com\/2010\/02\/09\/winsome-words-18-examples-of-typography-in-web-design\/"},"modified":"2010-02-09T11:07:04","modified_gmt":"2010-02-09T09:07:04","slug":"winsome-words-18-examples-of-typography-in-web-design","status":"publish","type":"post","link":"https:\/\/tokao.com\/wordpress\/2010\/02\/09\/winsome-words-18-examples-of-typography-in-web-design\/","title":{"rendered":"Winsome Words: 18 Examples of Typography in Web Design"},"content":{"rendered":"

[ By Steph<\/a> in Architecture & Design<\/a>, Gadgets & Geek Art<\/a>. ]<\/p>\n

\"\"<\/p>\n

\u201cWeb design is 95% typography.\u201d That quote<\/a> has been repeated around the internet so many times it has practically become gospel \u2013 probably because it\u2019s true. While images are important, most of what we process while browsing the web is text. Using the same old boring fonts doesn\u2019t make for exciting design, so some graphic artists have turned typography on the web into a stunning art form unto itself. These 18 websites use typography to inform, but also as an (often interactive) design element that\u2019s like a magnet for our eyeballs.<\/p>\n

Espira Web Technology<\/a><\/h4>\n

\"\"
\nPriorities, priorities, priorities. Espira Web Technology<\/a> has emphasized the most important words on the page using large, eye-catching typography that\u2019s a seamless part of the overall design of the site. Following the cardinal rule of using serif typefaces only for headings, the text is easy to read and almost forcibly pulls you in regardless of whether you even speak Spanish.<\/p>\n

Jesus Rodriguez Velasco<\/h4>\n

\"\"<\/p>\n

Sometimes, typography is used in web design to firmly establish the theme or essence of what the site is all about. In this case, archaic-looking typeface and hand-painted symbols hint at what\u2019s inside: \u201ca veritable panoply of literary, visual and aural diversions related (or not) to academic pursuits, arcane (or simply dusty) vagaries and very earnest but most likely misguided contemporary concerns.\u201d The author, Jesus Rodriquez Velasco<\/a>, is a medieval and early modern studies<\/a> professor at Columbia University.<\/p>\n

Oliver Kavanaugh Design<\/h4>\n

\"\"
\nIt\u2019s big. It\u2019s loud. It\u2019s overwhelmingly the most important element on the page, and that\u2019s the point. Graphic and web designer Oliver Kavanaugh<\/a> managed to make jumbled, overlapping text that might be far too busy in the wrong hands work with subtle texture, a controlled color scheme and careful attention to composition.<\/p>\n

Ryan Keiser Design<\/h4>\n

\"\"<\/p>\n

\u201cI create usable accessible colorful experiences.\u201d All three of those adjectives also apply to the typography-centered design of this website, helping Ryan Keiser<\/a> establish his brand in a way that\u2019s immediate and memorable.<\/p>\n

Denise Chandler Design<\/h4>\n

\"\"<\/p>\n

Can you resist scrolling further down the page after getting a look at this web header? It\u2019s clean and simple yet dynamic \u2013 even without the cute animated insects. Web and graphic designer Denise Chandler<\/a> showcases her talent with an online portfolio that\u2019s classic and modern all at once.<\/p>\n

The New York Moon<\/h4>\n

\"\"<\/p>\n

Sure, the most eye-catching element of this page is that huge vintage radio. But though it may be subtle, the typography on The New York Moon website<\/a> still shines. It\u2019s a great example of how less can be more \u2013 the type doesn\u2019t have to be acid-bright or two inches tall to call attention to itself and help define the page.<\/p>\n

Kidd 81 Design<\/h4>\n

\"\"<\/p>\n

It\u2019s not hard to tell that Paul Jamie Kidd<\/a> really loves his job. Everything about the playful, colorful typography on his website screams \u201cfun\u201d \u2013 but not in an annoying way, thanks to the balanced white space and neutral brown background.<\/p>\n

Circus Family Design, Direction, Animation & Production<\/h4>\n

\"\"<\/p>\n

Whoa \u2013 four different typefaces in a row? That\u2019s usually a terrible idea (especially on the web) \u2013 but Circus Family<\/a> pulls it off here with an austere layout and monochromatic color scheme. The chosen typefaces give the site a very \u201cedgy silent film\u201d feel \u2013 appropriate given the nature of the company\u2019s work.<\/p>\n

Alpha Multimedia<\/h4>\n

\"\"<\/p>\n

How can a brand name force itself into your head without screaming like a headache-inducing car dealership commercial? Alpha Multimedia<\/a> gets it done with excellent use of negative space, filling in the entire header with the word and subsequently drawing your eye down the page to view their featured work samples.<\/p>\n

Lorem Ipsum Design<\/h4>\n

\"\"<\/p>\n

There\u2019s an argument to be made that using \u2018lorem ipsum\u2019 isn\u2019t a great idea when designing a website, but that doesn\u2019t extend to using the graphic design agency of the same name. Lorem Ipsum Design<\/a> goes bold and, well, graphic with a home page featuring nothing but two fonts, one a stark sans serif and the other a hand-written scrawl on a moveable post-it.<\/p>\n

Maurivan Luiz Design<\/h4>\n

\"\"<\/p>\n

The word \u2018WELCOME!\u2019 in huge typeface with an exclamation point at the top of a website can be a sign of an amateur designer. That\u2019s definitely not the case here. Maurivan Luiz<\/a> keeps the friendliness from being clich\u00e9 \u2013 the greeting warmly sets the tone for the site and balances well with the white background and the italicized serif text below it.<\/p>\n

The Astonishing Adventures of Lord Likely<\/h4>\n

\"\"<\/p>\n

What would the blog of a hedonistic Victorian gentleman with a penchant for getting sidetracked by the ladies while solving mystifying mysteries look like? A little something likeLordLikely.com<\/a>, a rather racy account of all sorts of mustachioed aristocratic adventures. The chosen typefaces and parchment-like background are evocative of the era, but the clean design is a nod to the modern world.<\/p>\n

Love Freelancing<\/h4>\n

\"\"<\/p>\n

Sometimes, the right balance of typography is like music \u2013 it flows with its own rhythm and harmony. Web designer Kai Branch<\/a> created this little site to hype an ebook of web designer interviews, and it does the subject proud with a beautiful composition of type in various fonts, sizes and orientations.<\/p>\n

Giant Creative Web Design & Development<\/h4>\n

\"\"<\/p>\n

Who needs fancy illustrations when you\u2019re this good with nothing but type? A web design and development firm called Giant Creative<\/a> literally makes typography the center of attention on their own website. The design is clean yet fun, using a font that\u2019s just playful enough to give a lighthearted yet professional impression.<\/p>\n

Ben Lind Design<\/h4>\n

\"\"<\/p>\n

\u201cI create simple, clean websites that are easy to use and fun to look at.\u201d So says designer Ben Lind<\/a> on his own website, but perhaps he needn\u2019t have. The design of his site says it all, with a large typography graphic in the center that not only reads \u201cHi, I\u2019m Ben, I love making websites\u201d but also forms an L for his last name.<\/p>\n

Elysium Burns Design<\/h4>\n

\"\"<\/p>\n

Graphic designer Sean Baker<\/a> goes for bold sans-serif type for headlines and titles and a more elegant serif font for the text blocks, but with a tightly controlled color scheme and varying font sizes, it all comes together into a cohesive design.<\/p>\n

FL2 Blog<\/h4>\n

\"\"<\/p>\n

It doesn\u2019t get much bolder than this. Interactive agency FL2 isn\u2019t shy about making typography just about as big as it can be both on their blog<\/a> and website<\/a>, leaving you with absolutely no question whatsoever which page you\u2019ve landed on.<\/p>\n

(from weburbanist<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"

[ By Steph in Architecture & Design, Gadgets & Geek Art. ] \u201cWeb design is 95% typography.\u201d That quote has been repeated around the internet so many times it has practically become gospel \u2013 probably because it\u2019s true. While images are important, most of what we process while browsing the web is text. Using the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[122,54,28],"class_list":["post-3035","post","type-post","status-publish","format-standard","hentry","category-technology","tag-design","tag-web","tag-weburbanist"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tokao.com\/wordpress\/wp-json\/wp\/v2\/posts\/3035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tokao.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tokao.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tokao.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tokao.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3035"}],"version-history":[{"count":0,"href":"https:\/\/tokao.com\/wordpress\/wp-json\/wp\/v2\/posts\/3035\/revisions"}],"wp:attachment":[{"href":"https:\/\/tokao.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tokao.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tokao.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}