Art & Design

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.

Typography comparison

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.

Cropped typography
Source: Graphic Mama

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.
Cropped Typography Photoshop Tutorial
Courtesy of Overnight Prints

#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.

Overlay typography
Source: Tino Pohlmann

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.
Overlay Typography Photoshop Tutorial
Courtesy of Overnight Prints

#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.

Spotify gradient background
Source: spotify.com

TUTORIAL: Gradient Background

    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.
Gradient Background Photoshop Tutorial
Courtesy of Overnight Prints

#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.

Serif font
Source: vogue.com

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.
Serif Typography Photoshop Tutorial
Courtesy of Overnight Prints

#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.

Kerning typography
Source: global.adidas.com

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.
Kerning Typography Photoshop Tutorial
Courtesy of Overnight Prints

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

You Might Also Like

Comic-Con Festivals from Around the World

Hit Summer Flicks Blasting Their Way Into Theaters

Genres That Defined the Nightclub Scene: From Dance Hall to EDM

Best Voted Movie Poster Designs of the 2018 Oscars

How to Use Psychology to Create Good Design

Achieving the ‘Feng Shui’ of Art & Design

Calligraphy: Learn the Basics of Hand Lettering from Master Artists

All Hail the 2018 Pantone Color of the Year

2nd Annual #SpookMeONP Halloween Design Contest

Best Halloween Party Invitation Templates

Overcoming Fears One Canvas at a Time

4 Modern American Artists to Watch

National Photography Month: 5 Photogs to Celebrate on Instagram

8 Design Faux Pas You Need to Avoid

6 Brilliant Office Pranks for April Fool’s Day

Free Printable Kids’ Crafts for Chinese New Year

Inspirational Prints For Your Home Office

Creative Ways To Decorate With Leftover Print Materials

Understanding Gloss & What It Can Do For Your Prints.

What To Consider When Creating A Logo And How Our Design Services Can Help

Stand Out From The Crowd By Using Spot-UV

Artistic Genius Ben Kwok Speaks

Expand Your Booklet Horizon

What Chlorine Free Means

THE BEST NEW FREE FONTS

Steve Jobs 1979 business card

3 Best Print Product Ideas

Flyer design – upload Photoshop flyer for free

My Adventures Up & Down the Ladders – Interview with Mear One

Creating your own Business Card file for print

The Importance of Good Print quality when creating Photo Postcards

Maryland Institute College Illustration Artists

The Dark Art of Edward Frausto

Brilliant Art & Design Work

Ryan Claytor – Elephant Eater Comics

Create a Simple Holiday Postcard in Photoshop- using the Clipping Mask, Warp Tool, and other Text Effects!

Five Steps to Better Color with Adobe Photoshop – color profiling

Top 10 FREE design resource and inspiration sites!

ABOMINABLE FONT CHOICE! – My list of dreadful Typography!

Interview with Graphic Designer Stephen Bowman

Resolution Blues: the tiff between gifs and jpgs

Selecting Fonts

The pen tool – leading you up a scary path!

Path Basics

Shop the Story!