Quickly copy and paste Unicode whitespace characters — and learn how and when to use them.

Nice website using Outfit and Source Serif 4

A recap of my year and a brief look at trajectories for 2026.

Butterick’s Practical Typography

About Roel: https://pixelambacht.nl

Depending on whether the information is technical or not, you might want different font features.

29:20 - "Never grab a Monotype font"

font-variant-numeric: tabular-nums;

@font-face {
size-adjust: 110%;
}

https://wakamaifondue.com/
(what can my font do?)

https://pixelambacht.nl/

Introducing Hackd

Hackd is based on Hack v3.003, used for most base symbols and upper/lowercase latin glyphs. I then merged in glyphs from FiraCode v6.002 for all ligatures and pretty much all other characters.
Further, I pulled the % glyph from Firacode and tweaked it slightly to look more “Hack”ish.

How I Did It

I used FontForge for all manipulations.

I started with FiraCode-Regular and FiraCode-Bold.

Replaced all the glyphs from ! through ascii 255 with the Hack glyphs.

Then pulled all the powerline glyphs from the Hack NerdFont ttf file.

A look at text wrap balancing in CSS

Have you ever wished there is a native way in CSS to make two lines headlines consistent in the number of words per line? As a designer, I spot that a lot when dealing with varying content lengths while designing a website or a UI.

Your 16 page go-to guide for flawless font testing. 16 pages of type layouts, character combinations, symbols and tester paragraphs

https://gitlab.com/degruyter-public/font/de-gruyter-sans_serif

A new font will be used in De Gruyter’s journals and books from now on — one that can be used and shared free of charge, thanks to an open source license. We recently talked to the project managers Franziska Bühring and Florian Ruppenstein about the reasons for the change, which is part of De Gruyter's open research strategy, and about the development process.

If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1]. This tool helps you do exactly that.

Five tips to design a convincing sales page by better using typography.

In a dark room, lighting a single candle may feel like a drastic change. But in a room already lit by ten candles, adding one more might not feel as significant. Or, while the intensity of sound is determined by the amplitude of the sound wave, doubling the amplitude does not make it feel twice as loud to humans.

This idea can apply to graphic design, for example, typographic scale or making contrast of sizing between visual elements in general.

Compare two type scale examples below. The left increases the font size by 6 points each step, while the right increases the size by the ratio of 1.2x (each step is 20% larger than the previous). You can see the change between each step appear to decrease as the size increases in the left example, while the change feel more consistent in the right example.

$fontsize = b \cdot r^{(step - 1)}$

$\begin{aligned} step = \log_{1.2} \frac{fontsize}{b} + 1\end{aligned}$

This box of 600+ specimen cards holds a complete snapshot of the last metal type foundries in Germany.

Produced 1958–1971, the Schriftenkartei (Typeface Index) represents the final effort to catalog all the country’s typefaces in production at the time. The cards are useful for researchers and designers as they share a common format and show complete glyph sets. Thanks to Michael Wörgötter, a set of these cards is now in our collection, and his high-res scans are online.

A curated, easier to browse graphic design repository for the Internet Archives

Commit Mono is an anonymous and neutral coding font focused on creating a better reading experience.

Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.

// Font-sizes Major Second, base 16px
$font-size-xsmall: 13px;
$font-size-small: 14px;
$font-size-medium: 16px;
$font-size-medlarge: 18px;
$font-size-large: 20px;
$font-size-xlarge: 23px;
$font-size-xxlarge: 26px;
$font-size-xxxlarge: 32px;
$font-size-giant: 36px;
$font-size-xgiant: 41px;
$font-size-huge: 52px;

Sketches for the typeface, Tret, showing Noordzij’s rough hatching method of sketching.