#web typography

[jwt5000]

totally awesome sneak peak at my next web typography assignment, everyone go give Dmitry Ivanov a big consensual kiss.

[aduckmentalistin]

A concise, referential guide on web typography best practices.

[designtank]

Typography is the poor stepchild of UX design

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

Graphic design degrees typically included at least one course in typography. Since digital design took over, I see far too few designers paying much attention, if any, to readability and legibility. Terms like measure, x-height, and baseline grid are seemingly part of a foreign language.

But to me, if visitors to your UX portfolio site can’t actually read your copy, I consider it a user experience fail.

These examples, found from a round-up of “featured” portfolios, just made me sad. If you recognize your site (or even if you don’t!), please keep in mind not everyone has the vision of a 30-year-old.

[printdesignclub]

Helvetica 50 - Poster | All about web typography and the love hate relationship designers have with Helvetica. Print Design

[whatfontis]

How to Choose the Best Body Font: Legibility, Readability, and Serif vs. Sans-Serif

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

[wpbunch2023]

8 Tips on Typography in Web Design

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!

[iheartvelma]

[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.

How To Set Weights And Styles With The @font-face Declaration — Smashing Magazine

If people are on your website, they’re probably either skimming quickly, looking for something, or they’ve found what they’re looking for an

[aphonicsolutions]

Top 6 Suggestions on Typography in Web Design

Typography plays a crucial role in web design, setting the tone and enhancing the overall aesthetic appeal of a website. Web typography involves selecting appropriate fonts, sizes, weights, letter spacing, and line height to ensure that the content is clear, easily readable, and accessible to all users. For more information visit our website.