8 tips for creating great typography




Last time after writing “no contrast, no layout”, many readers proposed that I do some dry layout design for everyone to learn (TU) (CAO), since everyone’s demand is so big, then do bai, anyway, I did not do less to give my life to accompany a gentleman. This time, I’ve spent the last four days putting together 8 tips for creating a great layout. First, the use of long line using long line typesetting this skill should be used by many people, but it is not as simple as imagined, if not properly used, not only will not look good, but also will appear very rigid. The use of long lines in typesetting is generally to meet the following requirements. 1. The segmentation information It is using long lines in the layout of the different types of information, you can choose according to actual situation to use dotted line or lines, think black and white line is monotonous can also give it some color to see see, use the long-term segregation information can make it look more clear, more convenient reading audience, at the same time also can have the effect of neat, make the layout unapt too messy.


▲ If there are many levels of information in a page, we can use both thin lines and thick lines to divide the page.


▲ In the figure above, the red dotted line is used. The dotted line is less stiff.

2. Decoration We often encounter such a situation when typesetting. There is not much information and it is not suitable to add pictures, so the whole layout is easy to appear monotonous and dull.

▲ Diagonal lines are often used as scissors, commonly known as “cut no”.



▲ Add a straight line at the top of the text to make the layout look more professional.



3. Establish a solid format

In the typesetting of picture albums or newspapers, there are usually some fixed information placed at the top or bottom as templates. Using long lines to assist the establishment of this fixed format is also a well-tried technique.



▲ In the album typesetting design a fixed format, can make the layout look more delicate.


▲ Using long lines to create a format can also play a role in separating information.



4. Emphasize

Using straight lines under the text also emphasizes the message, just as we used to do when we were reading a book, to draw the reader’s attention to it.



▲ Whether the line is straight or curved should have nothing to do with the designer’s sexual orientation. Two, the use of short line short line function and long line is much the same, although not so common with long line, but sometimes better, especially in web design, UI design, business card design, we can often see the short line figure. The usage of short line is as follows: 1. The use of short line partition information is more flexible than long line, will not cause too regular effect, and although it is short line, but the audience will often imagine it extended.

▲ Of course, sometimes because the information is short, so the short line is more appropriate.


▲ The short lines in the above image not only separate information but also serve as embellishment.



2. The decoration

Short lines can also be used for decoration, put short lines in front of the text message, or the corresponding white area, and then choose the appropriate color, can effectively enrich the layout.



▲ Put a short line next to the text


▲ Add short lines to the blank areas corresponding to the text



Classified 3.

Is to use a short line to group a part of the information into a group, usually using vertical lines.Align the text to the left or right, and then add a line that is longer or equal to the length of the text, similar to the use of curly braces, but to look better, it is very useful in the layout of more information categories, as shown below:



Short lines are the best way to use them in a directory.



▲ Are the short lines above a little long? Let’s call it a long short line.



Three, use color blocks



Using color blocks for typesetting is also a practical skill, and easy to create a sense of fashion, often used in album and web design, color blocks in the layout of the main uses have the following:



1. Zone out

In picture album or web design, color blocks can be used to divide areas. A color block carries a piece of information, so that the content in the color block is distinguished from other information. If there are more color blocks, it is best to let them form a certain sense of rhythm, such as unity or gradient effect.



▲ While dividing areas, color blocks can combine some seemingly scattered information.


▲ The three color blocks in the above image are different colors and purposely stagger up and down to create a sense of rhythm.



2. Focus

There are many ways to highlight important information, and it’s also a good way to put it in a color block. Use contrasting colors for text and color blocks.


▲ The color blocks in the image above are designed to highlight the discount information.



▲ The color blocks in the figure above are designed to highlight the title.



3. Separate the background



When we line the text on the picture, the relationship between light and shade is not too even, so it will affect the readability of the text. At this time, it is a good method to add color blocks at the bottom of the text. If the background is adjusted to black and white, the effect will be better to use bright color blocks.


▲ If you want to preserve the integrity of the background image, you can also reduce the opacity of the color blocks, or use a multiply effect.



4. Enrich the design form (decoration)

Color blocks themselves are elements with a strong sense of design, so we can use color blocks for composition, such as combining several color blocks into a figure, or creating contrast through color collocation, so as to make a beautiful and distinctive design.


▲ The color block in the above picture is actually an extension of the brand logo in the upper left corner. The composition is very special.


▲ The orange color on the top of the package is very conspicuous against the large area of white, becoming the biggest highlight of the package.



Four, the use of wire frame wire frame and color block have a lot of the same place, but the difference is not small, first of all, wire frame no color block so visual impact, secondly, because there is no color in the frame of wire frame, so it is more suitable to frame the picture together, and color block is mainly used to carry text information. Wireframes are mainly used in the following three ways: 1. Information grouping Wireframes are used to group information within a page, which is the same as the use of color blocks.

▲ On the right side of the picture, wireframes are used to divide the information into three groups. Thick colored wireframes are also fashionable.


▲ The style of wireframes should be consistent with the overall style of the design.



2. Information organization

Scattered pieces of information can cause confusion on a page, and framing adjacent pieces of information together is an effective solution.


▲ In this trypophobia layout, fortunately the designer used wire frame to guard a “pure land” near the information area. 3. Decoration According to the layout size, design elements, reasonable use of wire frame can make the work more sense of design and beauty, such as: with pictures through the wire frame, to create a sense of breaking through the bondage, or wire frame directly as the layout edge decorative line lace.

▲ In the design of the card with thin wire frame decoration on the edge, a little literary atmosphere.

▲ Use regular wireframes to stagger images to create conflicts.



5. Arrange the text in a special shape



Normally, we would arrange paragraphs in small squares, but for those design requirements are not too formal, we can also try to arrange paragraphs in interesting shapes, such as love words in the shape of hearts, environmental protection content in the shape of trees, etc. These special shapes can be more visually striking, flexible and fun to look at than square text, but too loud shapes can make the text less readable. Use with caution.



▲ The text in the image above is arranged in a parallelogram, which is not very special, but also creates a sense of instability, which is very personal in the context of the surrounding text. Six, the text around the row Namely the outer contours of the text around images for typesetting, this technique in the layout of brochures, magazines or newspapers more see, because the text should be enough to reach the effect, use text around the row, the image with a special effect will be better, and to a larger picture, this approach is most suited to create visual impact.

▲ The layout above not only uses text wrapping, but also uses size contrast, sparse contrast, white space and other skills, which is a little bit scrambling.



▲ The pictures in the newspaper above are very well chosen, with both spatial and dynamic feeling. The text and pictures are closely combined to create the feeling of a car rushing out of the newspaper.



About the text around the row, I by the way, operation method, if it is to use the AI layout, you need to take pictures in PS, save for the PSD file, and then send the files directly into the AI, embedded documents should choose editing options, then click the right choice to release shear plate, and then put the pictures in the text, highlight the text and images at the same time, Click object – Text Wrap – Create in the menu bar.



In CDR, the operation is a little more complicated. You need to use the Bezier tool to check the outline of the image, and then right-click paragraph text newline-outline – Cross text.




Seven, alignment



Because alignment creates a sense of stability, uncluttering, unity and, most importantly, ease of reading, this technique should be used in almost any format. Seemingly very simple skills, in fact, there are also a lot of knowledge, there are a lot of excellent design works are hidden in the mystery of alignment, but too much emphasis on alignment will also make the layout appear very rigid, so some designers like to deliberately make messy, the result is always self-inflicted.



▲ Sing with me: Left align, right align, up align, down align, left align, center align.


▲ The designer must have an obsession with alignment, but it works. Different from using color blocks, text overlay images do not need the assistance of other elements, but directly overlay the text on the image, so it is necessary to keep the text recognizable. And don’t put all the text in the image, but only part of it, so that it intersects with the image. The advantage of this layout is that the contrast is strong and the text and image form a close interaction, not the feeling of isolation.


▲ Use irregular heterosexual pictures to deal with the effect is also good, the color of the picture is best not too much too colourful.



▲ Neat text and rectangular picture overlapping, smooth coordination and a sense of breaking the shackles.



Each technique is used for a purpose, either to be beautiful or to be easy to read, not to show off, so in analyzing each technique, I explain the benefits of doing so, which need to be truly understood.



So many classic works, even if you don’t look at the text, pure look at the pictures can learn a lot, right? But, honestly, did you even read the text? Don’t beat the old man up.



Note: The works in this article are from the Internet




If you like my share, please long press to identify the qr code below to follow me, thank you!