Typographic Magic

An exploration of performance and expression with type

Jason Pamental (@jpamental) | Principal Designer @ Chewy.com

PixelPalooza 2025, 20 November 2025

Performance is the first visible aspect of design*

give the browser a map & directions

* thanks Brad
1.035s
.021s
0.000s

Be prepared

<link 
 rel="preconnect" 
 href="https://curious-typography-demo.netlify.app" 
/>

<link 
 rel="preload" 
 href="./assets/css/webfonts.css" 
 as="style" 
 fetchpriority="high" />

<link 
 rel="preload" 
 href="./assets/css/styles.css" 
 as="style" 
 fetchpriority="high" />

<link 
 rel="preload" 
 href="./assets/fonts/NunitoSans/NunitoSans-Varia..."
 as="font" 
 fetchpriority="high" 
 crossorigin />

<link 
 rel="prefetch" 
 href="./assets/fonts/NunitoSans/NunitoSans-Ital..."
 as="font" 
 crossorigin />

Optimizing wisely

* shorter bars are better

@font-face {
 font-family: 'Nunito Sans';
 ...
 font-display: swap;
}
@font-face {
 font-family: 'Adjusted Arial Fallback';
 src: local(Arial);
 size-adjust: 100%;
 ascent-override: normal;
 descent-override: normal;
 line-gap-override: 24%;
}

* more axes are better :)

width
width
weight
weight
x-height
x-height
https://variablefonts.io
slant
https://variablefonts.io 
<img
 src="./assets/images/leo_lounging.webp"
 alt="Leo lounging around on his back"
 width="500" 
 height="439"
 fetchpriority="high" />

<img 
 src="./assets/images/henry_and_leo.jpg" 
 alt="Leo with tiny puppy Henry" 
 width="1000" 
 height="621" 
 loading="lazy" />
0.580s
.005s
0.000s

Resolution revolution

how responsive can we be?

Type is the clothes our words wear

don’t stop at just getting them on the screen

Text orientation & visual friction

sometimes we need some intentional tension

Text flow, wrap, and balance

Call me Leopold. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation.

Call me Leopold. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation.

By the numbers

+26%
+37%
+44%
+77%
+34%
100s

thank you

slides: noti.st/jpamental/zsgPFI
instagram, bluesky: @jpamental