75+ type driven sites

When we talk about the visual elements of a website, we are usually referring to images: photos, illustrations, icons, possibly the UI. What we tend to forget is that text is visual too. It is, after all, the visual representation of the spoken word. And text, just like images, can be beautiful or ugly, intriguing or dull, striking or bland, in appearance.

The majority of sites out there use purely functional text. In other words, even though the typography might be passable, and the text readable, it is there to be read; any visual interest is picked up by images. However, there are some, rather brave, designers use type as content and visual interest, and have kept images to bare minimum, or even done away with them altogether. I say brave because it is a difficult approach to get ‘right’, as it pushes users out of their comfort zone and it can produce a very bold, stark look.

some, rather brave, designers use type as content and visual interest

This approach is not simply a case of ditching the use of any images and filling the space up with lots of text. That would be visually off putting, really pretty boring, and definitely not user-friendly. For this style to work, less is definitely more with each text element being very carefully placed on the screen. The type tends to be display, often oversized, although some sites do use body type in the same way, to good effect. In fact, it could be argued that there are two distinct sub genres: large, display type with a more stylish feel and small body type with a very basic, bare bones feel.

Black on white or white on black is fairly standard, but in places color is used to add an extra dimension. In some of these sites, images appear on interaction, or a text animation is triggered to dramatic effect. With many of these examples, a screen shot cannot do them justice, they have to be experienced, and played with.

The obvious examples of text only sites are type collections, and while some might say that they shouldn’t count here I feel they are worth including if they present their content well and in a visually engaging way. (Not all font sites do.)

What stood out to me when putting together this collection is that the majority of sites embracing this approach tend to be for designers/design agencies, or others in creative fields (although there are some notable exceptions, like the NZ cleaners, or the Irish fish & chip shop). Perhaps this is because there is an urge to push the boundaries which usually has to be resisted when producing work for clients, whereas we don’t feel the need to play it safe when it’s about ourselves. The key here is creativity and confidence, it is a bold style that makes a very strong statement. There is no middle ground with this approach; when it misses it misses by a mile, but when it works it really works. Enjoy!

Fullstop newparagraph

Minnix

Jessica Strelioff

Elbow

Context

HTML arrows

Avery review

Edmundo 

Graham Hicks

Emile Sadria

Wade Garret

Greater than or equal to

 

Dua

Jane Smith Agency

Triebwerk

Soulwire

Playground paris

Bronze

Design census

VSCO

TGW studio

b14

Durimel

Jason Briscoe

RSQ

Le top

Other

Aku

This is alcohol

East room

Alejandro Matamala

Megs tailoring

Stemme

Hej

Fictive kin

Geordie Wood

Oak

At your request

Camelot typefaces

Central St. Martins 2016 show

Yields

The Lobster movie

MaisonNue

Grano

Duezero

Second cousins studio

David Prati

Camp quiet

Maximillion McLaughlin

Valentino Borghesi

Arthur Collin

Agenzia indipendente diricerca

Justin Parra

Eugene Lee

Love and money

Maxine Tsang

San Francisco Coffee Finder

Bloomberg design conference 2016

Code united

Superset

Giorgio Favotto

Neobred

Grafik

Fish shop

Mediumextrabold

Design jobs board

Arc

ZZ

Pierre

Vincent Tavano

Hawraf

2016 promo

Danilo Campos

Hours after

Rebecca Lloyd Evans

R-typography

Eli Rousso

Plane site

Frere-Jones type

LAST DAY: Layers Pro Bundle – 4 Powerful WordPress Tools & More – only $39!

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}


Source: Web Designer Depot
75+ type driven sites

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.