Updated on April 12, 2021
It’s been 10 years since my last portfolio update and apparently, some things have changed. A decade ago, it was Windows 7 or Snow Leopard and iPhone 3GS or Windows Phone (gulp). When I started at Microsoft, the team was using Photoshop on giant tower PCs with clickety-clack keyboards and the weirdest variety of mice I’d ever seen. I spent a half-day trying to re-map my Apple keyboard controls to Windows 7.
Apple iPhone 3GS
HTC HD7 Windows phone
Apple iPhone 11 Pro
? Windows phone
In the past decade, Apple has conquered all the big cats and is currently road-tripping through California landmarks. Microsoft cycled through Windows 7, 8, nein, and decided to stop at 10.
Operating system release schedule, 2010–2020
It’s a little unfair for a direct comparison, but here’s a portfolio entry from 2010 (left) vs. 2020 (right)—both interfaces screen-captured at 1366px wide. The 2010 site has a 2-column layout, displaying left column content at 480px wide. The body is wrapped in a 720px container.
Our screens have higher resolution, and fonts are more diverse, larger, and more readable, but I think the best improvement is how the content, rather than the interface, defines the canvas. Sure, we still have navigation and links all over the place, but those controls are usually right where you need them as opposed to carved out on the top and off to the side.
Ok, I think it’s ready now…
The body copy is EB Garamond, which, like Stempel and other Garamonds, is based on the Egenolff-Berner specimen. This one is an open-sourced variant of Claude Garamond’s humanist typeface from the mid-16th century, designed by George Duffner and served by Google Fonts.
The headers and interface are set in Inter, formerly Inter UI, designed by Rasmus Andersson. It’s recently available on Google Fonts, but I’m using his latest variant served from GitHub’s servers with the extra glyphs, stylistic sets, and other OpenType features. I really wish Google Fonts would enable OpenType features. Anyhow, I love how versatile and legible this font is—big, bold headers with round tittles (not a fan of squares), and super-crispy at tiny sizes.
* * *
-- ·-· -··· ·-· ·· ·- -· -- --- ·-· ·-· ·· ···