Typography is arguably one of the more challenging strands to master in the field of web design and development. Not so much because of technical issues, thankfyully these can now be worked around, but because it requires extra time that we never seem to have. We pack our brain cells with so many other facets of design and dev first and then spend the rest of the time keeping up with the rapid pace of the digital world.

Just like anything else in life, creating the best sites and typography design work on the block requires focus and time. Time to learn, experiment and master this complex and multi-layered art form. Too often we stick to the basics because enhanced typography may not be suited to the project we are working on and not every client may be willing to cover the extra time and money required to include this specialized layer of communication. The end result is that we gain little growth in this greatly respected discipline and end up thinking we are somehow not worthy to even try.

On top of focus and time you need a keen eye for detail, balance, history, culture, emotion, psychology, semiotics, color, contrast and more. There's a lot going on in the seemingly simple symbol based world of the written word and while this article can only provide a peek into the wonders of the typographic dimension, it may just help short-cut the time required to get your head in the right creative space and increase the depth perception of your critical eye. 

Join us as we deconstruct some of the best uses of typography in web design by putting a select group of beautifully executed type-focussed sites under the microscope. We hope you enjoy this journey of design discovery and urge you to try applying some of the principles raised in your next digital project.

* Some sites may take a few moments to load. Please be patient, they are worth it!

1. Typography as the hero:

• Bonne Marque by Alexander Engzell & Bonne Marque

  With names attached to a project that include Alexander Engzell, Antoine Wodniack, Jimmy Raheriasoa, Anastasi Tikhonova, and Giant Steps - you know the project is going to be special. And if you happen to know the work of the first three "legends in the making" then you know it will be minimalist, stylish, cutting edge and with well crafted typography. The best way to sum up this site is to compare it to a great movie that offers more each time you see it.

  From the first page to the last, the user is met by some very impressive typographic ideas such as oversized capital letters with video masking and morphing of the same capital letters. There's also a great mix of classic and contemporary fonts plus a compassionate focus on story telling. Attention to detail lovers should note that these talented lads give as much care and attention to the words used as they do to the typography and interactivity.

  Heading into any of the portfolio projects reveals another tasty technique, how to present a very comprehensive amount of copy in column tiles for easy visual consumption while still looking great. The bonus plan is that this method works a treat for responsive design too. Note the generous margins to protect the minimalist aesthetic. Worthy of deconstruction in many areas, the new Bonne Marque site is a deceptively seminal work that balances great typography, interactivity, and aesthetics with the thoughtful use of parallax and motion fx. A great example of typography as the hero.

  

• Maeva Barrière by Mashvp

  Mashvp are synonymous with great design and once again the French show how it is done by making typography the hero for much of the Maeva Barrière site. A strict black and white palette adds foundation to the pillars of this design while a new level of minimalism greets the user thanks to the removal of all superfluous elements. So minimalist is this site that it leaves little to be deconstructed. Scrolling down invokes a color reversal on internal pages which is also a nice touch.

  The final tone is bright which is backed by colorful photography, then again followed by the unmistakable hero of typography. This is a slick and stylish site that begs to be played with thanks to the power of typography, the well thought out interactivity, and some very sharp creative minds.

  

• OH - Beauty & Simplicity by John Jattoh

  Instant wow factor hits the user after a nominal load time thanks to some oringinal font use, high impact colors and smooth fx. London designer John Jattoh takes the classic typographic site and makes it his own through a bold use of type in this tastefully executed piece of digital communication.

  Smooth and colorful transitions move the user effortlessly from page to page while the highly responsive scroll is a joy for UX purists. Design consistency carries the hero of type throughout the projects section but be sure to click the navigation hamburger in the footer for another nice touch of brilliance.

  The John Jattoh site is a delightful experience from the get-go that uses typography, composition and dark-space with wicked delight. A designer to watch.

  

• Admir Hadzic Portfolio by Admir Hadzic

  Admir Hadzic's portfolio site represents an intelligent and coherent integration of a couple of hot trends right at the pivotal moment when they were reaching mass awareness. This includes what we have termed "nue-simplism" and in this case it applies to the hero - bold typography. From the outset the user is greeted by a stunning home page that carries a true international flavor led by Japanese minimalism, Italian boldness and French elegance.

  This is an enticing page that on one hand draws the user in to click one of the bold all-caps titles after playing with the oh-so-smooth parallax fx, while on the other hand, it instills a kind of zen - like walking into a contemporary museum or library and feeling an automatic respect for silence.

  Beautiful and appropriate page transitions send us on our way as we navigate the site, leading us to sumptuous vistas and cool font mixing. When gliding through the projects area we experience more Italian style boldness as an oversized and chunky body font rules the profile page. All-in-all a truly seminal work loaded with grace and sophistication whereby the typography is as superb as the rest of the site elements.

  

• WOBI on Leadership by Agencia Ego

  Typography is used in two successful ways in this original site by Agencia Ego. The first is as a visual "hook" that adds a heck of a bang to the home page in regards to uniqueness of design. This wow factor use of typography is always welcome in a world where trends can be watered down so rapidly.

  But unlike many sites that offer such devices and are followed by empty inspiration, if you scroll down to "Chip Conley" (or hit the "Speakers" tab in the top menu), you will find some excellent hierarchical paragraphing that again is complimentary to the unique graphics provided. Balance can be a tough nut to crack with adventurous designs like this but Agencia Ego must have missed the memo because to them it seems like child's play. A great typographic outcome.

  

2. Typography as the supporting role:

• FAKE MUSIC by Maxime Chillemi & Clément Grellier

  Some people call the home page "the money shot" of web design. FAKE MUSIC perfectly demonstrates this by opening the show with a melodic dance of fine abstract modernism and beau French élégance. Typography is but one note in this harmonious ensemble created by French designer Maxime Chillemi and developer Clément Grellier, yet it is fundamental in making this page a success.

  Let's take the big letter F, my guess is that it was the first thing your eyes took in when you hit the page. What did you look at next? The big M perhaps? Even though there is a gorgeous piece of art in the middle of the screen surrounded by sumptuous whitespace, many eyes are drawn to big simple letterforms because they are symbols of language, a core facet that is crucial to our survival.

  The balance, composition and reserved use of typography crafted into FAKE MUSIC creates a contemporary rhythm and poise that perfectly matches the context of the site, demonstrating one of the leading hallmarks of French designers. As though they have a built-in visual metronome that knows exactly how much is too much, which elements deserve the spotlight, and when they should appear on the stage.

  Moving to the bottom of the page, minimalist type underneath the hero area is almost expected and sits perfectly in place as a secondary option to simply scrolling through this section of the content via the lightning fast scroll.

  There's much more to see on this excellent site of course but our typographic exposé of FAKE MUSIC has ended so please check out the other pages and enjoy the show!

  

• WeLoveNoise by WeLoveNoise

  Take a big bag of creativity, add originality, a tablespoon of uber minimalist typography and some unique interactivity - and you've got WeLoveNoise. This is a site crafted with typography as a supporting character to the hero of abstract minimalism.

  Luke Finch, a multi-disciplinary designer currently working out of San Francisco, masterfully uses minimalism to provide a laser focussed UX wayfaring path that allows the unique font choices to take centre stage as you browse through the projects featured. Surrounded by whitespace and kept to a small font size, the importance of the type is lifted.

  WeLoveNoise is a design that demands creative respect and deserves a permanent place on your playlist of inspirational typographic sites.

  

• Braind by Braind

  If you need further convincing that typography is a major facet of "nue-simplism" then take a look at Braind's new site. Even the Braind logo gives a hint as to how well these talented peeps from Russia understand the visual impact of typography.

  From the second the home page loads you know you are staring at a page that is right-on-trend for color, composition, and interaction. But... this is an article about typography so I'll try not to get too distracted by the surrounding eye candy and focus on the type.

  Browsing the projects we see chunky extra-bold headings juxtaposed against a regular or standard size font - always nice. If you delve into some of the projects you will notice a "real-world" amount of text to be dealt with, and deal with it they did. Here we are greeted with another right-on-trend style via the vertical headings in bold all-caps.

  IMO this always has the effect of adding a touch of playfulness to a site, a tiny sense of chaos that says "I'm a rule breaker... in my spare time ;)". Adding motion fx to the type when scrolling coupled with sweet page transitions completes this right-on-trend site in delightful style.

  

3. Mixed languages brought together by typography

• Mazen El Rifai by Douze Degres

  Typography in web design is tough enough but imagine having to combine two visually disparate languages along with watercolor paintings and bring them into the digital realm. It's a tough call but all in a day's work for Douze Degres as they answer the challenge with their site for Mazen El Rifai, a talented Lebanese artist.

  Classic type is mixed successfully with a digital hybrid style body font that is enhanced by the hero - the smooth animated entry of the copy, a cutting edge effect in this genre. The font choice is bold while remaining understated and while the designers among us may be mentally considering other font choices, a quick scroll down to reveal the 2nd language (actually the first), is artistically rendered with grace and style, which in turn imbues the entire page with tradition.

  The strength of these elements in combination with the expressive watercolor paintings brings this compassionate design home.

  

4. Typography as art

• Dada-Data by akufen, David Dufresne & Anita Hugi

  Dada-Data is a dream site for art and typography lovers with its wonderfully imaginative letterscapes and brain bending abstractionist notions. True to the subject matter, designers akufen from Canada manage to use type as a thread that weaves this passionate piece of digital dada into an adventure, as though somehow dada was always destined for this kind of chaotic, multilayered and animated existence.

  Not only is this site a joy to look at, it is exciting to navigate which is also performed with typographic finesse.

  The style of dada as an art form is not for everyone... but that's ok and it's kinda the point. Dada was a movement full of satire and nonsense in reaction to the atrocities of the first world war and Dada-Data carries that tradition into the new digital age with mastery in this classic of future history books on typography.

  Be sure to explore the projects once you have surrendered to the haphazard navigation that is cleverly designed to get under your skin by its sheer arrogance and distain for order. There is much more to see on this wicked site and again, it is all made possible thanks to the power of masterful Typography.

  

• Marche à l’ombre by Les Évadés

  This is a site for typography purists due to the deep level in which it relies on typography to make it work, and work it does. Starting with the solid block text we find a grit-like texture has been added which helps blend the heading with the emotion of the rest of the site versus plain flat colors that might otherwise make it “stand above” the page and ruin the mood.

  A rare and brave use of italics is nice to see and clearly adds style in this classy design. Subtle motion fx add life to the type on each page as the user scrolls down which provides a nice “cherry on top” of a very well executed experience.

  This is typography as art which is evident in the aesthetic pleasure brought by the design - irrespective of the language. Although having a beautiful visual language to start with is certainly an advantage.

  

• Taostudio by Michela Chiucini

  Gentle hues soften the view as we delve into this prime example of digital story telling by one of Italy's finest digital artists, Michela Chuicini.

  There's something about Italian design. On one hand it speaks of the good life, of exciting fashion and romantic moments, while underlying it beats a fiercely proud heart full of conviction and courage. Michela Chuicini playfully honors these traditions in this gorgeous portfolio site that owes its success to the power of typography... with help from a blinking fish swimming in a sea of personality.

  Focussing purely on Michela's seminal home page we see that every letter has been chosen and placed with deep consideration and respect for space, function, form, and more importantly, emotion. Starting from the top we see that logic and hierarchy bring a breath of fresh air to the UX, while enlarged and chunky lowercase letters present a visual dance that teases the user into an exploratory mood. By now the tastefully illustrated character at the top of the site has blinked and earned the site valuable seconds in SEO kudos as you hover and play "test the fish" to see if any other surprises await.

  Attention to detail sharpens the user's perception and focus is diverted to the amazing "little things" that help make this home page a big design success. Scrolling the whole page before checking the site further becomes mandatory at this point until finally venturing deeper to see what other goodies can be found.

  Taostudio is a triumph of art and typography and would work just as well as a book cover, poster, or big budget annual report. Through the masterful use of typography Michela's work transcends multiple design mediums and is a true example of the power of typography in design.

  

• We Lunching Bro? by Alex Pierce

  This crafty site could easily be included in the "typography as the hero" section above but we included it as art because of how strongly the typography and color empower this design. In fact, We Lunching Bro? made the cut for providing the boldest typography you've probably seen in a long while.

  To make this site even more surprising, the We Lunching Bro? website was designed to provide a curated list of restaurants in Dallas, Texas. How cool it would be if Craigslist went this way!

  Forget everything you think know about directory sites because this simple yet hyper-bold type-based extravaganza demands attention. The use of typography in this way highlights how impressive the UX can be on a mostly type-only based site. No buttons are needed, no images to reinforce an agenda, just pure bold words that stimulate the eyes and mind. Tasty indeed!

  

5. Typography to enhance data with interest

• Women's Footprint in History by Elkanodata

  Designing for historical sites could be one of the toughest assignments a designer will face. Why? Because you are dealing with facts in a world engulfed by drama. Elkanodata took on this challenge with a fresh perspective as evident in their design for Women's Footprint in History.

  Rather than weigh us down with serious fonts and a sombre mood, the skillful peeps at Elkanodata use typography to set a more positive tone by first and foremost creating a landing page that is unique and eye catching. Thoughtfully chosen animated imagery masked by a friendly yet neutral font is fortified by the strength of all-caps. This tasteful ensemble is juxtaposed against a spacious yet gently textured background, the net effect of which encourages exploration into the content within.

  At this point your scroll finger takes over and you are immediately met by a reversal of color and more power-type but the presentation is subdued in respect of the subject matter. This effectively gets your brain in gear, ready to receive the coming content with a neutral outlook. From here on in the typography changes again to focus on legibility while the titles still receive the "tastefully artistic" treatment to keep the balance of art vs information in check.

  Women's Footprint in History is a great example of a site that uses multiple typographic techniques to conquer a very tough and complex project.

  

6. Typography and social issues

• Beyond Prison by Studio Airport

  Beyond Prison is a site that demonstrates how controversial issues and typography go hand in hand because of the inherent power of the written word. Right from the get-go the loading sequence serves the user a bold no nonsense paragraph which helps to set the serious-but-compassionate mood of what is to come.

  The use of blurring in the navigation and images is a nice touch that benefits the UX while providing a softening effect to balance the seriousness of the type and issue. Next, the intro animation of the headline and summary over a background video is another creative bonus that demonstrates a special understanding of how to visually represent the right level of emotional sensitivity, the key to the success of this site's typography.

  The further you go into this seemingly unassuming site, the more you realize how well the designers have nailed the context of the content perfectly through the right use of typography and fx. Some serious lessons to be learnt here.

  

6. Typography as navigation

• C2 by Anna Travis

  C2 is about one year old now but is still a modern day enigma. If you are new to this site then you are in for a treat. If not, then let me start with the term "multi-dimensional typography" to pique your interest. Let's walk through it.

  Don't be surprised if a voice inside your head shouts "eye candy" when you first see the home page of C2. Some sites seem to have that "special something" and with C2 that something special comes from a fiendishly well crafted mix of first glance aesthetic beauty (via the capital C on black) and the geometric beauty of the micro typography within the C. Hence the cool sounding "multi-dimensional typography" I mentioned earlier.

  Specifically, these dimensions include the gentle animation and spatial motion of the type elements that settle onto a 2D plane; the exquisitely crafted macro-view featuring the capital C in bold contrast on black with pink highlights; the inlaid "typographical playground" within the C shape; the superb composition and attention to detail of the typographic elements; and finally, the extra dimension of the pink words acting as an intuitive and pleasantly simple to use navigation.

  What about the rest of the site you ask, is it worth seeing? Absolutely. These guys are far more than one page wonders thanks to great transitions, stylish layouts, horizontal content sliders and more. Overall, C2 is a full-screen delight that masters many elements inherent in great digital design and story telling. And it all begins with type!

  

Final word

The above is just a snapshot of how the power of typography can be used to influence the tone, impact, emotions and even UX of a site. By finding time to experiment with typography, and a little courage, you can add extra dimensions to your projects while accruing valuable respect points from your clients and peers. Like all things, practical experience is the key to mastering this challenging beast.

If you have a great typographic site to suggest then please share it in the comments below.