Artist Alert: 5 Typography Trends to Know in 2018

If you consider yourself a trendsetter, you need to know the latest typography trends predicted to take over in 2018. Undoubtedly making their way into print and digital marketing this year, a few are classic throwbacks while some are taking leaps forward.

First lesson: What is typography? Its basic definition is the visual art of the written word. One may argue that words are words are words, but presentation, either spoken or in writing, can actually define what is being communicated.

Typography attaches emotions to the written word. For example, cursive script raises the elegance of a brand or event, and it requires the careful study of each letter. Sans serif, on the other hand, is considered casual and youthful, and is typically used for road signs for quick legibility.

Different treatments of the same words can take on different connotations and achieve different marketing goals. Whether designing for a web page, printed signage or book cover, etc., consider a few key principles when selecting typography.

1. Font size is not created equal. The same pixels in one font is not the same in another because this value only measures the box in which the type will live. This also applies to the spacing between lines and characters. Base the font size on the typeface rather than the point value.
2. Adjusting spacing is relative. Consider proportionality when playing with values for font size, letter spacing and line height. For example, letter spacing for different font sizes will not be the same value between a smaller font size and a larger one, which may need tighter letter spacing.
3. Screen sizes are the long and short of it. Lines need to be defined with a minimum length, maximum length and line breaks as needed, or else readability is affected when jumping between a desktop and mobile device, such as a laptop or smartphone.
4. Bow down to hierarchy. Organizing text by function or in order of importance also determines its font size, placement and treatment. For example, header text is typically the largest body of text on a page, is placed at the top and can be more decorative in design. For legibility, navigation menus and body copy are kept simpler and consistent to guide readers.

Follow these easy step-by-step tutorials to recreate the latest typography trends for yourself, which include a few pro tips and keyboard shortcuts.

#1 Cropped Typography

Coming in hot from 2017 is cropped typography where parts of letters are erased but still readable. This requires the reader to fill in the rest of the letters, seemingly placed in front of or behind the subject matter, with their imagination. Graphic Mama says retaining legibility with this technique takes a truly creative mind to achieve.

TUTORIAL: Cropped Typography

1. In Adobe Photoshop, open a background image.
2. Select the entire image (Ctrl+A), copy (Ctrl+C) and then create a New Document (Ctrl+N).
3. Paste the copied image into the new document (Ctrl+V).
4. Add and place text. Pro tip: Typefaces with a heavier weight work best with this treatment.
5. Reduce the text transparency so that the image is visible.
6. Use the pen tool (Ctrl+P) to draw out paths along the contours of the subject matter where the text overlaps to crop it.
7. Once all paths have been set, add a Layer Mask to the Type layer.
8. Under the Path tab, select Paths as a Selection.
9. Return to the Layers tab.
10. On the Layer Mask, use the brush tool to paint over the selected areas in black. This helps ensure adjustments can be made later as needed.
11. Adjust the transparency of the text layer back to 100%.
12.  Save image in the desired format.

#2 Overlay

Surfacing in 2018 will be a lot of text overlay to bring background images to the front. Think Design says the trick is to maintain structure and a sense of hierarchy.

TUTORIAL: Overlay Typography

1. In Adobe Photoshop, open an image file in a new document.
2. Use the Type tool (T) to add desired text, then press enter.
3. Under the Select menu, select Load Selection to make all of the text active (dancing ants outline the text). Go back to the Select menu and select Inverse to invert the text.
4. Create a new layer.
5. Fill with a solid color.
6. Hide the text layer.
7. Save image in the desired format.

#3 Gradient

Chase the rainbow because this 80’s trend is back! There’s no end in sight for these multi-toned and color shading designs. Credit Facebook and Spotify for helping thrust this trend back into the mainstream.

TUTORIAL: Gradient Background

1. 1. In Adobe Photoshop, create a new document.
   2. Select the Gradient tool (G).
   3. Click on the Gradient Editor to change the gradient fill.
   4. Replace the default black and white with the colors of choice.
   5. Select a gradient type, then draw a line to dictate the starting point and the end point. Shades will blend at the center of the drawn line. Pro tip: Start at top-center. To make smooth lines at 45° angles in any direction, hold the Shift key while drawing. The longer the line length, the larger the gradient will be.
   6. Add any desired text and content.
   7. Save image in the desired format.

#4 Serif

Uncool Serif used to take a backseat to hip and modern Sans Serif. This year, Serif moves up to the front seat and will contrast against Sans Serif in web design and print ads.

TUTORIAL: Serif Typography

1. In Adobe Photoshop, create a new document or open an image file.
2. Select a Serif typeface. Think along the lines of Book Antiqua, Georgia or Times New Roman.
3. Use the Type tool (T) to add desired text for the header, then select all (Ctrl+A). Pro tip: Serif typefaces work well as headers.
4. Pair with a Sans Serif typeface for body copy.
5. Save image in the desired format.

#5 Kerning

If gradient designs and Serif seem like graphic design is taking a step back, exaggerated kerning will take it two steps forward. Extra white space between letters and words will create drama and flair.

TUTORIAL: Kerning Typography

1. In Adobe Photoshop, create a new document or open an image file.
2. Use the Type tool (T) to add desired text, then select all (Ctrl+A).
3. While holding the ALT key, press the right or left arrow key to increase or decrease the kerning (space) between characters.
4. To adjust tracking (space between lines), use the up and down arrows.
5. Save image in the desired format.

Ready to refresh your print marketing materials? Contact designservices@overnightprints.com to consult with an expert graphic designer.