Be sure to pair viewport units with a relative unit when using them on font sizes, or you’ll introduce an accessibility issue.
Have a design where you want text to get cut off at 2 or 3 lines? You can do it with CSS alone.
Design Systems expert Nathan Curtis* tweeted this the other day:
With all those typefaces out there, how do my systems clients usually end up with Proxima Nova, Open Sans, or Source Sans Pro?— Nathan August Curtis (@nathanacurtis) March 15, 2017
This got me thinking - anecdotally, those three typefaces have been the ones primarily used on every project that I’ve worked on for maybe the last four or five years. This very blog is (currently) set in Source Sans Pro. It’s impossible to compile statistics on this (or is it?), but it his statement rings true in my experience.
Why do those three typefaces - Proxima Nova, Open Sans, our Source Sans Pro - seem to rule the web? What are there any pitfalls of using them? What do they have in common? What should we look for in alternatives? What are some example alternatives we can consider?…
I’ve always been focused on strong typography when it comes to design. As I’ve evolved into a front end developer, I still focus a lot on the typography of a project. As I’ve written about before, if the design is up to me, I even start with setting the paragraph.
However, what can you do to set yourself up for success when it comes to coding a design and it’s typography? I’ve done this - a lot - and I’ve come to some conclusions.…