Before you get in
Originally, I wanted to share my experiences on how to define the visuals of icons within a design system in a design system project I worked on at my company, but since it was a confidential project, I will follow the process through Noto Sans instead.
(The content I will introduce below is a newly created work for blog sharing.)
Reason why it's good if fonts and icons are similar
After starting the project, there were two study points.
Q1: “How and where should I get the essence of a brand?”, and
Q2: “What kind of environment is an icon being used in?”
Among them, what caught my eyes was the font for corporate brands.
It was a font that was made with great effort, and I was able to solve two problems while studying this font.
A1: The font has already interpreted the company's brand language and expressed it visually well, and
A2: in a mobile service being planned, icons are often exposed with fonts rather than being used alone.
If you look at the illustration above, an icon on the left matches the design concept of the font, but on the right, the concept of each other is conflicting, which affects the readability.
And so, the design concept of an icon that came out was ‘Look that has a sense of unity with the font.’
* Apart from the perfection of each font and icon, it was also considered that the font that already has the design concept and the look of the icon that will be redesigned are different from each other, which could damage the overall consistency and perfection of the service.
I conducted a study on how the font interpreted the value of the company, selected some features, and conducted a design test that fits the concept, and produced an output along with a guide to the concept of the icon and the constructions that need to be considered for each situation.
From now on, I will share the design process through Noto Sans.
It is a component of typography to analyze the features of Noto Sans KR.
Among the above-mentioned elements, I prepare the work to materialize the icon:
1. by selecting the elements that are suitable for the icon design and
2. express the characteristics of the font well.
Group A : The concept of a large grid of icons
Ascender Line, Capital Line, X-Line, Base Line, Descender Line,
Aperture(Open Counter), Counter, Set Width
Group B : Detailed expression of icons
Should be including Spur, Ear, Apex, and the angle of the oblique stroke, although not shown in the illustration.
As shown in the illustration above, I will classify the first-choice features into two groups according to a purpose (* Gray letters), and start with the big frame of the icon with the features of Group A for a full-fledged design work.
Grid Design
Ascender, Capital, X, Base, Descender Line : Grid Key Line
Match the size of the icon’s height value to the height of the uppercase letters of the alphabet, draw a margin area outside it, and draw a line in the area that becomes the height of lowercase letters (X-Line).
This line becomes an important key line in the process of weaving the entire grid, and it allows the proportionality feeling that appears in each individual icon to resemble the font.
Set Width, Counter, Aperture
When feeling of the impression of the space inside the type, such as the width of a type (Letter Width) and the alphabet letter O, the vertically elongated shape is characterized.
In order to reflect this impression on icons, we work to find a shape with more emphasis on the vertical height.
And combined with the Base Grid, the icon grid for Noto Sans is completed.
* In the illustration above, there was a process of modifying the Key Line up and down by 1px, because the icon is small in size, so there are more restrictions on the expression and the perfection of the icon itself is compromised.
(I will point out that the purpose of this project is not to mechanically fit the physical characteristics of the font into the icon, but to create an icon that resembles the font that users who will see this design feel intuitively.)
The finished Grid to be done like that will play a role in holding the main position of the icons as shown in the above illustration.
Icon Detail
Based on the completed grid, we will proceed with the process of modifying the detailed shape of the icon through the group B mentioned above.
* Group B : Spur, Ear, Apex, Angle
Spur, Ear
The spur is a small protrusion part shown in a type, which can be seen in a part where the stroke and stroke of the lower case letters meet as shown in the illustration below, and this feature taking an advantage is used to express it on an icon.
Apex
The Apex refers to the point where the diagonals of a type meet, typically found in the upper area of a capital letter A.
One thing to note here is that icons are small in size, so the pixels may appear broken or incorrectly drawn, and so use them only partially where you can capture this characteristic well as shown below.
6° Angle
There are angles found consistently in a set of fonts.
In the case of Noto Sans, angles of oblique lines with multiples of 6 were found a lot.
Normally, we use a 15 degree angle that can be used for 30 degree’s one, 45 degree’s one, 60 degree’s one and 90 degree’s one, but in this project, the work was carried out using a multiple of 6.
If you create icons in this way, you may be wondering, "What if an icon that cannot apply the design defined so far comes out?".
Family Look
Let's look at the illustration below.
From the graphic motif (Noto Sans), which is the starting point of design, through the Core Identity section that contains the characteristics of the font well, it continues to the General Style, which has almost no elements of design such as hamburger menus.
A natural family look is finalized when these icons are properly spread across each section. For a type, it is as if the concept of design is harmoniously configured, from a well-presented type that reveals the concept of the design to a common type that does not reveal the concept well.
The important thing is to consider the overall density of the design, not the application of mechanical rules. If you forcibly create a shape that will contain a design concept in a hamburger menu that has no design elements almost, it may rather damage the overall perfection, cause a problem in readability, or it may cause visual fatigue as the design is included in everywhere.
Whenever I draw an icon, I am also trying to figure out from what to what to keep these standards, but there does not seem to be a clear answer.
It seems to be important to find a point out where everyone can agree as the best selection while comparing the perfection of each icon with the perfection of the whole when working on an actual work.
Thank you
