Jun 1

Web Design

Eric Phung

The Easiest Way to Choose the Right Font for Your Web Design

Besides building the image and quality of the website, the font plays an important role in creating the aesthetics and professionalism of the website. Few people know that fonts can affect the emotions of viewers.

If you do not choose the right fonts, it means that your website has failed to attract visitors. Selecting an effective font for a website is not difficult, so do not ignore this factor.

The following article will reveal the notes when choosing fonts and top beautiful fonts for professional website design.

1. A basic look at font in web design

1.1 Differences between fonts and typefaces

Font: A font is a character set consisting of letters, punctuation, numbers, etc., with the same shape, format, and specified size.

E.g: Arial Bold and Italic are two different fonts. In other words, a font is a set of letters of a typeface with its shapes and formats.

Typeface: The typeface is the font family, which is a family of letters that share the same design.

Each typeface is a collection of characters, each representing letters, numbers, punctuation, and symbols. The typeface is an umbrella of many types of fonts.

The-simple-definition-of-each-font-and-typeface-that-designers-need-to-know

‍

1.2 The classification of fonts in website design

In fact, you don't have to use too many fancy fonts to make an impression on the website.

If you need to use it properly, it will be effective. The following are common font types that you can refer to apply.

Serif

Serif is a font with a small feature on the ends of the stroke. This font is often found in popular documents, making it easier to read.

Times New Roman, Georgia, Palatino and Garamond are some common Serif typefaces.

Serif fonts are a great choice for websites that want to be seen as trustworthy, established, and reliable.

People-tend-to-use-basic-font-like-serif-because-of-trustworthy-and-established

Sans Serif

San serif is the opposite of serif font that has no stroke at the top and bottom in some characters. This font is often used as a screen font because it looks clean, simple, and modern.

Some common Sans Serif typefaces include Arial, Helvetica, and Tahoma.

Serif fonts are the go-to choice for startups or tech companies. Those are want to appear timely and cutting-edge, and more creative.

San-serif-is-contrast-with-serif-with-curve-and-flexibility-on-each-character

‍

Symbol

A type of font consisting of special characters and symbols, often used for decorative, symbolic, illustrative purposes, etc.

E.g: webdings, wingdings, etc.

Symbol font is difficult to use because it only includes special symbols.

It is advisable to limit the use of symbol fonts. The reason is that these symbols have a higher decorative meaning. And they are still monotonous and have not been improved.

Symbol-type-of-font-is-just-illustration-and-being-use-frequently

‍

Display

The displays are modern fonts incorporating all different shapes and styles and can be a little more carefree in comparison with text typeface.

Display fonts designed to be used for large headings. Those are displayed on billboards, advertisements, or magazines, etc.

Another-type-of-font-is-display-which-have-great-impact-on-title-heading

‍

Script

The script font is shaped like handwriting, with flowery extensions and slightly italic. However, script fonts are considered a bit difficult to use and quite limited in designs for print.

If you use too many script fonts for your text content, it will become very confusing and difficult to read. This situation will reduce the customer experience when accessing the website.

Script font is often used in wedding invitations, romantic book covers and historical designs, movie posters, etc.

introducing-script-font-for-complex-designer-want-to-do-classical-theme

‍

2. The 5 best notes about fonts in website design

After choosing the typeface, the next step is to use those fonts on the website appropriately.

Here are some notes about fonts in website design that you can refer to:

2.1 Fonts should be easy to read

Everyone has a different aesthetic. Sometimes a good font is not the font that most people are interested in.

So, if you're considering using new fonts on your web, keep in mind that your fonts need to meet a few standards:

Standard size from 12-14px
The spacing of letters is clear, easy to read
Line height set from 1.2 to 1.6 times font size (1.618 is the Golden Ratio)
Full bold, italic, underline formatting
Support on many different types of browsers
…

When choosing a font color, pay attention to how it matches the website background.

If the font color is close to the background color, it will cause discomfort. When the font color is too contrasted, it may cause glare, making it difficult to follow the information.

2.2 Avoid Using Too Many Fonts

Regardless of the topic of your website, it is always necessary to have a consistent font across the web. This unification gives the overall website a professional and consistent feel.

A few highlights, you can also use strange fonts to make an impression on visitors (Bold, italic, etc.). Here you go, there are a few things you need to know:

Do not use fonts of too many typefaces (only 1-2 fonts should be used on the website).
The fonts used should be of the same type.
Heading tags of the same level should have the same font.

Using-one-or-two-fonts-are-great-solution-and-also-make-it-easy-for-user-to-read

‍

2.3 Using some free fonts, typefaces, and typography on the Internet

Are you having a headache looking for free font sources?

Don't know where the best sites to download free fonts are?

Where do designers find fonts?

Here is a summary of the best free font sharing websites for you.

Youworkthem.com

YouWorkForThem has been designing and providing fonts for decades. And they currently offer 126,888 fonts from hundreds of different font foundries. (based on Youworkthem web).

Best of all, you automatically receive 10% back in-store credit for every $50 you accumulate, as well as saving big when you buy the Desktop and WebFont licenses together.

Both-paid-and-free-fonts-still-dope-and-designers-have-to-use-their-creativity-to-work-with-it

‍

Fontsinuse.com

Fonts In Use is a public archive of typography indexed by typeface, format, industry, and period.

Designers use the site for project research, type selection, and pairing, and discovering new ways to choose and use fonts.

A-variety-fonts-playground-for-users-to-spend-time-for-it

‍

Besides, Spotify also shows its creativity through Notting Hill Carnival with many creative and youthful fonts.

An-example-for-designer-found-the-best-fit-font-for-website

‍

In short, there are many fonts that are suitable for websites. However, not all fonts are effective for your website. Because each website has its own purposes.

Then, when applying fonts to the website, you need to keep in mind the notes when choosing the font for the website. It will help you create a good experience for your visitors.

A well-organized website will help the business image be upgraded and appreciated.