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

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.

THE first volume of Scripta Minoa was published in 1909. It contained, as Part I, an account of the Prae-Phoenician Scripts of Crete, their Mediterranean relations and place in Minoan story (pp. i-i 10). Part II described the Hieroglyphic or Conventionalized Pictographic Script, with its antecedents and affinities (pp. 111-293). Part HI discussed the Phaestos Disk (pp. 294-302). An Analytical Index (pp. 294-302) was in effect a detailed table of contents; and there were twelve collotype plates.

Oxford 1952

A set of rules that will improve your typography 10x.

Use Traditional Point Sizes

Display     Double Canon    4.666
Heading 1   Canon   3.999
Heading 2   Double Great Primer 2.999
Heading 3   Double English  2.333
Heading 4   Double Pica 2.000
Heading 5   Paragon 1.666
Heading 6   English 1.166
Body        Pica    1.000
Fine Print 1    Small Pica  0.916
Fine Print 2    Bourgeois   0.750

Use Serif for Italic Text

Reduce Heading Spacing

The spacing between a heading and a paragraph should be less than the regular paragraph spacing. If regular paragraph spacing is used instead, the heading would seem too far away from the paragraph.

Use Thin Space

Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect.

The HTML code is  . You can go even further with Hair Space  

Don’t Use Helvetica, Inter, & Roboto