Variable Fonts and Wide-Screen Layouts: Adopting Data-Driven Progressive Enhancements

From NN/g: https://www.nngroup.com/articles/variable-fonts-wide-screen-layout/

Summary: The NN/g website homepage now incorporates variable fonts and a wide-screen layout — 2 technical adjustments which improve the user experience for a subset of users on supported devices.


We recently updated our website homepage , and, in addition to changing the content and visual design, we’ve incorporated two major technical changes: adding a new layout for users with wide screens, and using a variable font. These changes are progressive enhancements , because they only affect users with particular types of devices.

Since these changes are also complex to implement, we decided to adopt them only after reviewing our website traffic to determine how many of our visitors would benefit and if the changes were worth our business resources.

Wide-Screen Breakpoint

In 2006, we recommended designing layouts for viewports 1024-pixel wide. But with today’s higher-resolution screens, that approach can leave many users with inches of unused space on both sides of the content — even on a small 13-inch laptop. To decide whether to invest in creating wide-screen layouts, we took a look at our website analytics, and realized that 77% of our sessions are on browser windows wider than 1100 pixels .

Read Full Article

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.