#typography (222 links)
- Keeping type consistent in changing conditions elliotjaystocks.com
A run-through of grade with variable fonts.
At first glance, grade might seem very much like weight. But where weight serves to differentiate (adding emphasis and contrast to text), grade’s purpose is to unify (bringing consistency to text that looks different when it shouldn’t). It allows designers to adjust type precisely so that it appears the same across different materials, backgrounds, and lighting conditions without changing spacing, line breaks, or layout. And once you notice the problem grade addresses, it’s hard to not see it everywhere.
- CJK Typesetting in 2025: Challenges, Workflows, and Best Practices asianabsolute.co.uk
- Reimagining Fluid Typography | OddBird oddbird.net
Relative units like em and rem are excellent for internal relationships – keeping the scale consistent between body text and headings, for example. But things always go wrong when we try to treat em as an alias for px, with mental conversions based on their assumed default relationship. At that point we’re keeping zoom, but discarding everything else about the user preference.
- Fonts Knowledge - Google Fonts fonts.google.com
- Japanese Text Layout for the Future* (hint: there isn’t one) atadistance.net
Somehow we forgot how to center rectangles and must find our way back
- Why has The Economist changed its typeface? economist.com
Keen-eyed readers will have noticed that our website, app and print edition look different
- Retrofitting fluid typography clagnut.com
- Why Do Everyone’s Logo Fonts Look the Same? justcreative.com
Throughout this piece, we’ve talked about the sans-serifs and the utilitarian nature of their design. But perhaps their greatest sin is that they often lack personality. When more and more customers are looking for a more human relationship with brands, having the same logo font as everyone else just doesn’t cut it.
- Geist Font — Vercel vercel.com
Geist embodies our design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement.
Forked from Inter, apparently
- Modern Font Stacks modernfontstacks.com
System font stack CSS organized by typeface classification for every modern OS. The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.
Via ttscoff.
- typo/graphic posters typographicposters.com
- Right-to-left Styling rtlstyling.com
- How the pandemic made fonts friendlier | The Economist economist.com
The latest big name to follow suit is O2, a telecoms company. The brand is dropping Frutiger, the banal Humanist Sans it has used since 2002, for On Air, a new typeface created by Monotype.
- Butterick’s Practical Typography 2nd edition practicaltypography.com
New in the second edition: emoticons and emoji, metrics vs. optical spacing, free fonts, Century Schoolbook alternatives, grids, screen-reading considerations, responsive web design, how to work with a designer, the copyright status of fonts, how this book was made, and typographic humor.
- Inter font family rsms.me
Inter is a typeface carefully crafted & designed for computer screens.
Via monospaced.
- Text for Proofing Fonts | Fonts by Hoefler&Co. typography.com
Via Popular.
- Home | Utopia utopia.fyi
Utopia emerges when designers and developers share a systematic approach to fluidity in responsive design. Instead of designing for x number of arbitrary breakpoints, we can design a system within which elements scale proportionally and fluidly.
- Simplified Fluid Typography css-tricks.com
Fluid typography is the idea that font-size (and perhaps other attributes of type, like line-height) change depending on the screen size (or perhaps container queries if we had them). The core trickery comes from viewport units.
It’s hard to pick a font size that is just right, especially as you try to adapt to different screens and scenarios. Looking at the recent history of how we got here can give us some perspective.
- Wakamai Fondue wakamaifondue.com
Mandy Michael 5 Dec ember 2019 Published in Code, Design No comments If you read Jason’s introductory article about variable fonts , you’ll understand the many…
- An Introduction to Variable Fonts ◆ 24 ways 24ways.org
Jason Pamental 4 Dec ember 2019 Published in Code No comments Everything you thought you knew about fonts just changed (for the better). Typography has always…
- Recursive Sans & Mono recursive.design
A highly-flexible new variable font. Built to maximize versatility, control, and performance, Recursive is a five-axis variable font. This enables you to choose…
- jeddy3/stylelint-scales github.com
A Stylelint plugin pack to enforce numeric scales.
- Type in the digital era is a mess fastcompany.com
It’s easy to overlook one of the most important elements of UI design: text. It hides everywhere – tucked inside button labels, scattered through tool tips,…
- glyphic-co/textblock github.com
Continuously responsive typesetting — Demo:
#fluid#progressive-enhancement #responsive#responsive-design#typesetting#typesetting-system #typography #javascript Earlier this month I was invited to give an evening lecture at the Typography Society of Austria ( tga ) in Vienna. I was honoured to do so, as it meant…
7 Dec ember 2018 Published in Code No comments An important part of designing user interfaces is creating consistent vertical rhythm between elements. Creating…
This page shows how language specific quotation marks are set with CSS andthe unicodecharacters for the typographical quotes used in several languages. The…
- The Font Loading Checklist—zachleat.com zachleat.com
The Font Loading Checklist 30 Aug 2018 Zach Leatherman 3 min read When I look back at the last four years that I’ve spent learning everything I could about web…
- How to use Apple’s SF Mono font in your editor – Blog post - Simon Fredsted’s blog simonfredsted.com
At WWDC 2016, Apple unveiled a brand new font which was called San Francisco . The font went on to become the default font in macOS and iOS, replacing Helvetica…
- Airbnb's new typeface | Hacker News news.ycombinator.com
You can’t argue that typography is so vital to their business that this is a useful allocation of resources. Obviously, design is important to any company that…
The story of Chinese characters begins with, of all things, turtle bellies. The kings of the Shang Dynasty—which ruled from the 16th to the 11th centuries…
- FontDrop! fontdrop.info
The font Attribute Mono contains 1533 Glyphs. Note: Glyphs shown here are not affected if you switch on/off detected OpenType features. 24px Traditionally, text…
A variable font is a single font file which behaves like multiple styles. (I wrote more about them here in an extract from my Web Typography book). There are…
23 Minutes of Work for Better Font Loading 21 November 2017 Read in about 4 minutes Last night I hopped on Twitter after my daughter went to sleep with a little…