Line heights in CSS work better with ratios | Andy Bell

There’s a broader point here about declarative design:

Setting very specific values may feel like you’re in more control, but you’reactually rescinding control by introducing fragility in the form of overly-specific CSS.

Tagged with

Related links

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

Tagged with

Introducing TODS – a typographic and OpenType default stylesheet | Clagnut by Richard Rutter

This is a very handy piece of work by Rich:

The idea is to set sensible typographic defaults for use on prose (a column of text), making particular use of the font features provided by OpenType. The main principle is that it can be used as starting point for all projects, so doesn’t include design-specific aspects such as font choice, type scale or layout (including how you might like to set the line-length).

Tagged with

It’s about time I tried to explain what progressive enhancement actually is - Piccalilli

Progressive enhancement is a design and development principle where we build in layers which automatically turn themselves on based on the browser’s capabilities.

The idea of progressive enhancement is thateveryone gets the perfect experience for them,rather than a pre-determined “perfect” experience from a design and development team.

Tagged with

New magic for animations in CSS | Chase McCoy

Hallelujah! We’re finally getting our two wishes for CSS animations and transitions:

  1. Animating to and fromdisplay: none;for the sake of enter/exit animations.
  2. Animating to and from the intrinsic size of an element (such asheight: auto;).

Tagged with

Printing music with CSS grid

Laying out sheet music with CSS grid—sounds extreme until you see it abstracted into a web component.

We need fluid and responsive music rendering for the web!

Tagged with

Related posts

Displaying HTML web components

You might want to use `display: contents`…maybe.

Who knows?

Had you heard of these bits of CSS? Me too/neither!

Schooltijd

Going back to school in Amsterdam.

Making the Patterns Day website

The joy of getting hands-on with HTML and CSS.

Assumption

Separate your concerns.