Getting Graphic

Reinventing design with type on the web

Jason Pamental | @jpamental

OpenType Variations on the Web

A variable font is a single font file that behaves like multiple fonts

—John Hudson

a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
width
width
weight
weight
x-height
x-height

  .width.super-floof {
    font-stretch: 140%;
  }
  .width.petite-puffle {
    font-stretch: 50%;
  }


  .weight.chonky-boi {
    font-weight: 900;
  }
  .weight.skinny-minnie {
    font-weight: 500;
  }


  .x-height.bubba-bear {
    font-variation-settings: 'YTLC' 600;
  }
  .x-height.lil-bit {
    font-variation-settings: 'YTLC' 450;
  }
https://variablefonts.io
slant

  .slant.trouble {
    font-style: oblique 10deg;
  }
https://variablefonts.io

Tristan & Tillie
Fluffy puffles

ADVENTURE PALS
Taking on the World

FANCY FLUFFERS
Stealing all the attention

Wandering around Turner Reservoir, sniffing all the sniffs, chasing all the squirrels, and muddying up some paws. 


 .opsz-corrected {
   font-optical-sizing: auto;
   - or -
   font-variation-settings: 'opsz' 72;
 }
https://variablefonts.io

Two sides to the typographic coin

Typography is inseparable from the type that it sets; there is no such thing as ‘neutral’ in this regard—typography will make the text that it sets easier to read or more difficult. Draw more attention to the text, or let the typesetting fade into the background and let the text take center stage. But the influence is always there.

It stands to reason then this truth can used to advantage. Indeed the notion of ‘display typography’ centers around just that: it is meant to draw attention. So while text typesetting for body copy may be meant to reduce the friction between text and reader, display typography is often designed to increase it. Intentionally slowing the reader down; requiring focus and a bit of concentration that can in turn make the message more memorable. This also allows design principles of color, shape, and layout be used more expressively—at least when designing the headline.

4 Covers

Thirty thumbnails

It’s not about how quickly you find the solution; it’s about what you learn along the way

Guiding principles for design

An attempt to articulate the ‘why’ behind how we design, and what should guide us

Design is communication

And if you can’t explain it, you’re not done designing it yet

Design as a profession is at a crossroads

Will it evolve to a higher level of thinking or fall into commoditization?

This is our craft. This is our art.

Curiosity: not just for killing cats anymore

Complicated vs. Complexity

4 Stories

Thirty thumbnails

It’s not about how quickly you find the solution; it’s about what you learn along the way

Heemong Kim, our instructor for Graphic Design 1 (and 4 & 5) at Rhode Island College had a rule for starting any project: 30 thumbnails. If you showed up for the first class after getting a new assignment without 30 little sketches, he wouldn’t talk to you.

That frustrated a lot of students in the class. But that created its own sort of solution. The school is a small state school that attracts a lot of local commuter students, many of whom end up taking Graphic Design out of a kind of process of elimination as a way to make art and make a living. I’m sure this is true at many schools, but this was my experience. That meant that in a class of 15, there might have been five to seven who were really there because they loved graphic design and wanted to make that their vocation.

thanks

Jason Pamental

@jpamental

slides:
https://noti.st/jpamental/C9jqPU