It’s easy to make a website, but it’s difficult to create a comprehensive online experience that’s functional, easy to navigate, and beautiful. Typography is a crucial element of any well-designed site. Font and color choices can be employed to capture a mood, to suggest trustworthiness, whimsy, sophistication, and more. When it comes to words, these 15 sites are doing it right.
Rookie’s typography gives one a good idea of its ethos as an ever-changing multimedia magazine crafted for and by teenage girls. The header remains the same: confident capitals with a pleasantly sketchy vibe. Smooth sans serif fonts coexist with quirky handwritten ones all down the page. There is a title card that changes every month in accordance with that month’s unifying thematic concept.
Online publication The Intercept takes the news beyond clean partitions and black-on-white type. The site is an engaging collage of words and photography that makes use of pale yellows and sky blues, typewriter accents, bold strikethroughs and showy serifs. Beside the header is an underscore that indicates the dynamic nature of journalism.
This is a prime example of site on which the typography mirrors the product. Noah, a street wear brand from New York City, offers nautical-inspired clothing in muted vintage hues. Lettering is small, slightly antiquated, and venerable enough for the brand’s Biblical namesake. Clothing descriptions are rendered in a very narrow sans serif typeface. Much like the clothing itself, the site combines the sensibilities of the old classics with meticulously modern craftsmanship.
Lyft challenges the austere slim letters and black-and-white color schemes that are currently in style. The chunky, melted-together bubble letters of its logo appear twice on the website’s home page: in the top left corner and in a large background photo of a Lyft car. Traces of Lyft’s iconic bright fuchsia are everywhere. When one hovers the menu bar, the top-left logo turns pink.
One of the more interesting U.S. state tourism sites, Travel Oregon’s typography reflects the rugged character of the state. At the top, the menu items are in a raw, lively handwritten font, separated by rough dotted lines. Further down the page, important titles take on an elegant serif.
Whirled aims to inspire millions of people with shareable video content. A soft gray-and-white site with a calm sans serif is sophisticated enough for a company with such a lofty mission statement. But the memorable rainbow accents–each color corresponding to a different positive emotion–make it fun. The dot on the logo’s lowercase i changes color based on the emotion you select.
Scandinavian design is all the rage, and this Swedish studio does not disappoint. The site typography is minimalist, with a just a hint of je ne sais quoi-in this case, curiously spiky M’s and W’s. The studio name follows the reader down the page in tiny spaced-out capitals sliding around an invisible circle.
Play&Co’s geometric (yet readable!) black header looks like a natural continuation of the peaceful blue ocean in the background. The triple-line Menu icon is appropriately wavy, and circle-and-triangle motif continues in the logo and slideshow toggles, which reveal more information over soothing photographs. It’s quintessentially L.A. typography for the L.A.-based design and branding studio.
This Santa Monica music collective’s website is cleverly designed to resemble a hot sauce bottle. The logo pops in red and white against a solid golden-yellow background, while the group’s contact information is arranged in a distinctive black and white “Nutrition Facts” chart.
Stencil typefaces often look imposing and sometimes veer into corny, but the one that dominates the Girls Garage site provides subtle interest. Its spiny letters, put in white over soft blueprint-blue, speak to both construction and digital design. The font coexists with pattern squares (stripes, dots) and a stamp-like diamond logo.
WIRED reports on the intersection of technology and society, so it makes sense that their website balances bold, retro newspaper headlines with small, techno-futuristic font for bylines and labels. The content itself is a rounded, friendly serif that strikes a happy medium between authority and allure.
Clean, center-aligned sans serif type is ideal for Present & Correct, a shop that sells stationery and office supplies to the organization enthusiasts of London. An ampersand placed between two front slashes forms an elegant focal point on the page, and even the dropdown menu options are neatly centered.
The name of this French art/fashion/society magazine translates to “mixed.” The magazine logo and the site’s menu items are a mixture of different-sized letters, including a cheeky part-capital, part-lowercase i, while the articles are in readable sans serif type. The site is overlayed with the letters MIXTE, rendered in gray and white shapes and arranged in an X-formation.
This site, the digital home of a quaint Colorado inn, puts a Wes Anderson-esque spin on mountain culture. Scrolling down, one encounters a range of fonts: rustic typewriter, tidy “handwritten” cursive, and italicized capitals in mellow shades of gold and teal. Far from being overwhelming, the variety is an aesthetic delight.
Washington, D.C.-based Cut Seven markets itself as a groundbreaking “sports conditioning studio,” and their website features an eye-catching logo that doubles as a visual pun on the brand name. Wide capital letters are diagonally sliced-an intense, modern effect worthy of an intense workout program. The rest of the minimalist website is in sleek yet demanding white capitals.
These days, many sites follow a tried-and-true minimalist recipe: thin black capitals on a white background, with a central menu bar or dropdown menu. But that’s not the only way to make a website attractive. Web designers shouldn’t have to shy away from catchy colors and even subtle animations in text. It can be helpful to use a tasteful blend of different typefaces to express different moods: dependable yet fun, classic yet futuristic. It’s all in the typography.