Updating site CSS to use system fonts

[JayKay514]

@arn Reviving the topic of this thread from 2015, isn't it about time that a Mac-focused site mostly visited by Mac users used... Apple fonts, instead of Microsoft's Verdana?

The really easy way to do this is to replace all those 'Verdana, Arial' declarations in the style sheet with this bulletproof system font stack:

font-family: -apple-system, BlinkMacSystemFont, 'avenir next', 'avenir', 'segoe ui', 'helvetica neue', 'helvetica', 'Cantarell', 'Ubuntu', 'roboto', 'noto', 'arial', sans-serif;

This will ensure that whatever device or OS the visitor is using, they'll see the content in their default system font. For Mac users, this means San Francisco on newer versions of macOS / iOS / iPadOS etc.

This also allows for more typographic richness, because current system fonts like San Francisco, Segoe UI, Ubuntu and Roboto have many more weights and variations, but to take advantage of that, it would require a deeper rework of the CSS and general typographic design used on the site.

(Quick screenshot below, done by tweaking the CSS in DevTools)

 

[tobefirst ⚽️]

As a designer, I strongly disagree that an Apple focused site would need to (or should) use Apple fonts. MR should have its own brand separate from Apple's. I do agree, however, that it is time for a brand refresh including a logo update.

 

[Pakaku]

Hopefully any refresh is a functional one rather than a trendy one. Verdana is 10x more readable than that Helvetica/San Francisco garbage Apple is obsessed with. Myriad Pro in particular looks good, is pretty readable IMO, and is iconic as an Apple font. Also, the worst visual website trends these days are the ones that look like Twitter and the Wikipedia refresh, and Macrumors probably has more dignity than that...

 

[JayKay514]

@arn Reviving the topic of this thread from 2015, isn't it about time that a Mac-focused site mostly visited by Mac users used... Apple fonts, instead of Microsoft's Verdana?

The really easy way to do this is to replace all those 'Verdana, Arial' declarations in the style sheet with this bulletproof system font stack:

font-family: -apple-system, BlinkMacSystemFont, 'avenir next', 'avenir', 'segoe ui', 'helvetica neue', 'helvetica', 'Cantarell', 'Ubuntu', 'roboto', 'noto', 'arial', sans-serif;

This will ensure that whatever device or OS the visitor is using, they'll see the content in their default system font. For Mac users, this means San Francisco on newer versions of macOS / iOS / iPadOS etc.

This also allows for more typographic richness, because current system fonts like San Francisco, Segoe UI, Ubuntu and Roboto have many more weights and variations, but to take advantage of that, it would require a deeper rework of the CSS and general typographic design used on the site.

(Quick screenshot below, done by tweaking the CSS in DevTools)

View attachment 2152638

Updated with current best-practices example of a bulletproof system-font stack.

 

[JayKay514]

Hopefully any refresh is a functional one rather than a trendy one. Verdana is 10x more readable than that Helvetica/San Francisco garbage Apple is obsessed with. Myriad Pro in particular looks good, is pretty readable IMO, and is iconic as an Apple font. Also, the worst visual website trends these days are the ones that look like Twitter and the Wikipedia refresh, and Macrumors probably has more dignity than that...

I'm not saying Verdana's a bad typeface, but remember that it, like Arial, was created for Microsoft Windows, and did not intrinsically have scalability or anti-aliasing in mind. Most computer fonts at the time displayed using bitmapped "screen fonts", separate from printing fonts, and it wasn't until TrueType (and later, OpenType) that system font rendering used vector fonts.

(Mac OS X inherited NeXTStep's PDF-based screen rendering engine, so it was PostScript-based from the beginning.)

A lot of the typographical issues in Arial (and there are many) stem from the fact that it was specifically commissioned to be a fallback for Helvetica so that cross-platform documents would display without the layout shifting due to different font metrics. (Type designer Mark Simonson has a whole article about this.)

San Francisco was introduced nine years ago, in 2014; Myriad was introduced around 2003, then eased out and finally completely dropped in 2017. I mean, YMMV, but to me Myriad now looks dated.

For practical reasons - conveying information on small screens - a tighter, vertical sans-serif like SF Pro uses less space. (See also: Google's Roboto, and the Swiss typeface that inspired both of them, Univers)

Myriad has a lot of angled strokes which make letterforms occupy more space horizontally. Notably, Apple never used
Myriad in any UI elements, only in branding, which leads to a discontinuity between the product experience and the packaging, and that seems very un-Apple-like when you think about it.

 

[JayKay514]

Updated logo concept I knocked out. Just a quick sketch, but this could be something used at larger sizes, and turned into an "MR" signet for icon sizes.