Tags: typography

354

sparkline

Friday, September 6th, 2019

Recursive | Recursive

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

Saturday, August 31st, 2019

Sunday, July 21st, 2019

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

Friday, July 19th, 2019

The Guardian digital design style guide

What a lovely way to walk through the design system underpinning the Guardian website.

Bonus points for using the term “tweak points”!

Monday, July 1st, 2019

Variable Fonts for Developers

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

Wednesday, June 12th, 2019

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!

Sunday, June 9th, 2019

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.

Thursday, May 9th, 2019

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.

Tuesday, April 30th, 2019

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.

Tuesday, April 9th, 2019

Public Sans

A free and open source neutral sans-serif typeface, released as part of version two of the design system for the US federal government.

Science and Tech Ads on Flickr

Stylish! Retro! Sciency!

Martin ad

Sunday, March 31st, 2019

Intro to Font Metrics

Font metrics help the computer determine things like the default spacing between lines, how high or low sub and super scripts should go, and how to align two differently sized pieces of text next to each other.

Friday, March 22nd, 2019

All you need to know about hyphenation in CSS | Clagnut by Richard Rutter

Everything you need to know about hyphenation on the web today, from Rich’s galaxy brain.

Hyphenation is a perfect example of progressive enhancement, so you can start applying the above now if you think your readers will benefit from it – support among browsers will only increase.

Wednesday, January 30th, 2019

Programming Fonts - Test Drive

Monospaced fonts you can use in your text editor. Most of them are …not good. But then there are gems like Mark Simonson’s Anonymous Pro, David Jonathan Ross’s Input, and Erik Spiekerman’s Fira Mono. And there’s always good ol’ Droid Sans.

Bodoni*

An open source version of Bodoni:

Bodoni* is the first ever no-compromises Bodoni family, built for the digital age. Years in the making, this font family includes a whopping 56 font files, ensuring you will have the perfect Bodoni for every situation.

Tuesday, January 29th, 2019

Owltastic • Web design by Meagan Fisher Couldwell

My goodness, Meagan’s new site design is absolutely gorgeous! The colour palette, the typography, the texture, the motion design …it all communicates character and personality. Beautiful work!

Friday, January 11th, 2019

Stepping away from Sass

I think Cathy might’ve buried the lede:

The knock on effect of this was removing media queries. As I moved towards some of the more modern features of CSS the need to target specific screen sizes with unique code was removed.

But on the topic of Sass, layout is now taken care of with CSS grid, variables are taken care of with CSS custom properties, and mixins for typography are taken care of with calc().

Personally, I’ve always found the most useful feature of Sass to simply be that you can have lots of separate Sass files that get combined into one CSS file—very handy for component libraries.

Saturday, December 29th, 2018

Carson: Textured fluid type - Steve Honeyman

I reckon it’s time for distressed type to make a comeback—CSS is ready for it.

Thursday, December 6th, 2018

WALL·E | Typeset In The Future

A deep dive into Pixar’s sci-fi masterpiece, featuring entertaining detours to communist propaganda and Disney theme parks.

Saturday, November 10th, 2018

Redesigning your product and website for dark mode — Stuff & Nonsense

Some advice from Andy on creating a dark theme for your website. It’s not just about the colours—there are typography implications too.