As you may know, I’m big on minimal & typographical layouts.
A bright example of big typography on the web.
In this example, the white space (also know as negative space) all around the logotype erodes the basic form of the typefaces (e.g. the F’s stem or the T’s crossbar) creating a concise and extremely minimal design.
Notice also the word “fabric”, stripped of the vowels, and enclosed by the O’s counter.
High contrast colors and big typography emphasize the ironically boastful nature of this website introduction.
Amazeelabs light up the web scene with their nice, handmade, typographic light bulb.
The capital C in Lane Crawford’s logo stretches out vertically and completes itself leaning on the lower r stem, forming an almost full ellipse.
Each letter of this website’s titles is coloured in a different shade of the same colour. When you move your mouse over them, titles get a coloured background and the typography slightly changes colours.
Newswordy explains using a simple but gigantic sans-serif typography, the meaning of the most used (and often misused) buzzwords.
In fact, the project is a growing collection of these words, updated every weekday. Along with each word is a definition, a quote with its use in the media, and a news and Twitter feed on the subject.
Frank Chimero has explored the typographic and expressive possibilities of Web Open Font Format, creating this beautiful scrolling page.
I’m really excited to introduce to you Movie Title Stills Collection, one of my favourite references on the web for what concerns vintage (but also recent) typography.
I’m really thankful to Christian Annyas for providing this huge collection of screenshots and such an incredibile inspirational resource.
We admire the elegant and cunning way the reversed A inserts into the M‘s white space.
A nice black and white page using a three column layout: the nonaligned content boxes break the design scheme, bringing this page to life.
Vintage inspired dropcaps polish the impeccable typography of Adrian Pellettier‘s blog portfolio.
You can’t get much simpler (and elegant) than this: a silhouette logo mark, clean typography, two-toned color scheme and sparse graphic elements.
Oh, this blend tastes so good!
As new year’s resolution I’ll try to update more often this website. For now, here you have a nice example of good minimal b&w blog design. If you like the lettering, you’ll be happy to know that the type used is Tex Gyre Schola and you can download it for free here.
How am I supposed to categorize these impossibly beautiful display ampersands, packaged both as .eps vector files and opentype font? Are they typography or just icon design?
While I try to solve this “visual” conundrum, you can take a look at this website and find who really were Haäfe & Haph.
Mixing different weight and style and, possibly, different typefaces, is one of the most ancient trick in modern typography. The risk is that sometimes text is not enjoyable or readable, but we think this is not the case.
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 slightly embossed alphabetical menu lets you browse this website displaying tons of free fonts to download.
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 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.
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 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.
We’re enthralled by the way Andrew’s logo plays with Heltevica A negative space.
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).
According to the website’s About page, Hitotoki
is a Japanese noun comprised of two components:or “one” and 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 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.
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.
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.
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.