I’m in the middle of designing a website, and having a bit of trouble finding out what fonts I should use on my headings/content (not logo related). I’m not using a WYSIWYG editor, so it’s quite slow to get a feel for how a font will look on the site!
The main thing that I’m curious about, is whether designers use:
web fonts (API service such as GoogleFonts)
custom fonts which can be downloaded onto the server (so the client downloads the font when visiting the page)
desktop/system fonts (there is the trouble of knowing what fonts is on the client machine, as mac and windows etc would contain different fonts)
Any advice on making font selection easier for a website is appreciated, and is there any particular websites that’s recommended for choosing a font?
You choose a font based on the character of the typeface. For instance, you may want a techie look because it’s for gamers and so choose a geometric font. If you notice the romance books, they almost always have swirly lettering, which appeals to the female. So match the font to the subject matter or audience, if applicable.
In general, try not to use web fonts for the body type. On a slow connection, they may switch after a reader has already started reading, and it will be annoying. Use the web fonts for headings.
Use regular font for the body type. Use bold for headings. Don’t use more than 2 different styles of fonts. Use already-available h1, h2, h3 headings.
I chose to use the body font that’s already in the user’s system fonts so they load right up:
I like https://www.dafont.com as it’s broken down by “genre”, just pay attention to the licenses. Alternatively, there’s Google Fonts but they’re easier to browse when you know what font you’re looking for.
Be aware that you can also turn any font into a web font with a tool like FontSquirrel too!
It is believed that the use of many different fonts on one site can be confusing, confusing the reader, and if you use only one of them, the site may seem boring and bland.
The best solution is to use two main fonts when designing the site. One to apply for headings, and another - for the main text. Thus, the user will easily distinguish the headings from the text when viewing, and the site itself will look more holistic. For the title, for example, you can use the Verdana font, and for the main text - Times New Roman or other options. However, keep in mind that it is not necessary that the font that you installed on your computer be correctly displayed on the user’s computer. If the same font is not installed by the reader, then its browser will display either an alternative to your font, or a default value.
The following fonts are considered to be widespread: Times New Roman, Georgia, Verdana, Arial Black, Courier, Trebuchet MS, Comic Sans or Impact.
Is that including the mac and other devices though?
The main reason I asked this question was to figure out whether it’s acceptable to be using service fonts (google fonts), or should I be uploading the font onto the server and have the client download on page load. The standard fonts available on Windows are a bit boring
