Thirty thumbnails
Getting Graphic
Reinventing design with type on the web
Jason Pamental | @jpamentalOpenType 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
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.
Performance, revisited
One of the biggest contributors to CLS is poorly managed font loading
(that is no excuse to ditch the fonts)
New York Times
https://covid.ri.gov
https://www.webpagetest.org/result/210916_AiDcJ7_200dadf56656edf28a2ff49823404e61/
https://rwt.io/typography-tips/part-4-fixing-fout-font-loading-fallback-tuning
https://rwt.io/typography-tips
Let’s do better. Because we can.
thanks
Jason Pamental
@jpamental
slides:
https://noti.st/jpamental/skFZ6N