Hold CMD
while clicking a link. I prefer the choice to be put in the user’s hands.
@MacSparky
Using the Google font “Cabin” as the default one for body, headings and the menu items without requiring it via CSS is an odd choice. It’s not a common font that many users have installed. Especially not on mobile.
Everything will default to the second defined family, Helvetica:
(Helvetica only)
However, Cabin is an okay-ish headline alternative to Futura, which you use for your Macsparky logo. Used as a body font it is too noisy compared to Helvetica or even Apple’s San Francisco, which also would be a matching choice given the Mac context of the content (see suggetions below).
This is what users see if they have Cabin installed.
(Cabin only)
It would add more character and alignment with your “brand” by matching the logo’s font if you’d use Futura for headings and the menu. I know, it is also a font not everybody has, but at least Macs ship with Futura Medium installed.
Paired with Helvetica for the body it will look like this:
(Futura for headings and menu, Helvetica for body)
A solid alternative would be Futura for headings and menu items paired with Apple’S San Francisco for the body:
San Francisco establishes better visual hierarchy as it is less dense/compact than Helvetica.
Helvetica’s strokes result in an overall darker appearance of the body’s text blocks. Legibility is good with both.
I’d personally prefer the Futura + SF pairing. Achievable with this:
h1, h2, h3 {
font-family: "Futura, Cabin, Helvetica, -apple-system, Arial, sans-serif";
font-weight: "300";
letter-spacing: 1px;
}
#header nav ul {
font-family: "Futura, Cabin, Helvetica, -apple-system, Arial, sans-serif";
font-weight: "300";
}
body, p, ul, ol {
font-family: "-apple-system, Helevetica, Arial, sans-serif";
}