Font Layout Design in Website Design

 

 

As a designer, we are dealing with fonts every day. We often hope to use them well and improve the design. We often wonder which font should we use in the computer? With so many texts, how can we express our inner thoughts through typographical layout?

It is often said that art is the same. Combining text and music with visual music and text layout makes it easier to combine font layout and better reflect our design emotions.

It is easier to transmit information and express its profound meaning by assigning ordinary words to the artistic form of music and the aesthetic and visual beauty of text layout.

When the music sounded, the computer player in the change of the spectrum, sound, the beat of the Five-line spectrum and the change caused by the instrument (A-01 ), they are all visual forms of our emotions.

　　

 

The text layout is represented by a piece of visual music, which visually forms a highly staggered, dense, and prioritized effect.

An excellent font layout design becomes a piece of rhythm and rhythm music. We can understand it as a piece of solidified music.

(1) Text Analysis: Understanding the font structure and characteristics is the basis for our excellent font layout.

In the font layout design, the dot and line areas are combined into a design group, which are divided into high and low levels, and the dense and scattered are important factors that constitute the form of beauty. 26 English letters. The Node combination is set based on the font width. Each letter forms a note.

(B-01), capital I = 1 long node, O = 4 long nodes; (B-02), lowercase a = 3 short nodes, B = 1 long node + 2 short nodes.

　　

 

　　

 

Horizontal rhythm of single-line text layout: According to the font width set the width of the node width and layout of the dense, it can produce the priority of high and low staggered rhythm and rhythm (B-03 ).

　　

 

Vertical rhythm of multi-line text layout: according to the length of a single line of text and font width produce rhythm and rhythm, (B-04 ).

　　

 

After the text is converted into notes, we can begin to sort out the font layout rules, so that our font design is more rhythmic.

(2) text rhythm: Excellent font layout, with its unique beauty. The rhythm of the text is used to interpret the wonderful music.

The rhythm of the text itself: the objective font changes and regular font characters are arranged consecutively to form a rhythm form.

Without any modification or change, the font size and color remain unchanged. The resulting rhythm is the interval between words. font is the only basis for reflecting emotions.

For example, the font size is the same direction, and the node notes are repeatedly displayed. The rhythm is the gap between letters between words, while the case sensitivity produces a fluctuating rhythm, the font width of the text sent out cheerful or sestable breath, (C-01) all capital is gentle and steady rhythm, (C-02) using case, it produces a high and low fluctuation rhythm, because the node is finer than the text node on the left, it will appear more lively.

　　

 

(C-03) all the letters are capitalized, the interval between words to form the rhythm, and the color between words to form the rhythm, text layout on the basis of horizontal rhythm and form a vertical rhythm. The font is stable and lively, and the italics below make the entire text layout reveal the male's steady tone and easy and pleasant rhythm.

 

The rhythm of the font layout design is represented by repetition: Repetition with different spacing and the same shape; repetition with different shapes and the same spacing; it may also be that other methods of unit duplication. The primary condition for such repetition is the similarity of units or the regularity of spacing, followed by the logic of rhythm.

(3) how to give the rhythm of the text: Based on the rhythm covered by the text itself, give it a new rhythm and rhythm.

The basic font and font size are used to adjust the text based on its own characteristics without any other special changes, so that the text layout produces objective and natural rhythm changes both horizontally and vertically, it makes the rhythm of the font layout more coherent and smooth, and gives the designer the feeling that they want to reflect, just like the music style.

(D-01) the same font, different font size, different thickness, different colors, the formation of different rhythm effect. The thickness and spacing of the node can give a different sense of rhythm. The cheerful, steady, lively, and lovely are still tense and soothing, and there is a more obvious comparison due to the different rhythm.

　　

 

Case Analysis:

　　

Figure (D-02), text in uppercase, with the word spacing as the rhythm, font size comparison to form the rhythm of strength, text layout rational and orderly, guided by the fine rhythm, suddenly changed to a strong tone, and the subject was shocked and highlighted.

 

　　

Figure (D-03), word spacing for rhythm, font size strong contrast highlight DENIM, and because of the use of fine line font, make the whole screen rhythm fashion and round, in line with the Women's themes.

 

Figure (D-04), word spacing for rhythm, font size for strong comparison. First, the Music enters with gentle ups and downs, and then the whole audience is shocked with strong music. Later, the music is supplemented with soft music. The rhythm of the symphon highlights the key and the rhythm is shocked and clear.

　　

 

　　

Figure (D-05), horizontal view, word spacing for the rhythm, font width comparison form music intensity, font color depth strengthen the music effect, vertically, the font size and color form a strong-weak-strong-moderate-weak rhythm.

 

(3) how to give the text rhythm-baseline and special effects: by changing the typographical mode, add special effects such as tilting or handwriting to make the text more interesting.

Commonly used ways such as adding italics make the text dynamic and interesting, such as overlapping lines make the text generate dual baseline to form a dual or multi-trio rhythm, (D-06 ).

 

Case Analysis:

Figure (D-07), the font layout on the left is mainly based on baseline changes dominated by rhythm, from single baseline to dual baseline, single variant. The ups and downs of Case sensitivity make the text emphasize the main content, and the rhythm becomes brighter.

　　

 

Figure (D-08), if the text layout is a song, from left to right, first start with a brisk italic rhythm, suddenly changed to a bright line of the tune, attract attention, finally, there was a series of low-key music supplements, which made people understand the text as a fashion ornament. Especially the italics in the beginning, the screen is lively in the steady state of women.

　　

 

　　

D-09 (), italic as the main melody, from the text case for ups and downs, beautiful rhythm.

 

(3) how to give the text rhythm-long short sentences and text distances: Add vertical rhythm by comparing the text size and text distance.

(D-10), Word font size disparity, text case and word breakpoint form horizontal rhythm, but from the word line, different font la s have different lengths, heights, and spacing. Therefore, the font layout has dual rhythm.

　　

 

Case Analysis:

Figure (D-11), from the vertical perspective, the layout of long short sentences, let people feel that this is the melody of the song, coupled with heavy and short long melody and easy fun hand writing, let the picture reveal a taste.

　　

 

Figure (D-12), we usually typeset, always like to use alignment, and the text typeset is another way, left and right are not their or center. However, from the node on the left, the melody changes from soft to re-tuned, and then gradually becomes gentle, showing a progressive change, so that the screen melody can be easily breathable and charming.

　　

 

Figure (D-13), a combination of font layout, both horizontal rhythm and vertical rhythm. In the vertical view, the font size of a sentence is compared to the font size of a sentence. For example, the font size is heavy, the text size is light, the text is light, and the word rhythm is light, the ups and downs of the sentence length echo the emotion embodied in the picture.

　　

 

Do not interfere with the rhythm of the design: a set of font layout design, the font uses two of the best, up to three types, on this basis to adjust and change the font, such as case, font size, width, line spacing, and some special changes such as italic and double baseline can produce a series of typographical changes, make the text layout have the rhythm and rhythm of the design emotion, such as sequence, comparison, deviation, strength and so on.

(4) sample of rhythm design: the creation process of font layout is accompanied by a rational emotional experience from start to end.

The Analysis of font layout has come to an end. The following example shows how to apply this typographical method to our font layout.

Figure (E-01), a line of unchanged words, although there is order, but too long no focus on the primary and secondary, can only rely on the characteristics of the font itself to produce the rhythm, the rhythm is dull.

 

Diagram (E-02), disconnects the plain sentence, based on the original rhythm, give a new rhythm.

 

Figure (E-03), but the new pace cannot highlight the key we want to highlight, we need to adjust. This is a process of injecting our emotional concerns.

 

Figure (E-04), put into our subjective consciousness hope to give the emotion, highlight. Change the font size, width and contrast, and adjust the rhythm to form a new rhythm. Highlight key words, give emotions, make the rhythm more prominent, and make the melody smoother.

 

Figure (E-05), detail adjustment, make the rhythm more smooth. Adding colors allows the rhythm to be separated, and adding italic effects adds a dynamic touch to the entire serious text.

 

Figure (E-06), so, because of the different rhythm, given different emotions, can produce different rhythm. Based on the preceding typographical method, we can arrange texts with different characteristics.

 

The text itself is the crystallization of a thousand yuan of refining, it has a very beautiful rhythm. After the design and selection as the basis of the layout, the letter is replaced by the node, through the length and width of the node, let the text produce music of repetition, size, color, baseline shape, and long short sentences by changing the width and height of the text and the spacing, and give the rhythm and rhythm of the text, to produce a variety of visual effects.

Original article: http://www.aliued.com/2013/02/02/1532/