It’s no coincidence that the vast majority of the websites featured in this article belong to individuals and organisations employed in some form of visual communication- whether it’s web design, graphic design or even cinematography. These people know what it takes to make a really great, original looking site and they’re not afraid to use it. Negative space typography can be difficult to read, but it doesn’t have to be. The examples explored below prove that it can add clarity to any design.

1. Alpha Multimedia Solutions

Alpha Multimedia Solutions is a web development and video production agency with a keen eye for cutting-edge graphic design. The word “ALPHA”, capitalized and in a large, negative typeface, can be seen on its homepage, each letter merged into the page’s main body.

2. Freelancing

There’s lots of negative space typography going on here, particularly on the homepage, where it can be seen in the “Follow Us” Twitter button, the page’s titles and the Freelancing logo itself.

3. FedEx

At first glance, you might wonder where the negative space typography is to be found here. In fact, it’s extremely subtle. You’ll find it in the FedEx logo itself, found on everything FedEx does. Take a look between the “E” and the “X” and you can see a little arrow. Found it yet? Not really part of the web design, but interesting nonetheless.

4. Rikcat Industries

This website is all about simplicity, clarity and minimalism. Negative space is used in the Rikcat Industries logo as well as in some of the call-to-action buttons. It looks really slick.

5. Pixel Umbrella

Nick Robinson of Pixel Umbrella is a master of graphic and web design. He often uses negative space typography in his own work. Unsurprisingly, it can also be found in his own site too, most noticeably in the header, where the word “Pixel” occupies negative space in a small, pixel-like square.

6. Klipp og Lim

If you can steal your eyes away from the sumptuous images of chocolates in the slideshow on Klipp og Lim’s homepage, you’ll be able to spot the company logo and navigation buttons, which have been cut out of a solid black bar.

7. siteInspire

siteInspire offers a portfolio of beautifully designed websites as well as an informative web design blog, so it’s only right that its own site should look spectacular too. You can find negative space typography in the logo in the top left of the screen, as well as in the categories list.

8. SUM

Branding and communications agency, SUM, uses negative space typography in its Venn diagram-like logo for a really crisp look. When visitors to the site hover over the buttons in the navigation bar, they turn red and the words become negative. Very clever.

9. Dropbox

Dropbox is a fantastic app renowned for its simple and straightforward design. Its website is no different: visitors are efficiently ushered into downloading the free app as there’s very little else you can do. The main “Download Dropbox” call-to-action button uses negative space typography and the results are, visually, incredibly clear.

10. Bonsai

Like Rikcat Industries, Bonsai’s website is highly professional with a minimal black-and-white aesthetic. Negative space typography can be found in the square Bonsai logo, which looks really clean.

11. Gravica Design

Gravica Design is a highly respected visual communication strategy firm based in Philadelphia. Negative space typography can be seen throughout the site, letting the company achieve a really stylish, modern design with plenty of white space.

12. ab+c

Homepages don’t come much cleverer than this super-cool design from web development agency ab+c. It features a series of words, some in negative typefaces, which change to reveal new sentences and meanings. I love it!

13. Narrow Design

Portfolio sites can often be boring, but not this one from Narrow Design. Visitors can scroll through past work quickly by simply moving their mouse up and down. The titles of each project are displayed in negative typefaces.

14. Socio Design

Negative space typography can be found on the homepage and throughout the site of trendy graphic design agency, Socio Design. Words are cut out of blocks of colour, creating a really up-to-the-minute look.

15. Adobe

What Adobe doesn’t know about graphic design, frankly, is not worth knowing. It comes as know surprise to me, therefore, that they use negative space typography in everything they do, including their website. Where? In its logo.

16. Digital Devotion

This German website manages to use tons of pink and purple on its website yet maintain a degree of class. Negative space typography is used in the banner at the top and in the navigation buttons on the left-hand side.

17. Spectra

Spectra’s website is unique: a perfect marriage of spectacular design and great user experience. Negative space typography can be seen on most of the buttons on the site, of which there are, literally, hundreds.

18. Smart

You’ll be hard pressed to find a website more interactive than this one from Smart, the car manufacturer. Visitors are invited to “Design” their own Smart car or “Drive” one interactively on their computer, over various courses. Both of these words are written negatively on small black blocks.

19. David Hellmann

The logo in the top left corner of David Hellmann’s site has been cut out of a block of blue, revealing the background colour beneath. Roll your mouse over it and the words change, guiding visitors back to “Home Sweet Home”.

20. Eclectic Pulp

Similar to David Hellman’s site, the logo in the top left of this page incorporates negative space typography, with the words removed from a block of colour to reveal the background underneath. The same can be said of the buttons in the navigation bar, which change colour when clicked.

21. Jan Reichle

Jan Reichle is a director/cinematographer. His great work covers everything from corporate to music videos. The use of negative space typography could not be clearer on his site, with a large letter “R”, in negative of course, on the left hand side of the page.

22. AIGA/NY

Negative space typography can be seen used in AIGA/NY’s logo, with the word “AIGA” cut out of a solid black square. It’s also apparent in the various navigation buttons, which turn into red blocks of colour, throughout the site.

23. Jason Mayo

Jason Mayo’s logo is simple, but superb. It wobbles, changes colour slightly and then settles into a solid black circle with the word Mayo cut out in the middle.

24. LifeLab

Unlike some of the more monotone examples in this list, Australian real estate company, LifeLab, has gone for a colourful, vibrant look. Nevertheless, negative space typography can be seen throughout, such as in the logo and the navigation bar.

25. The Brand Union

You’d be hard-pressed to find a better use of negative space typography than in the amazing logo for The Brand Union- a great mix of negative space and colour. When visitors first open the page, they are greeted with a large, expanding version of the logo itself.

Garrett Olinger

Mash Creative – Mark Bloom

Homepage: mashcreative.co.uk
Twitter: @MashCreative
Buy this print!

Mark Ryan

Colin Bright

What a great idea for a school project too, they are provided with an area code and were to typographically experiment with it for the phone book cover. I wish my teachers did something like this!

Robert Missen

Parachute

Homepage: Parachute

David Brier (a branding Jedi)

Homepage: Rising Above the Noise
Twitter: @DavidBrier
Oh, and David wrote a book too! Rising Above the Noise

Font Fresh

Homepage: Typographics
This one really should count as five pieces, as it takes up half of the page length. Certainly worth the addition, kudos to Font Fresh!

Paulo W

Fonts Page: Intellecta Design @ MyFonts

James Davies

George Birch

Erik Trysberg

Homepage: De:Try

Rachel Herzig

An ambigram! Totally love this one, pick up your notebook and flip it over or rotate your head in an odd manner and see how both words are identical, but flipped.

Zen Killa

Homepage: Zenkilla.com

Barral Fabien

Homepages: Barral Fabien – Portfolio
Prints

Which ones do you enjoy, and why? You can also add me on Behance or Twitter.

Prepare your canvas

Make a new canvas about 1200×600 or higher, double click the ‘background’ layer to unlock it, and create a new layer.

Go Crazy

Seriously. Just use a soft round brush and do what you can to make it a nice collage of color. Use any colors you’d like. Change the size of the brushes and use opacity to darken / lighten some of the areas.

Add a background

I added a dark gray background gradient with a subtle fade to have a better idea how it’s going to turn out in the end. Select the background layer, select your foreground and background color, then use the gradient tool to add a simple background.

Liquify the colors

Photoshop’s liquify tool will manipulate lines by bending them a certain direction, unlike the smudge tool which directly mixes the colors. Select the layer with all of the colors, and click Filter -> Liquify. You are taken to the realm of liquification.

I set my brush size around 130, and varied the density and pressure. I also changed the brush size to a lower one to acquire more detail afterward. Your goal is to use the forward warp tool and the twirl clockwise tool to get a form that you like and one that mixes the colors to a detailed degree. Simply make strokes with the brush in different directions.Try to keep it somewhat rectangular to be able to fit it inside the letters in the next steps.

I acquired this effect by using a smaller brush and continued to make loops. Uh, groovy!

Make your type

Choose a font. When you’re done typing what you want, drag the type layer below your color layer, hold down alt on the line between the two layers, and move it until you see cursor turns into a stamp-like thing, and click. The colors will now be a layer mask that exists within the positive space of the type.

You can do anything from here. I changed the hue (Command + U or CTRL + U) to a different color and discarded the hippie colors (yet they will forever live on inside of me). You can go back into the liquify filter, and now see what areas overlap the text.

Adding More Background Detail

I created a new layer above the background and used a large soft round brush with a low opacity to lighten up around “prana”. I also played around with the hue in search of one that I like, and added a 3px black stroke with 30% opacity.

I then created a new layer, rendered clouds (using black and white) and set the opacity to a lower percentage. I also settled on turning the text black and white.

Adding Stars

Add a new layer, and use small soft round brushes set at 50% with a white color to create a starry effect. By changing the opacity and size it makes them have depth. You can also get star brushes here.

Adding a Reflection

Finally, flatten the “color” layer with the text layer by selecting both with Command (or CTRL on Windows) and pressing Command + E (or CTRL + E) to merge them.

Pressed Command + J to duplicate it, and Command + T to transform the duplicated layer. Right click and select “flip vertically” and drag the layer just under your text, and press enter.

At the bottom of the Layers window, select “create vector mask. Select your gradient tool (use black and white) and drag until you find a reflection that you like.

You can also add more text to appear subtly in the background by writing it and lowering the opacity to 4 or 5 percent. I did this to the top and bottom of mine.

Results

…And why didn’t I drink this at the switch of the decade? The hand drawn type makes it stand out from the common Serif type on the front of wine bottles, and even the twist-offs are branded. Notice how the labels resemble torn-out pages with the ring-holes on top.

Sweet. For those who want to type-up their walls (and want some inspiration to glue their own ideas to their walls), Veer offers a typographic wall decal that you can take apart and build into different shapes. Neato.

If I saw someone walking in the street with one of these, I would be tempted to ask what letter it was supposed to be. Maybe a P. Or an I. It’s the subtlety of this that I like. It doesn’t have to shout typography at you, but it can if it wants to.

Nicely done by Taxi Studio. “Venezuelan Black” can almost even pass as a name of a typeface. If one knows what they’re doing, using multiple fonts in a design can drastically increase it’s typographic color. This is a great example.

Oh man, who would have thought that a conceptual repackaging of Monopoly would get so much critical feedback? Created by Andy Mangold, this Monopoly has sparked a lot of discussion whether the design affects the functionality and usability of the game and discredits it’s previous all-ages appearance. I feel that a redesign of the classic board is 100 times more interesting than a far-out board concept like the “Ford Thunderbird 50th Anniversary Monopoly Board“. Although it sure would be fun to try something like Googleopoly for those social media lovers (despite the type, of course).

Now here’s an interesting one. Brut has an excellent logo and a suitable green package for it, but then it’s destroyed by all the other gibberish text on the front that seems like it wants to have typographic color but doesn’t. Certainly a leap in front of most deodorant designs, but still lacking so much potential. Better luck next time Brut, and stop the animal testing and chemical-based formulas while you’re at it.

And while still on the subject of environmentalism and carbon footprint, these guys started selling water in boxes making a blatant environmental statement on the front. So many products now have what I like to call “noise” on the front which distracts you from what you should be seeing. A minimalist typographic approach suits this product perfectly.

Marcie Hicks uses the simple yet clever concept of putting a closing elastic straight through a Helvetica “BILLS”, turning the “S” into a dollar sign. You can buy it here.

Simon Alander does a great illustrated job of relabeling a wine bottle for his mother’s 50th birthday. The entirety of the product is black and white making the classy thin type and the 50 illustration outstanding.

You might be thinking “what in the world is that?!” like I was when I first saw this image. This is honestly the single most original idea I’ve ever heard of for a piece of hardware. Each of those “matches” is actually a 5gb memory stick which only becomes active when you “light it” on the side of the box followed by plugging it into the device.

In terms of practicality it may not score full marks, but the device uses remarkable typographic branding on a remarkable idea. This was created by Efir Rifat and Burak Kaynak. Check out Burak Kaynak’s portfolio, he has some neat stuff in there.

Videal  Natural Energy Drink.

Starbucks I’m very happy for you and ima gonna let you finish, but Studio 43 has the best coffee package design of all time.

Gness Music packaging design by Effektive Design. I always liked great looking labels on plain Boxes. Behance Network does the same with their box design.

The roudup covers everything from selected type foundries to web-type inspiration. Take a look at everything here thoroughly and you’ll warp into a better typographer without even knowing it.

Here we go!

1. Hoefler & Frere-Jones
   Although being the easiest domain name to remember with anything regarding typography, Hoefler & Frere-Jones sell high-end fonts (and nice ones too). Although the cost of the fonts doesn’t fit everyone’s wallets, the cost of viewing their site is free, and it’s beautiful.
2. Typography Served
   Run and integrated with Behance, Typography Served serves as a great place to showcase some of the best typography submitted to Behance.
   
3. Siteinspire’s “typography” section
   Siteinspire is a credible CSS gallery breaking down websites into categories. Check out their Typography section.
   
4. I love Typography
   This again? It’s been all over the internet, but such a great resource that it’s worth mentioning again. One of the most infamous typography blogs on the net.
   
5. Typeculture
   Exploring the inner workings of type, typeculture is the homepage of Mark Jamra and sells fonts and has an “academic resource” which has some excellent articles about typography. Check it out!
   
6. The Font Feed
   Both their font blog (‘type tips’) and Handpicked Typefaces section are worth taking a look at, especially their Festive Engraved Type tutorial (I’m a sucker for vintage style type!)
   
7. The Grid System
   Learn about the integration of grids with typography. Search for “Vertical Rhythm” and that’s where your web type gets to the nitty gritties.
   
8. The Elements of Typographic Style Applied to the Web
   This is where you will learn everything about web typography. Don’t understimate the website’s power by basing it on it’s background, the content is rich. The Elements of Typographic Style Applied to the web is something that would benefit every web designer and make the web a better place. And once CSS3 comes out, an even BETTER place.
   
9. The Typographers Calendar
   Now here’s a niche notepad that’s right up there with Action Books and Moleskines. Not only does it have multiple grid types in the book for typographic creation, but also has a nice website
   
10. Typotheque
    With a higher selection yet higher price than Hoefler & Frere-Jones, Typotheque is a great resource for those knee deep in letters.
    
11. Typographer.de
    Wow, these typographers are in the process of making a program to help you practice your typography skills. Keep an eye on the progress!
    
12. Typophile
    So there’s finally a place to connect with others equally as happy about type as you are in this forum site.
    
13. Death by Kerning
    Shikha’s typography blog covers packaging, and print type. Don’t underestimate it for being on Blogspot!
    
14. Fontstruct
    An amazing tool for online font creation. Something you can spend hours on
    
15. Swiss Legacy
    Oh sweet sweet type blogs…

    

16. BONUS SITE : Type Tweets
    Guess what it’s about? There’s a twitter API for everything now, and Type Tweets is amongst the best for us typeheads.