7 great typography examples in web design
Your experiments with typography can largely affect your website. Here are some good typography designs that are impactful.
Every visitor that clicks on the link to your website is unconsciously judging its visual appeal. We’ve discussed about onboarding, landing pages, CTA, colour scheme, but there is one element in web designing that is often underestimated. “Typography”, where plain texts are infused with art to give them some style and personality.
Steve Jobs while at university, spent a lot of time on calligraphy tutorials and instructions, sharpening his skills in typefacing while thinking there was in fact no practical use of those skills in real life.
But thanks to his earlier involvement in calligraphy, Macintosh was the first computer with beautiful typography and that is why we enjoy several font and typeface options today.
‘Typeface’ and ‘font’ are two key elements in typography that have always been misunderstood to be the same.
Typeface refers to a group of characters, letters and numbers that share the same design. For example Garamond, Times, and Arial are typefaces. Whereas font is a specific style of typeface with a set width, size, and weight. For example, Arial is a typeface; 16pt Arial Bold is a font. So typeface is the creative part and font is the structure.
However it is common now to use both terms interchangeably.
Typographies in web design need not always be intricate and look pretty. In many cases simple typography work wonders. Font size and spacing also matter a lot.
Here are a few examples of websites with the best typography
Antro is a creative agency that focuses on User experience with reflection and exploration.
Their homepage consists of the agency name in large font with a typeface mixture. The letters decrease in thickness from left to right, thus they can’t be categorised into a single typeface or font.
As you scroll down you see larger and thicker headings combined with smaller and thinner paragraphs. The typeface used in these is Brandon-Grotesque which is of sans-serif type.
2. Vintage Hope
Vintage Hope is a charity helping children in Malawi by collecting your old china dishes to fund the charity.
The main page has a very beautiful image, that is topped off with finger-painted type font which gives a very hand drawn feel, perfectly complimenting a charity for children theme.
Apart from the finger-painted type heading, the smaller headings are Belta Bold typeface. The smaller text are of the Helvetica, Arial, Sans-Serif family.
Level Up Life is a simple gaming space. It’s designed to track your achievements in and reward you for completing them. The game proposes exercises in productivity, asking you to imagine your life as a game and turn your tasks into quests. It’s probably the only place you will never procrastinate.
The Website is consistent with a single typeface throughout — Share tech mono and share tech typeface of sans-serif type. Colours switching only between white, green and blue. Weight ranging from light to medium. The typeface gives a retro gaming feel and the image icons complement the text.
Rally interactive is a great example of a minimalistic web design that works well. This is also a great example for a form type.
The typeface used in both the headline and form is Chronicle display, a new suite of headline faces that brings strength and utility to the classic serif. Chronicle Display was designed for use at large sizes and contains three different widths, six different weights (what you see here are regular and light weights) and versions for two different sizes, each available in both roman and italic.
5. Child’s own
Child’s own is a website that takes pictures sketched and drawn by kids and converts them into soft toys.
Here you have two contrasting fonts that work well together.
The headings are of typeface Gloria Hallelujah, cursive. Which is contrasting to the Quicksand, sans-serif typeface used for the instruction part. The heading text font gives a playful design to the website which centralizes on the ‘kids’ theme.
6. Thrivesolo
This is a project management software, the headline text is of simple font which delivers a crisp message.
This kind of straightforward message through text works best with a typeface that is ideally formal and the letters are distinctive.
Text written inside quotes is not italicised as it simply informs the reader about the usability of the tool.
The typeface used consistently on all text is clarendon Light, georgia.
7. Hix Snedeker
This real estate development company, uses Proxima-Nova, sans serif typeface for the headline and sub-heading, however in the headline the usage of mosaic type colour filling gives a unique look to it. The headline is user interfaced with the cursor this makes the interior pattern move along with the cursor.
Some font pairing examples
With font pairing there is an age-old rule that goes as follows: concord or contrast, but don’t conflict.
Here are a few examples of tried and tested font-pairs that are guaranteed to avoid conflict.
Checking for color contrast in your design for optimal readability is equally important.
For example White as text work with red and blue backgrounds rather than yellow and green backgrounds.
Conclusion
Typography is an essential factor that determines the entire stylizing factor in a website. It is the first thing that captures gaze among visitors and has to play the role of informing as well as providing a personality to the website.
As a web designer avoiding carelessness with typography is a must. At the same time experimenting and A/b testing can provide a lot of insight into what work visually and what doesn’t.
If you have thoughts to share on typography and the typography best designs, write in the comment section below to share it to the rest of the world.
Share this blog if you think it would help someone get some typography inspiration :)
Use Visual Inspector to inspect and make live typeface changes on any website for FREE.
