Internet Ugly × International Typographic Style

Drop one rage face or Impact caption into a strict Swiss grid to show how much of design's authority comes from polish.

From the research on Internet Ugly & Meme Vernacular

Mix them and make something Internet Ugly International Typographic Style

A sample layout drawn from the recipe: shapes from Internet Ugly, their arrangement from International Typographic Style, the finish from Internet Ugly. Not a real work, and not an image of either style.

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Internet Ugly & Meme Vernacular International Typographic Style

Type from Internet Ugly: All caps
Condensed display
Colour from International Typographic Style: Limited spot colours
Flat fields
Form from Internet Ugly: Stylised figuration
Distortion & exaggeration
Composition from International Typographic Style: Modular grid
Dynamic asymmetry

Internet Ugly avoids modular grid: this is where the two pull against each other, which is the point of the contrast.
Surface from Internet Ugly: Glitch
Hard offset shadow

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Internet Ugly

Order

Anton, standing in for Impact (Geoffrey Lee, Stephenson Blake, 1965), set white with a black outline

Text · International Typographic Style

A post-war refinement of the New Typography in which the mathematical grid, objective photography and neo-grotesque sans-serifs were used to communicate with clarity and neutrality. Taught at the Basel and Zurich schools, it became the default language of international corporate and institutional communication.

Inter; International Typographic Style used Akzidenz-Grotesk and Helvetica

The colours

The ground and leading colours come from International Typographic Style, with a counter-accent from Internet Ugly. The ink reads on the ground at 4.5:1 or more.

Internet Ugly & Meme Vernacular International Typographic Style

#f2f0e9 ground · 36%
#111111 ink · 14%
#e1251b accent · 18%
#00a2e8 accent · 14%
#1f4e9c accent · 10%
#ff7f27 accent · 8%

As CSS

:root {
  --ground: #f2f0e9;
  --ink: #111111;
  --accent-1: #e1251b;
  --accent-2: #00a2e8;
  --accent-3: #1f4e9c;
  --accent-4: #ff7f27;
  --font-display: "Anton", sans-serif;
  --font-text: "Inter", sans-serif;
}

Use it with care

Internet Ugly & Meme Vernacular: Most meme templates are photographs of real people, often children, or licensed stock. Success Kid is Laney Griner's son: the photo has been licensed to advertisers, and in January 2020 she sent a cease-and-desist letter to a congressman whose fundraising campaign used it without permission. Distracted Boyfriend is microstock, and its photographer says use without a proper licence is not allowed. License a template or make a new picture for commercial or political work. Check what a format means now: some characters that spread through 4chan were taken up as hate symbols (the ADL listed Pepe the Frog, Matt Furie's 2005 Boy's Club character, in 2016, while noting that most uses are not hateful). Reaction images of Black people posted by non-Black users and brands read as digital blackface (Lauren Michele Jackson, Teen Vogue, 2017), and deep-fried memes came out of Black Twitter, so credit where formats come from. When brands and campaigns borrow a format, its makers often protest or drop it (Douglas).

The two styles

2003–present · Global / networked, North America Internet Ugly & Meme Vernacular A deliberately amateur image dialect of forums, imageboards and social feeds, named 'Internet Ugly' by Nick Douglas in 2014. Figures are drawn with a mouse in MS Paint, photos are found and crudely pasted together, and captions shout in white Impact capitals with a black outline, top and bottom, or in Comic Sans. Re-saving and 'deep-frying' wear the pixels down. The joke's setup and punchline are the layout, and every template is made for a crowd to copy; some are clean stock photos that only the labels make a meme.

The words “Urban Systems” appear in large black and red lettering at the upper left of an off-white cover. Tall blue, black and grey rectangular blocks rise from the bottom, with fine vertical dividing lines and a red circle at the upper right.

1950–1975 · Central Europe International Typographic Style A post-war refinement of the New Typography in which the mathematical grid, objective photography and neo-grotesque sans-serifs were used to communicate with clarity and neutrality. Taught at the Basel and Zurich schools, it became the default language of international corporate and institutional communication.

More combinations

With Internet Ugly

All 18 combinations with Internet Ugly

With International Typographic Style

All 97 combinations with International Typographic Style

Every style combination