Category Archives: Typography

Typography in web design: a great showcase of typographic solutions, free fonts, creative typefaces, typography examples and designs for websites, css typography tricks, typography web layouts at Web & Patterns, collecting inspirational solutions for very inspired web designers.

One Day Without Shoes Typographic Header


The day is coming when you can walk on your bare feet for this charitable event: people are asked to go the day (or part of if or even just a few minutes), barefoot, to experience a life without shoes first-hand for spreading awareness about the impact a simple pair of shoes can have on a child’s life in poor countries.
We love this commendable effort as well as the typographic header displayed on the corresponding website, made of layered catch phrases written in different font/size/weight.

A brand new ampersand every day

365-cool-ampersand-examples

The ampersand was originally a ligature of the letters E and T, invented to write swiflty the latin conjunction ET, which means “and”.

Maybe because of its tensile form and its fluid swooshes the ampersand is nowadays one of the most en vogue character and quite an obsession for typophiles: so if you too are a fan, here you are  300&65 ampersand , a nice Tumblr project that displays a brand new ampersand every day.

Pedemontana’s website inspiring typography

pedemontata-leftloft-inspiring-typographic-website

Pedemontana it’s the name of a new big highway system that will connect Milan to other cities of northern Italy. This website’s art direction is from Leftloft, a big communication and identity studio based in Milan: the use of many different typographic weights and styles loosens up the grid stiffness while revealing an editorial, newspaper-like, communication style.

Blue Pixel’s strong typographic treatment

bluepixel-inspiring-typography-for-the-web

If it’s not a rule, it’s an established trend that big typograhic treatments requires few text, big spaces and consistent page structures.

As in this case, a huge heading with a 3 columns grid it’s a common but effective layout pattern that has the pros of enganging readers attention and making texts easy readable.

Hitchcock: a Saul Bass inspired free font

hitchcock-saul-bass-inspired-free-font

Hitchcock is a great free font inspired by Saul Bass titles (though the lettering artist that did the lettering for the Saul Bass was Art Goodman) and we are extremely grateful to Matt Terich for having recreated all these beautiful glyphs.

If you want to see a good application of this typeface to an existing layout, you can check this Tumblr theme, we’ve recently reviewed.

Crowleywebb and its absolutely typographic flash website

crowleywebb-typographic-flash-website

Crowleywebb is an AD agency located in Buffalo with a quite surprisingly unconventional flash website.  I think it’s a bold move for an agency to put aside any graphic treatments, relying only on typography and copy. As you will see, the splash page is brilliant, the text treatment is simple yet effective and the transitions are smooth and neat (though I don’t love very much the blurred menu on the left bottom corner – not displayed in the screenshot).

Tip: if you have 10” left, take a look at the BORING video, which in fact is anything but boring (you can find the link in the website’s homepage).

A curious line-height typografic treatment from Hitotoki

hitotoki-googlemaps-mashup-typographical-treatment

According to the website’s About page, Hitotoki

is a Japanese noun comprised of two components: hito or “one” and toki or “time,” and is often translated as “a moment.” In common usage, it can be used to describe any brief, singular stretch of time (if we share a meal someday, you can call that a hitotoki).

To put it in an easy way, Hitotoki is a narrative project I’ve found via Konigi, that collects novels related, a way or another, to a specific location. While Konigi points out the use of a Google map mash-up as navigation system (hovering over a thumb make the map move and vice versa), I was instead fascinated by this websites’s typographic treatment.

In fact, using Hoefler text with a strict line-height space make home page titles slighlty overlapping in a haphazard, designless way that perfectly fits in the trembling, hand-drawn layout frame.

So if you’re looking for a fresh, organic typographic treatment for your website design, maybe you should really give a glance at Hitotoki.

Shopping losts: little lists turned into typographical treats

Shoppinglosts inspirational typographical lists

Shopping lists is a fab typographical project: this blog’s aim is turning little lost shopping lists into typography posters, showing that some poetry can be found also in a neglected piece of paper, trashed onto some store’s floor.

For each saved specimen, Shopping Lost displays the original shopping list, who found it, where it was found and the results after the typograhical boost.

If you like it, you too can send a shopping list you’ve found to Simon Attwater, the mastermind behind this project, so that he’ll turn it into something magnificent and treasurable.

Kylesteed’s hand drawn font

Kylesteed's free hand drawn font

Sometimes you can get tired of perfectly shaped types or you just want for your website’s typography that little organic hint which only a hand drawn font can give you.

If you’re needy for inspiration you can look at Kyle Steed’s portfolio entirely based on his Steed, a nice vector font that Kyle decided to share with us.

TypeTees T-shirts pagination

typetees-tshirt-inspirational-pagination

If you’re a typography geek as I am, you already know it, but for those rerefied minds that didn’t have yet the pleasure to discover it, Typetees is an online shop dedicated to showcase the best typographical tees available on the web.

The tees are amazing and the overall layout feel is clean, fresh and quite agreable, with big menu tabs and a really nice pagination system on the bottom right corner that really made me chukle.

Basically, pagination is made of pictures portraying next/previous t-shirt folded: when you hover your mouse over the “view prev”/”view next” button, the t-shirt “explodes” unfolding.

A typographic fight: The New Yorker’s keywords call-out

the New Yorker's keywords callout

Aside from its beeing a blast and a really entertaining specimen of geeks literature, Ellis Weiners’ piece published on the New Yorker’s online edition helps me illustrate how a very simple vertical line and a little shot of red can trick our attention into reading an otherwise neglected content.

In the overall economy of New Yorkers’ layout, keywords’ box, which essentially is nothing but a bunch of brave links squeezed in between the illustration and the main textual content running around it, could get suffocated by its two big brothers.

Moments like these a designer has to use a little graphic judo: in fact, having placed a simple vertical line prevented our eyes from mixing up textual contents, without having the global structure’s lightness comprised; on the other hand, the red color, which is used scarcely but consistently on the page, grabs our attention and make the keywords call-out pop out.

So the result is plesant and well balanced, with all the graphics elements working together in a rather harmonious and peaceful way.

As for an ending, here you are my very favorite quote from Ellis Weiner’s Subject:our marketing plan:

Then just Digg your uploads in a viral spiral to your social networks via an FB/MS interlink torrent. You may have gotten the blast e-mail from Jason Zepp, your acquiring editor, saying that people who do this sort of thing will go to Hell, but just ignore it.