CSS leading-trim – The Future of Digital Typesetting

Ethan Wang, who works at Microsoft:

In a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. The bigger the line height, the bigger the problem.

You can see the issue below: the 32px gap between all text ends up too be more than 32px because of this:

To solve this the new CSS property leading-trim from the CSS Inline Layout Module Level 3 specification can be used. As per spec:

The leading-trim properties allow controlling the spacing above and below the first and last lines of a block. It allows precise control over spacing; moreover, by relying on font metrics rather than hard-coded lengths, it allows content to be resized, rewrapped, and rendered in a variety of fonts while maintaining that spacing.

Vertical Centering of Text is explicitly mentioned in the specification of this new property. Use it as follows:

h1 { 
 text-edge: cap alphabetic;
 leading-trim: both;
}

As Wang notes:

The example above first uses text-edge (also a new property) to tell the browser the desired edge of the text is the cap height and the alphabetic baseline. Then it uses leading-trim to trim it from both sides.

These two simple lines of CSS create a clean text box that hugs your text. This helps you achieve much more accurate spacings and create a better visual hierarchy.

Cool! 🤩

Leading-Trim: The Future of Digital Typesetting →

Five UI Design tips for enterprise software

Johan from Mono:

We have been designing a lot of enterprise software, which comes with its own set of challenges.

In this blog post we captured some of the lessons we learned while creating the types of interfaces that are meant for daily, high-productivity use.

  1. Adjust your scaling
  2. Be wary of the application and module layers
  3. Clarify where you are with signposts
  4. The browser provides the windowing
  5. Focus on design patterns

Five UI Design tips for enterprise software →

“But Apple does it that way”

Adrian Roselli:

It is not uncommon that I raise an accessibility or usability issue with a client’s design or implementation and am met with either “But Google does this”, or “But Apple does this.” Mostly it is the default response to any issue I raise, but it is far worse when it is a reaction to a genuine technical failure or problem real users have identified.

That response does not address the problem I may have raised. It avoids. It offloads responsibility. It declines to even try.

As Jeremy Keith put it:

Cargo cultism is not a strategy.

I Don’t Care What Google or Apple or Whoever Did →

Fundamentals of Hierarchy in Interface Design

Visual hierarchy is the order in which the user process information by importance. In interface design, like in any other form of design, this concept is necessary to be functional at sight. With the correct use of hierarchy, the mind can group and prioritize elements to give them a specific order, which facilitates the understanding of what you want to communicate and the sense of achievement by the user.

Talks about seven resources to take into account to create a correct hierarchy:

  1. Size: The larger the element, the more it will attract attention.
  2. Color: Bright colors stand out more than muted tones.
  3. Proximity: Elements close to each other attract more attention than distant elements.
  4. Alignment: Any element that separates from the alignment of the others will attract attention.
  5. Repetition: Repeated styles give the impression that the elements are related.
  6. Negative Space: The more space around the element, the more attention it generates.
  7. Texture: Varied and complex textures attract more attention than flat ones.

Fundamentals of Hierarchy in Interface Design →

💵 This article is stuck behind Medium’s metered paywall … open the link in an incognito window to bypass that limit.

How to Design Delightful Dark Mode Themes

When done well, dark themes have many benefits. They reduce eyestrain. They are easier to read in low light. And, depending on the screen, they can greatly reduce battery consumption.

However, it is difficult to create a delightful dark theme. We cannot simply reuse our colors or invert our shades. If we do, we will achieve the opposite of what we want: we will increase eyestrain and make it harder to read in low light. We may even break our information hierarchy.

The stuff mentioned should help you to create readable, balanced, and delightful “Dark Mode” themes.

How to design delightful dark themes →

🔥 If you’re wondering how to easily implement these in your JavaScript application, I’ve done an extensive writeup on the subject. All major frameworks (React, Vue, Angular, etc.) are covered!

Chart Design Guidelines at City Intelligence

At the City Intelligence unit at City Hall almost anyone can create a data visualisation. To keep everyone in line they created Data Design Guidelines:

Effective communication of evidence and data through information design and data visualisation, is obviously important to help inform policy internally, but it is also just as important to help boroughs and individual Londoners better understand their city.

With this in mind, over the past year, we have been thinking more about how we can improve the clarity, consistency and accessibility of our data visualisation output.

The guidelines, which focus principally on chart design, cover the following areas:

  • Design Principles
  • Practical Steps
  • Styling & Layout
  • Using Colour
  • Categorical Colour Palettes
  • Find & Test Your Own Colours
  • Introducing GGLAPlot
  • Chart Examples
  • Further Reading

Nice!

City Intelligence Data Design Guidelines →

Via Janne Aukia on Twitter

Steve Schoger | Refactoring UI — Tips and tricks to make a site visually more interesting

As seen at the most recent CSS Day. I’m quite sure this will help many developers to make their POCs/experiments visually more interesting:

Sometimes when we look at a polished interface we can acknowledge that it looks good but it’s hard to articulate why it looks good. In this practical session, Steve will be explaining the why. He’ll be looking at a poorly designed UI and refactoring it while providing some of the strategies and techniques designers use to give an interface that polished look.

We’ll be looking at some of the more common problems faced by designers and developers—from simple forms to complex data—showing what a difference a few small cosmetic changes can do to bring design to the next level.

I know many designers will shrug when seeing this, but keep in mind that it’s intended for developers to make sure their POCs and demos look “good enough”. The guidelines/changes are simple, and make a huge difference … I wish my students from back in the day had seen this video.

The new Mac Pro is a design remix

Arun Venkatesan takes a deep dive into the design and engineering behind the new Mac Pro:

Apple held its annual developer conference, WWDC, this week in San Jose. In the keynote, aside from a slew of developer-focused software announcements, one new hardware announcement has attracted the most attention, the 2019 Mac Pro and Pro Display XDR.

Amazing device. Expensive too, but still amazing.

The new Mac Pro is a design remix →

Beyond the interface – The Sameness of Apps and Websites

Friend Thomas Byttebier – Digital Director at Base Design – has written a very insightful post on the sameness of apps, websites, subway maps, and coffee shops.

Why do all apps look the same nowadays? Why do all websites look the same? What can brands do to create more memorable digital experiences?

And also: how do you stand out – without compromising predictability, usability, etc. – when everything needs to (somewhat) look and behave the same?

Read the entire thing. It’s pure gold.

Beyond the interface →