Link tags: type

298

sparkline

Rise of the Digital Fonts

A history of typesetting from movable type to variable fonts.

FontGoggles — Interactive Previewing and Comparing

A really nice open-source font-previewing tool for the Mac.

A Variable Fonts Primer

Everything you ever wanted to know about variable fonts, gathered together into one excellent website.

Point, don’t point — I love Typography

A brief history of the manicule, illustrated with some extreme examples.

Why the GOV.UK Design System team changed the input type for numbers - Technology in government

Some solid research here. Turns out that using input type=”text” inputmode=”numeric” pattern="[0-9]*" is probably a better bet than using input type="number".

Variable fonts’ past, present and future, according to Dalton Maag

In this interview, Biance Berning says:

Cassie Evans from Clearleft is an interesting person to follow as she combines web animation with variable font technology, essentially exploring the technology’s practicality and expression.

Hells yeah!

We’re only just scratching the surface of what variable fonts can do within more interactive and immersive spaces. I think we’ll see a lot more progress and experimentation with that as time goes on.

Fluid scale and tokens: a match made in heaven - Andy Bell

Andy takes Utopia for a spin—it very much matches his approach.

Utopia

This is the project that Trys and James have been working on at Clearleft. It’s a way of approaching modular scales in web typography that uses CSS locks and custom properties to fantastic effect.

Utopia is not a product, a plugin, or a framework. It’s a memorable/pretentious word we use to refer to a way of thinking about fluid responsive design.

Demos, Prototypes, and MVPs | Jacob Kaplan-Moss

I’m usually building one of three things: a demo, a prototype, or a minimum viable product (MVP).

I’ve seen some confusion over these terms — some people seem to use them somewhat interchangeable. But they’re not the same thing, and building one when you need another can cause problems.

This is a very useful distinction!

A short history of body copy sizes on the Web

A look at the trend towards larger and larger font sizes for body copy on the web, culminating with Resilient Web Design.

There are some good arguments here for the upper limit on the font size there being too high, so I’ve adjusted it slightly. Now on large screens, the body copy on Resilient Web Design is 32px (2 times 1em), down from 40px (2.5 times 1em).

B612 – The font family

B612 is an highly legible open source font family designed and tested to be used on aircraft cockpit screens.

Available as a web font.

Recursive | Recursive

Play around with this variable font available soon from Google Fonts in monospaced and sans-serif versions.

Standard Ebooks: Free and liberated ebooks, carefully produced for the true book lover.

Books in the public domain, lovingly designed and typeset, available in multiple formats for free. Great works of fiction from Austen, Conrad, Stevenson, Wells, Hardy, Doyle, and Dickens, along with classics of non-fiction like Darwin’s The Origin of Species and Shackleton’s South!

5 Keys to Accessible Web Typography | Better Web Type

Some excellent explanations for these five pieces of sensible typography advice:

  1. Set your base font size in relative units
  2. Check the colour of your type and only then its contrast
  3. Use highly legible fonts
  4. Shape your paragraphs well
  5. Correctly use the heading levels

Variable Fonts for Developers

A showcase of fun experiments with variable fonts, courtesy of Mandy.

Breaking the physical limits of fonts

This broke my brain.

The challenge: in the fewest resources possible, render meaningful text.

  • How small can a font really go?
  • How many bytes of memory would you need (to store it and run it?)
  • How much code would it take to express it?

Lets see just how far we can take this!

VOCAL

Each typeface highlights a piece of history from a specific underrepresented race, ethnicity, or gender—from the Women’s Suffrage Movement in Argentina to the Civil Rights Movement in America.

Type in the digital era is a mess

Marcin explains why line height works differently in print and the web. Along the way, he hits upon this key insight about CSS:

Web also took away some of the control from typesetters. What in the print era were absolute rules, now became suggestions.

Remember that every line of CSS you write is a suggestion to the browser.

Progressive Font Enrichment: reinventing web font performance | Responsive Web Typography

Jason describes the next big thing in web typography: streaming fonts!

…to enable the ability for only the required part of the font be downloaded on any given page, and for subsequent requests for that font to dynamically ‘patch’ the original download with additional sets of glyphs as required on successive page views—even if they occur on separate sites.