How selecting the right fonts can complement your web design

Key quotes:

• "In this article, I will provide a set of rules that help you improve readability and legibility of your text content."
• "Having the right amount of characters on each line is key to the readability of your text."
• "Consider this advice on readability and line length from the Baymard Institute: “You should have around 60 characters per line if you want a good reading experience."
• "Having the right amount of characters on each line is key to the readability of your text.” For mobile devices, you should go for 30–40 characters per line ."
• "In web design you can achieve an optimal number of characters per line by restricting the width of your text blocks using em or pixels."
• "Most user interfaces require text elements of various sizes (button copy, field labels, section headers, etc)."

Key quotes:

• "Everywhere you look there is typography and it’s our job as designers to learn how to properly use typography to communicate the right message."
• "Originally, the typeface is a particular design of type, while a font is a type in a particular size and weight."
• "When done right, different fonts can really complement each other, create visual hierarchy and help elevate your brand and the message you are communicating."
• "Once you have a good idea of the fonts that you will be using you need to think about how they are going to be used in size, weight, and spacing (kerning and leading) to guide the user as they navigate the page."
• "Always be asking yourself “What should attract the user first?” Knowing that your design needs to communicate a certain message and that all fonts carry a personality, it’s important to make sure that you're sending the right message."
• "In addition to communicating the right message, you should always make sure that the fonts you are using are easily readable at the size they will be displayed in real time."

Key quotes:

• "It’s also important to mind the gap and avoid having a single word on the last line of a paragraph (otherwise known as a widow): With the growing popularity of type design, the sea of typefaces from which to choose gets bigger each year."
• "Having the right amount of characters on each line is key to the comfortable reading of your text."
• "A rule of thumb for mobile typography is to stick to 30–40 characters per line (line length for narrow columns of text in newspapers or magazines)."
• "In web design, you can achieve an optimal number of characters per line by restricting the width of your text blocks using em or pixels."
• "By increasing the leading, you increase the vertical white space between lines of text, generally improving readability in exchange for screen real estate."
• "“The main factors that will influence the readability of your text are a good balance between font size and line spacing” You should use color and contrast to help users see and interpret your text."

Key quotes:

• "Before we start looking for a font to add to our design and combine it with our body text font, we need to ask ourselves: do we really need more than one font? Before we start looking for a font to add to our design and combine it with our body text font, we need to ask ourselves: do we really need more than one font? It was a modern geometric sans-serif font when it was first designed and it still feels modern to this day."
• "There are many features that makes the two fonts similar but yet, they’re different enough to work well as a combination."
• "Another way to evaluate a font combination is to take a close look at their x-heights, to see if they match."
• "Try to establish whether a combination works or not, in a similar way to how we compared fonts based on x-height, but focus more on the overall proportions."
• "Evaluating fonts based on the time period works well with contrast or harmony."

Key quotes:

• "Good for: Business, portfolios, CVs, and publications.Check out this Wix template featuring these fonts: Wedding videographers website template."
• "The neo-grotesque sans serif typeface was developed by Google as the system font for its mobile operating system, Android, to be “modern and approachable.” Good for: Business, fitness, and technology.Check out this Wix template featuring these fonts: Karate school website template."
• "Good for: Family and kids-oriented businesses, online stores, DIY, and blogs.Check out this Wix template featuring these fonts: Comic convention website template."
• "Good for: Business, online stores, portfolios, and photography.Check out this Wix template featuring these fonts: Plant boutique website template."
• "Good for: Business, online stores, portfolios, and photography.Check out this Wix template featuring these fonts: Music artist website template."
• "Good for: Business, fashion, DIY, blogs, and food.Check out this Wix template featuring these fonts: Beauty salon website template."

Transcript: You want to know how to stop wasting hours trying to choose the right font this video is gonna help you do that hey everybody what's up and welcome to another segment of designer mind where I try to help you become a better designer and in this episode I got a question about how I choose fonts for my project and I do want to share some of my learnings or the process that I've developed because obviously when I was just starting out as a designer I used to trust my gut feeling just look at a lot of funds waste hours trying to look at you know fonts and try to make sure that is this the good fit for this project or not or just look up at what other people are doing or is it a trendy font and use that and obviously that wasn't very successful in terms of I couldn't make the right decision for each project and as I said I wasted so much time and so here's the framework of how I think about this today first of all let's try to understand what is what are we trying to do... See more →