Read on Twitter
Today we are excited to launch a new website for @facultyco - https://faculty.com/
This is our second website since the company launched and we are extremely proud of the progression of the design, interaction, and display of our work.
Buckle up! This is A THREAD.
This is our second website since the company launched and we are extremely proud of the progression of the design, interaction, and display of our work.
Buckle up! This is A THREAD.
Naturally, because I’m me, I want to specifically talk about the typography of our new site and how we use it to deliver information and case studies while evolving the Faculty brand at the same time.
Typographic pairing is always a fun challenge. Finding typefaces that compliment and contrast each other, while working together isn’t easy, but I’ve found it to always be worth the effort.
With the old website, we already had a pair of typefaces that worked great: Mallory by @frerejones and Pitch Sans by @klimtypefoundry.
We used Mallory for all of our body and display copy and Pitch Sans did the heavy lifting for all of the nerdy, technical information.
We used Mallory for all of our body and display copy and Pitch Sans did the heavy lifting for all of the nerdy, technical information.
When we started redesigning the site, @xdesro and I knew we wanted typography to be more center-stage and quickly worked on trying to convince @shiflett we should add a new typeface to the stack.
He wasn't convinced at first ;-)
He wasn't convinced at first ;-)
So we did a *lot* of exploration.
We wanted something that would give a more life and energy to the Faculty brand. Mallory and Pitch Sans are great, but were a bit too sober with how we were using them.
We wanted something that would give a more life and energy to the Faculty brand. Mallory and Pitch Sans are great, but were a bit too sober with how we were using them.
As you may know, there is a big trend right now of using super-expressionistic/chonky typefaces (Chobani, MailChimp, Dropbox, et. al) so we tried some of those.
Although I personally love many of them, they didn't feel quite right for Faculty.
Although I personally love many of them, they didn't feel quite right for Faculty.
Our work typically eschews the flashiest trends and focuses on good design and good IA that always works. We are all proud of that and needed a typeface to match.
(see https://faculty.com/standards for more about our approach to work)
(see https://faculty.com/standards for more about our approach to work)
I first thought about Scotch Modern typefaces as they are personal favorites and aren’t used often on the web. They were nice, but perhaps a bit too stodgy and dated feeling.
This lead me to thinking about Clarendons and type specifically made for newspaper printing.
There is a nice history of typefaces made for newspapers (ie: the “Legibility Group” by Linotype). The connection to information and academic work fit nicely with Faculty’s ethos.
There is a nice history of typefaces made for newspapers (ie: the “Legibility Group” by Linotype). The connection to information and academic work fit nicely with Faculty’s ethos.
We tried Benton Modern Display Condensed, which was very pretty but almost too “Wall Street Journal-ish” and Guardian Egyptian which was too connected with “The Guardian” newspaper itself.
Both were a bit too on-the-nose.
Both were a bit too on-the-nose.
Which eventually lead me to my favorite type of “newspaper” typefaces: Ionics.
According to @commercialtype, “The bracketed serifs & ball terminals of the traditional Clarendon, also known as Ionic, first emerged in Britain in the middle of the 19th century … they have long been a common choice for newspapers … and are a natural choice for long texts.”
Once I was focused on Ionics, it reminded me about how @Lett_Arc uses Duplicate Sans and Duplicate Ionic on their website in a really nice way.
(hat tip to @ainat_ and @NickSherman)
(hat tip to @ainat_ and @NickSherman)
Duplicate is a personal interpretation by Christian Swartz of Roger Excoffon’s 20th century classic Antique Olive from memory: https://fontsinuse.com/typefaces/1140/antique-olive
Duplicate Ionic is a fun twist of an Ionic with the modern Antique Olive.
It feels rooted in history but also fresh.
Duplicate Ionic is a fun twist of an Ionic with the modern Antique Olive.
It feels rooted in history but also fresh.
I was nervous if @shiflett would like it, but he did!
For my last step, I wanted to take an Ionic, which is usually used in small sizes and for long copy, and try to use it for large sizes and display copy.
And, if I can brag just a bit, I think it looks freaking great.
For my last step, I wanted to take an Ionic, which is usually used in small sizes and for long copy, and try to use it for large sizes and display copy.
And, if I can brag just a bit, I think it looks freaking great.
So that is the end of the thread—just a little inside-baseball of one small (but important) aspect of the new @facultyco website.
Thanks for reading along.
If you appreciate this attention to detail, give the site a visit and consider hiring us for your next web project.
Thanks for reading along.
If you appreciate this attention to detail, give the site a visit and consider hiring us for your next web project.
