#web typography

I started my design career at a studio that put good typography first. That seems to have become a lost art.

This guide covers key font basics—from serif vs. sans-serif to smart font pairing—so your text stays readable and visually appealing.

Are you finding some typography in web design? WP Bunch give tips to help improve comprehension and readability of the text content. The importance of typography is enormous. Unprofessional choices in typography could distract readers from taking their time reading. For more details visit our blog!

[tumblr], match your font weights, darn it!

Something that really bugs me as a recovering typographer is the fact that [tumblr] commissioned a custom sans serif from Dinamo, Favorit, but on the app, they didn’t deploy matching font weights for body copy and italics. (The desktop website is fine).

The screenshot at top is this text, taken from the iOS app:

In the middle of a paragraph it’s very evident. like, look at these italics. they’re heavier. the stroke widths are wider and they look darker.

This is a screenshot from Dinamo’s website:

There are four weights in the family:

regular (top line) & italic (first R of second line)

medium & medium italic (next 2 Rs)

semibold & semibold italic (next 2 Rs)

bold and bold italic (last 2 Rs)

Now for most paragraph text purposes, we just need regular/italic and bold/bold italic, but for whatever reason, we actually have regular & medium italic font files implemented in the mobile app CSS.

I dunno. Was this on purpose? Was a file URL or discarded value left in from a previous draft? If it’s a variable font, was an incorrect weight axis set for italic?

This affects typographic color, creating “lumps” of darker text that are distracting.

(This can also be the result of faux bolding, due to improperly deployed font files and CSS, but that’s not the case here.)

also for anyone interested, here’s Laura Franz’s still-relevant article at Smashing Magazine.