Seven Principles of a Skilled Designer (1): Font Design

Seven Principles of a Skilled Designer (1): Font Design
Well, you may be a design guru, or maybe that's too much of a stretch, but at least you can become a skilled designer by following these seven basic principles.
This will be the shortest and most detailed series of blog posts that will teach you how to become a better designer.
Remember: these principles are not laws and can be broken. They are just general guidelines that I usually follow when designing. Follow these simple design principles and you will find your own path to artistic excellence.
Principle 1: Limit your fonts.
You’ll see that a big part of a good design is looking well coordinated. One of the best ways to do this is to use a small number of elements to create a design that looks well coordinated.
The font you choose first may be the one you want to delete. I often eliminate 2 fonts from one work. The first font will probably be thoughtful or artistic and will bring a sixth sense, character or personality to your design. These fonts bring together fragments of all the moods of the time, this fun font with twisted waists looks like a girls' dance party, and this grungy and evil font is a rock band? I will use this fancy font for the title of the text, everywhere it needs to be big enough, this fancy font will be the focus of this piece. You typically use this font sparingly, but it's much larger, so that's the main point people see. The second font should be very ordinary, and the reader won't feel its presence in the entire article. This font needs to be highly readable, as it will occupy a considerable amount of space in the text. Obviously, if those lavish artistic fonts occupy a large amount of space in the text, it will greatly affect the reading experience.
Here’s an example of a design that uses fonts correctly. As you can see, there are only two fonts used here, a fancy artistic font for the title and a very basic font for the content. This looks neat and coordinated.

Here is another failed example. I used a lot of fancy artistic fonts here, which is very inconsistent and the section divisions do not seem to be coordinated with the main title.

Having too many fonts in one design is a big no-no. Nothing can make a flyer look worse than using 8 different fonts. The same is true for using WordArt for body copy. This is an example of incorrect use of fonts.

One last thought before I let you get your hands dirty. If your word art looks very trendy and modern, use a sans serif font for the main text; if your word art looks very formal, use a serif font as a secondary font. .
PS2: Serif or San Serif?
Serif is the end of a character's strokes, such as the beginning and end of the letter M. Serif was developed from Roman inscribed letters to improve the elegance and readability of fonts. They were first written on the stone with a brush and then carved. Serifs survive today because they are beautiful and classic, and they are easier to read. For small text fonts, Serif fonts are very suitable. Conversely, you can use Sans Serif (Sans is French for "nothing") as the font for titles or short articles.
Classification of different fonts Latin characters Square characters Serif fonts
The contrast between thick and thin strokes is obvious, which saves eyesight when reading. Times New Roman
Architect
BalletEngraved
Creedmore
Benjamin
Capshc
New Mingti Songti Biaosong Sans Serif
The strokes are evenly thick and thin, and the contrast is not obvious. The font is more prominent and it is more difficult to read. Alberta
ANNSTONE
Garamond
Nimbus Script
Bold

<<:  Implementation code for saving images to MySQL database and displaying them on the front-end page

>>:  Is the tag li a block-level element?

Recommend

MySQL database aggregate query and union query operations

Table of contents 1. Insert the queried results 2...

Why should css be placed in the head tag

Think about it: Why should css be placed in the h...

Analysis of the principle of Vue nextTick

Table of contents Event Loop miscroTask (microtas...

Do you know how to use mock in vue project?

Table of contents first step: The second step is ...

Linux Centos8 Create CA Certificate Tutorial

Install Required Files Yum install openssl-* -y C...

Vue uniapp realizes the segmenter effect

This article shares the specific code of vue unia...

Vue+express+Socket realizes chat function

This article shares the specific code of Vue+expr...

Detailed explanation of MYSQL large-scale write problem optimization

Abstract: When people talk about MySQL performanc...

Tools to convert static websites into RSS

<br /> This article is translated from allwe...

CSS3 creates web animation to achieve bouncing ball effect

Basic preparation For this implementation, we nee...

Add a startup method to Linux (service/script)

Configuration file that needs to be loaded when t...

Manually install mysql5.7.10 on Ubuntu

This tutorial shares the process of manually inst...

JavaScript static scope and dynamic scope explained with examples

Table of contents Preface Static scope vs. dynami...

Detailed explanation of Linux kernel macro Container_Of

Table of contents 1. How are structures stored in...