large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/7-great-typography-examples-in-web-design-20b99eecc35e?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> CanvasFlip 
Your experiments with typography can largely affect your website. Here are some good typography designs that are impactful.
<img alt="" src="https://cdn-images-1.medium.com/max/333/0*UKEp9kZKDfpLHZ0m.">Image courtesy designlisticle.com
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
<ol>
<li><a href="http://antro.ca/">Antro.ca</a></li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*b31hiO4ynbDLRrXWEFF4aQ.png">
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.<a href="http://www.vintagehope.co.uk/"> Vintage Hope</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*cQlUKf-MkKLd0Jlx.">
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.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*b31hiO4ynbDLRrXWEFF4aQ.png">
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.
3. <a href="http://lvluplife.com/">Level Up Life</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*yA2yv7Vs21lCcnpm.">
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.
4. <a href="http://rallyinteractive.com/">Rallyinteractive.com</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Zto2hWnsIkfi4gXd.">
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. <a href="https://www.childsown.com/">Child’s own</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*v_EWIXWypKD8k-ch.">
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. <a href="http://thrivesolo.com">Thrivesolo</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*w1MjDUcxKxW-iYOe.">
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. <a href="http://hixsnedeker.com">Hix Snedeker</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*DrsnjiTF0mMDN12T.">
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.
<img alt="" src="https://cdn-images-1.medium.com/max/535/0*lsFE53f3JP6ZdYG1."><img alt="" src="https://cdn-images-1.medium.com/max/535/0*CylB2mtdGjRS4ThN."><img alt="" src="https://cdn-images-1.medium.com/max/535/0*pdlpj3Cx1yF0kbBp."><img alt="" src="https://cdn-images-1.medium.com/max/535/0*uES7MGMPKF2_ZufE."><img alt="" src="https://cdn-images-1.medium.com/max/535/0*CJDl-zDw7XCZBKLd.">
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.
<img alt="" src="https://cdn-images-1.medium.com/max/395/0*sbcDEBRskLCRIIgh."><img alt="" src="https://cdn-images-1.medium.com/max/199/0*1YdGYj53ikXjGpBj."><img alt="" src="https://cdn-images-1.medium.com/max/200/0*hFkKVhvk92OYEBxv."><img alt="" src="https://cdn-images-1.medium.com/max/201/0*z_8ziNdZvZhr1y7D.">
<h3>Conclusion</h3>
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 <a href="https://www.canvasflip.com/visual-inspector/">Visual Inspector</a> to inspect and make live typeface changes on any website for FREE.
<img alt="" src="https://cdn-images-1.medium.com/max/800/0*bpWPgC6jP170r2dQ.">Fix design bugs in Live website without coding — <a href="https://www.canvasflip.com/visual-inspector/">Get Visual inspector FREE</a><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=20b99eecc35e" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/7-great-typography-examples-in-web-design-20b99eecc35e">7 great typography examples in web design</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

7 great typography examples in web design

7 great typography examples in web design

Top Stories