13 Examples of Websites with Safe Typography


1.ECC lighting

Starting with e-commerce, ECC is a New Zealand site that sources European lighting and furniture.

The product pages use a large Helvetica typeface with punctuation added to good effect.

These are designer products and the prices are high, which seems to be a theme at the moment for bigger and bolder typography, featured on considered designer/shopping websites, but less so elsewhere.

There could be a practical reason for this: agencies and high-end e-commerce tend to have smaller, bespoke sites, where it may be easier to implement this type of typography than with customized or “ready-to-use” solutions.

I expect that to change somewhat in 2016, after all, Apple has long proven the value of simplicity and consistency in bringing a mainstream, albeit expensive, product to market.

Websites like Lush.co.uk show how great photography and larger text can combine for a more impactful e-commerce experience.

As you can see, typography is used architecturally on the ECC homepage, with three or four different header menus becoming a design feature, using different text orientations, shadows and weighted borders complementary.

Using typography to show off is a hallmark of a number of websites in this roundup.

CCE homepage

2. Few

Here is the first web design agency on the list.

Few have a typography-focused logo, and it underscores that with an animation when the homepage loads.


What’s interesting is that Few uses sans serif typography throughout (see images i and ii below), which is broadly a web convention, but then switches to serif (Grad) for its main message .

Because the text here is so large, it works well, and the serifs help add a cultured flavor to the message.

Typography is all about context, and here few wanted to convey something more authentic and perhaps long-established or part of a design tradition.






3. Simple as milk

A design agency quite more hipster then, Simple as Milk. This site is small but it’s great to see what can be done with typography and color alone.

Ghost buttons, underlines and light palette work wonders.

The big, chunky text theme (Gotham Rounded) continues even in the “contact us” form, which is full-page (see the third photo below).

easy as milk

easy as milk

The “get in touch” form is full screen and uses the same friendly Gotham Rounded font.

easy as milk

4. Brdr. Kruger

Brdr. Krüger, yes, another extremely expensive designer furniture store.

The screenshots speak for themselves here, with large, layered text (Gotham) standing out against the background.

I found a product page where the overlay text got somewhat lost in the background image, which highlights the danger of sites that use overlay text.

If the CMS just allows black or white text and doesn’t allow highlighted text (to select it in the image), it can be difficult to find a suitable image, especially for a small multitasking web team.

Brdr.  Kruger

Brdr.  Kruger

5.Warby Parker

A major player in American eyewear, both online and on the street, Warby Parker brought cool to the world of opticians.

He shows it off powerfully on his website, using huge product images (not shown here, but go check them out), lots of white space, and big text for both headers and descriptions. of products.

Warby Parker website

The product pages have very clear descriptions with a 24px size Utopia Std font.

warby parker website

Further down the product page, this Proxima Nova typeface is large, centered, and easy to read.

warby parker product page


A big hitter now. Spotify doesn’t mess around when it comes to the main message on its homepage.

The sans serif font is Circular, and it looks very pretty too.


7. Foreword

Here’s an agency that uses a slab serif typeface (Adelle, typical used for more intensive editorial) throughout, giving a demanding yet modern feel. The title is energized by its underlining.

The foreword shows consistency by using underlines to also highlight the header menu.

agency foreword

agency foreword

8. Weston Vierregger

Weston Vierregger is an independent designer. His website shows how colorful underlines and a very clean sans serif typeface (LLCircular Book) can provide something to entertain the eye.

Of course, as a designer, Weston here uses the typeface, color, and rather stylish gray background to show off his self-confidence.


9. Design by Brian Hoff

Brian Hoff Design has already featured in our roundup of web design trends for 2016, for its outstanding hover states.

Here I’ve included the company’s website again because of the colorful typography (using Gibson), which excels with incredible contrast when combined with even more colorful backgrounds.

About Brian Hoff

brian hoff design

brian hoff design

10. Huge

Huge was previously included in our roundup of super colorful websites, for its cheerful pink.

The combination of serif and sans serif (Galaxie Italic and Avant Garde), sometimes in the same line, is unusual and innovative.

just thursday



11. Berlin Art Prize

A personal favorite here from the art world, albeit a very small and simple (three or four page) WordPress site.

The Berlin Art Prize site contains a few images but is distinguished by the use of full-screen text. I’m also a big fan of white space.

See the GIFs below for a cheeky hover effect on the side menu and a color transition when you scroll down to the footer.

berlin art prize

berlin art prize menu

berlin art prize footer

12. McColl Center

The McColl Center is a gallery and studio in Charlotte.

His website is a bit odd, it feels a bit scattered, with a range of colors, weights, and type sizes (all Brandon Grotesque).

That said, I liked the aesthetics of the site (mainly the exhibit tagline and blog headlines that turn orange when clicked), but ease of navigation is another matter (features are hard to click, the header menu is only present on inner pages, etc.).

mccoll center website

mccoll center website

13. Coins

The final selection, Pennies, shows just how simple a news site can be. A few images, blocky colors and decent sized text.

The header font here is serif, which is perhaps odd considering the app seems to be all about sans serif and large text with a flat design.

One place this site falls down is the contrast in the third screenshot below, which shows gray text on a white background.

In fact, there is another page using a shade of gray over another, which may not be accessible to everyone.





About Author

Comments are closed.