Are you sure you want to miss this list of excellent web fonts in 2019?

Click above[ Web design self-study platform]→upper right corner[...]→< strong >[Set asStar ★]

From Moke

As far as design elements are concerned, 90% of web design comes down to two elements: pictures and fonts. As the soul of design, the importance of fonts is self-evident. In the vast sea of ​​Internet, finding a satisfactory font is like finding a needle in a haystack. Due to financial reasons, people often hesitate between paid and free fonts. Don't worry, the friends of Mockplus have compiled a list of high-quality fonts for you, which can be satisfied for free. I hope that the efforts of Mockplus can contribute to your excellent design.

Tips: Designers, please develop good usage habits. Before using, Please check the terms of use of fonts~

Font safety is important

What are "safe" fonts? --Web safe fonts are fonts that are usually preinstalled on most devices - computers, mobile phones, smart TVs and tablets.

Why are web safe fonts important?

Ideally, you can choose any website font you want. In reality, the types of fonts you can use are limited. Most computers and web browsers come with a set of fonts pre-installed by the manufacturer, but they are usually not identical in design.

If you use a font that is not installed on the user's computer, your site will revert to a generic font, resulting in the font not being read or displayed as the default font on the user's device. This is very unfriendly to the UI design and user experience of the web page. If you want to keep your site's design and visual branding consistent, using web-safe fonts ensures your site looks exactly as you intend it to on different devices.

For example, when you use the prototyping tool Mockplus, you will also encounter the problem that the preview font on the web page is inconsistent with the preview font on the mobile phone. reason. So when you encounter font problems when using Mockplus, first check whether the corresponding fonts are installed in the computer~

Font application suggestions

1. Select a base font

Generally speaking, fonts are mainly divided into the following four types:

• Serif font

• Sans serif

• handwriting

• decorative body

2. Choose a font size larger than 12 points

3. Pay attention to the length of the text

4. Pay attention to spacing

A collection of 10 safe web fonts (with download address and CSS download address)

1. Arial

Arial is one of the most widely used designs of the past 30 years. Used in early IBM laser printers in 1982 by Monotype Imaging designers Robin Nicholas and Patricia Saunders. Arial has been the dominant screen font for decades due to its ease of readability in both large and small sizes and in a variety of applications.

Advertisements, book design, office communications, posters, large print ads

Download font:

https://www.fonts.com/font/monotype/arial

CSS font stack:

https://www.cssfontstack.com/arial

2. Calibri

Microsoft released Calibri and its implementation as the default font in many applications has gained universal acceptance. It is a humanistic sans serif font known for its warm and rounded lines. Calibri's compact layout makes it flexible to work with various text sizes.

Availability: Digital Media

Download Fonts:

https://www.fonts.com/font/microsoft-corporation/calibri

CSS font stack:

https://www.cssfontstack.com/calibri

3. Times New Roman

In Western, the most common font is Times New Roman. This sans serif typeface comes from the British newspaper The Times. In 1929, type expert Stanley Morison criticized Time magazine's typeface as unreadable and ugly. The people in the magazine accepted his criticism and asked him to design a new font suitable for magazine reading. So Morison and the magazine's in-house Victor Lardent collaborated to design this famous Times New Roman.

Morison initially proposed to improve the design on the basis of Plantin, but in order to be compatible with readability and save space, he finally made a major change in the font: the contrast between strokes was strengthened, This creates a crisp feeling.

Applications: Books, Periodicals, Annual Reports, Brochures, Newspapers

Font Download:

https://www.fonts.com/font/monotype/times-new-roman

CSS font stack:

https://www.cssfontstack.com/Times-New-Roman

4. Helvetica

Helvetica is one of the most widely used sans serif fonts, created in 1957 by Max Miedinger and Eduard Hoffman. The unisex design of this font has made it an instant hit in a variety of applications. Because of its usability, Helvetica is ubiquitous and has always been a popular choice for corporate identity. In addition, Helvetica is widely used by the US government, and the Helvetica font is used on US tax forms.

Availability: Brand Trademarks

Font Download:

https://www.fonts.com/font/linotype/helvetica

CSS font stack:

https://www.cssfontstack.com/helvetica

5. Tahoma

Tahoma is a very common sans-serif font. Its font structure is very similar to Verdana, its character spacing is small, and it supports a large range of Unicode characters. Tahoma and Verdana are from the same school and are the work of the same designer Matthew Carter, launched by Microsoft in 1999. Many people who don't like Arial fonts often use Tahoma instead, not only because Tahoma is easy to obtain, but also because Tahoma does not have some shortcomings that Arial has criticized, such as the difficulty of distinguishing between uppercase "I" and lowercase "l".

Scope of application: screen dialogs, menus

Font Download:

https://www.fonts.com/font/microsoft-corporation/tahoma

CSS font stack:

https://www.cssfontstack.com/Tahoma

6. Georgia

Georgia is a serif font designed for Microsoft in 1993 by the famous font designer Matthew Carter. The performance is very good, and it is one of the built-in fonts of the Windows system. Apple Computer's Macintosh system followed suit and adopted Georgia as one of the built-in fonts.

Scope of application: e-books, mobile phones, computer web pages

Font Download:

https://www.fonts.com/font/microsoft-corporation/georgia

CSS font stack:

https://www.cssfontstack.com/Georgia

7. Verdana

Verdana is a sans serif typeface designed by Matthew Carter for Microsoft Corporation. Like the font Frutiger, Verdana was designed to fit the low-resolution computer screens of the time. The generosity and breadth of Verdana characters are key to the on-screen legibility of these typefaces. Despite its small size, the Verdana font family is a higher resolution and most popular typeface.

Since 2010, IKEA has abandoned Futura, which has been used for many years, and turned to Verdana. According to IKEA's explanation, the reason for this change is to ensure that the fonts can adapt to the characters of various countries (the previous IKEA fonts are not compatible with Asian characters), so as to ensure the consistency of IKEA's design style. It can be seen that Verdana has a relatively wide range of internationalization adaptation.

Scope of application: e-books, mobile phones, computer web pages

Font Download:

https://www.fonts.com/font/microsoft-corporation/verdana

CSS font stack:

https://www.cssfontstack.com/Verdana

8. Optima

Optima typeface is a clear and precise typeface designed by renowned designer Hermann Zapf. Optima was inspired by classical Roman inscriptions. The curves and straight lines of Optima fonts have slightly different thicknesses, which tend to leave an impression of elegance and clarity. Therefore, Optima is often used to convey classic ideals as well as current trends. For example, skin care giant Estée Lauder uses it as its official typeface.

Scope of application: poster design, book binding, album cover, product packaging design

Font Download:

https://www.fonts.com/font/linotype/optima

CSS font stack:

https://www.cssfontstack.com/Optima

9. Palatino

The Palatino font family is said to be one of the top ten most used fonts in the world. Palatino is designed with a classic serif font in a strong, open style that is legible and very attractive. Its popularity has spawned many imitators.

Scope of application: newspapers and magazines, advertisements, e-books, mobile apps, computer webpages

Font download:

https://www.fonts.com/font/linotype/palatino

CSS font stack:

https://www.cssfontstack.com/Palatino

10. Candara

Candara is a sans serif font developed by type designer Gary Munch for Microsoft and shipped with Windows Vista. ——Wiki Encyclopedia

Suitable for: email, web design, magazines and informal typography settings

Font download:

https://www.fonts.com/font/microsoft-corporation/candara

CSS font stack:

https://www.cssfontstack.com/Candara

10 free newest fonts in 2019

1. MORGANITE

https://www.behance.net/gallery/66748265/Morganite-Free-Typeface-18-Styles

2. THE CIRCUSDISPLAY

< br>

https://pixelbuddha.net/freebie/the-circus-display-font

3. Neon

https://www.awwwards.com/inspiration/5964b86ee138234ac4227ea1

4. Fivo Sans

< br>

https://www.awwwards.com/inspiration/5964b8c1e138234ab81eba44

5. Yellow Peas Free Font

https://www.behance.net/gallery/74315357/YELLOW-PEAS-ULTRA-LIGHT-FREE-GEOMETRIC-SANS-SERIF

6. Shapes Free Font

https://www.behance.net/gallery/74331313/Shapes-Typeface-Free-Font

7. ALOJA

https://wildpicks.design/product/aloja-free-handwriting-font/

8. Kardinal

https://www.awwwards.com/external_element/5954cc41e13823581d02bae2.html

9. Stay Classy Free Font

https://www.dafont.com/stay-classy-sldt.font

10. Strain Free Font

https://www.behance.net/gallery/62566503/Strain-Calligraphic-Typeface

Free ps ai ui design learning video

Scan the QR code to join the group to receive

Group number: 314291039