Apple has always been known for using a very clean and modern design, which is why many designers want to use the Apple website font and take inspiration from Apple in their designs, in general.
The clean look also applies to the typography used across all their products, and also on Apple’s website. Apple is perhaps most famous for using the Helvetica font, as it has been the standard system font on their mac devices for a long time. However, Apple has actually never used the Helvetica font on their website. So what font is Apple currently using on their website?
What’s the Apple website font in 2020?
The font used on Apple’s website is called San Francisco and the version used is SF Pro. SF Pro Display is used for the headers, while SF Pro Text is used for the body text. The font was designed in-house by Apple and it replaced the previous font on their website, Myriad Set Pro in 2017.
But, how can you get the San Francisco font, and previous Apple website fonts, can you use them in your own projects, and are there any free alternatives?
Where can you get the Apple website font?
You can get the three different versions of the San Francisco font, SF Pro, SF Mono and SF Compact from Apple’s website. Bear in mind that the versions you can download from Apple’s website are .dmg files, so they only work on Apple devices.
These are the only official versions of the font. You can also find San Francisco font files in .ttf and .otf formats, that will work on all operating systems hosted at GitHub if you search for a bit. However using those files isn’t legal in most cases because Apple are very strict when it comes to the licensing of the San Francisco font. It’s better to use a free alternative.
Can you use the San Francisco font in your own projects?
The licensing of the San Francisco font is very strict, so in most cases you’re not allowed to use it in your own projects. Apple only permits usage of the font for mockups of iOS apps, or as a system font. So unless you own an Apple device, or you’re building an app for Apple devices, you’re unfortunately out of luck.
Are there free alternatives to the San Francisco font?
There are a couple of fonts that look quite similar. The font that to me most closely resembles the SF Pro font is Inter. It’s actually very similar. Just like San Francisco, Inter was designed to be very legible in user interfaces, also at small sizes. The biggest difference is that Inter has larger letter spacing. You can get Inter for free on Google fonts.
It can be hard to find examples of websites that use the Inter font, but here’s one example of a website that’s using Inter. Icons8, a popular website for icons, also uses Inter. Below is also a side-by-side comparison of Inter and San Francisco. You could easily mistake one for the other:
Another font that resembles the San Francisco font, although not as closely as Inter, is Roboto. Roboto is a common font that is used by Google on most of their products, and you can also get Roboto for free on Google Fonts. Here’s what San Francisco and Roboto look like side-by-side:
Lato is another font that could be used as a substitute for San Francisco because of it’s good readability. Lato has some more “quirks”, or I guess you could say personality, compared to San Francisco. It’s not as clean looking. It’s also available for free on Google Fonts. Here’s how it compares to San Francisco:
What fonts have Apple used on their website over the years and where can you get them?
Apple have used three fonts on their website over the years: Lucida Grande, Myriad Set Pro, and San Francisco. They have also used Helvetica Neue, Helvetica and Arial either in rare occasions or as fallback fonts (in case the preferred font isn’t available).
Beginning – ca. 2010: Lucida Grande
Lucida Grande was the first font used on Apple’s website, and it was still in use sometime around 2010.
Where can you get Lucida Grande?
Lucida grande is a paid font, which you can buy from MyFonts. The font uses a pay–as-you-go licensing format on websites, which means that you need to pay according to the number of pageviews you get.
ca. 2010 – 2017: Myriad Set Pro
Myriad Set Pro was the second font used on Apple’s website, until it was replaced by San Francisco. Apple used a modified version of the Myriad Pro with more lighter versions, to get those thin headlines they used in the 2010’s.
Where can you get Myriad Set Pro?
Myriad Set Pro isn’t publicly available, so you’ll have to settle for Myriad Pro, which can be purchased from something like MyFonts. Unfortunately Myriad Pro is not available for use on the web, according to MyFonts’ licensing information.
If you want an alternative to Myriad Set Pro with the same thin styles, that can also be used on the web, a good alternative is Akagi, which can be purchased on MyFonts.
2017 – Present: San Francisco
San Francisco is the latest font Appled started to use sometime around 2017. As I’ve mentioned it’s available from Apple’s website, but you’re not really allowed to use it.
When they switched to San Francisco, Apple started to use bolder headlines again like they did in the 2010’s when they used the Lucida Grande font.
Bonus: 3 free alternatives to Helvetica Neue, the most famous Apple font
Although Helvetica Neue hasn’t really been used on Apple’s website, it’s still one of their most iconic fonts and one of my favorites. It also seems like a lot of people think it has been used on Apple’s website, including Google. So, because I’ve also been looking for good alternatives for it, I thought I’d post my best findings here:
1. Arimo
Arimo is perhaps my favorite alternative, it looks quite similar and you can get Arimo for free on Google Fonts. However, it doesn’t have as many thick and thin versions as Helvetica. The numbers also aren’t as rounded and pleasant looking as Helvetica Neue’s numbers, in my opinion. Here’s how it looks compared to Helvetica Neue:
2. Hind
Hind is another font you can get for free from Google Fonts that looks pretty similar to Helvetica Neue, but a little bit more condensed. Again, the numbers are the biggest difference between the two fonts. Here’s how the fonts look side-by-side:
3. Heebo
Another good free alternative to Helvetica Neue on Google Fonts is Heebo. However some of the letters look a little bit more narrow, and the numbers are again not as rounded as Helvetica Neue’s numbers. Here’s how they compare:
4. Roboto
Roboto is a modern classic that’s used a lot by Google, and it’s pretty similar to Helvetica Neue, but more plain looking. It looks more like Heebo than Helvetica Neue. As you might expect, you can get Roboto from Google Fonts. Here’s how they look side-by-side:
