Typography for the web used to be quite limited.
In the old days and I mean the time roughly before 2010,
it wasn't easy to just use any typeface you wanted on a website.
The reason for this is that fonts are software and
they need to be installed on a computer before they can be used.
So, you can design your website to use let's say the typeface Cooper Black,
and this will work on your computer just fine because you have this typeface installed,
but you can't be sure that the typeface is installed on your user's computers.
A browser will only render the typeface if it's actually installed.
If it isn't installed,
users will see a default typeface replacement instead.
There are a few typefaces however that are installed on almost all computers.
So, for a long time,
these five fonts for driving most of the topography of the web: Arial,
Georgia, Verdana, Times New Roman, and Courier.
These are pretty nice typefaces especially Georgia and Verdana which were
designed specifically for low-resolution screens by Matthew Carter in the 90s.
But we can all agree that being stuck with
just five typefaces for every website on the Internet is pretty limiting and
boring and what we would call fine topography and
attention to detail that has a rich history in print design,
wasn't even attempted on the web in those days.
There were a few hacky solutions to this typeface problem.
Mostly web designers would simply create bitmap images of texts they wanted to use.
They would create the text and the typeface they wanted to use in Photoshop,
then export an image and place these images into their designs.
Here's The New Yorker website from 2008.
Most of the type are set in Arial and Times New Roman.
But you can see that the iconic New Yorker typeface for
headlines is being used in a few places,
and those had to be created as images.
This was a pretty cumbersome process.
Every time new texts was to be added,
a designer had to create a new image.
This method couldn't be used for dynamically generated text,
a user comment for example,
and maybe most egregiously text as image causes many accessibility problems.
Screen readers for visually impaired users can't read it,
users can't select and copy it,
and search engines can't index sets.
So, in a way, designers at the time in their quest for more aesthetic web experience,
were breaking fundamental qualities of what made the web so great in the first place.
But luckily, things changed around the year
2010 when the technology of Web fonts was added to browsers,
which allowed for the use of custom typefaces.
The CSS property @font-face was now widely
supported and designers are ready to exploit new possibilities.
Here's an early example,
which was designed to showcase the promise of the new technology.
The site is still online at lostworldsfairs.com
and it includes a few additional visually extravagant examples.
These designs were quite a revelation at the time.
Finally, the quality of web typography was ready to catch up with that of print.
By the way, here's The New Yorker website as it looks today.
As expected, there are no more images for type,
all the type is using custom web fonts.
So, take a moment to appreciate how much more exciting it is to be a web designer today,
where once there were only a handful of typefaces available.
Now, we have literally thousands.
So, where can you get web fonts?
It goes without saying that you shouldn't use typefaces illegally.
There are plenty of ethical reasons not to do that of course,
but they are legal reasons too.
Since websites are so transparent,
it's really easy to look at the code behind the scenes and it's also quite
easy to find out if someone is using a typeface without a proper license.
So, the very first thing to do before deciding on a typeface for
a web project is to find out if it's available for online use.
This should generally not be a problem today as pretty
much all web foundries offer web licenses.
But you'll have to make sure that your project has a budget for fonts.
By the way, just because you own the license to use a typeface on your desktop,
doesn't mean you're allowed to use it online.
You should check with the type foundry.
But there are some attractive free options too.
Google Fonts is a favorite.
There are hundreds of freely available fonts
there and some of them are actually quite good.
I would suggest that you spend some time just browsing through
their catalog and make note of typefaces you like.
It's just a good practice for a designer to
have a few typefaces in the back of your mind,
as sort of personal library of your favorite fonts.
Then the next time you need a, let's say,
slightly condensed Sans Serif for some captioned text,
you might already know of a few contenders that you can try out right away.
Such knowledge of course also comes with experience over time.
Here are a few Google font typefaces that I use quite a bit in my work.
These Sans Serif fonts can be described as workhorses.
They are really well-designed,
they work well at small sizes,
and they are all quite neutral in their appearance.
But if you look closely, you can find some differences in the details.
Look how the tail of the 'Y' of Lato does not curl for
example or how the 'C' in PT Sans is a lot more open than the 'C' in Roboto.
You'll also notice that Roboto appears a bit heavier than
the other typefaces and that PT Sans is more condensed than Open Sans,
meaning it takes up less horizontal space.
All these are considerations when picking a typeface
and can affect the way your design communicates.
Here are some Serif typefaces I like.
Serif fonts have these little horizontal lines at the end of
the strokes and also more variations of thicks and thins.
They usually also have more personality.
See how Playfair is quite fancy and has connotations of fashion,
whilst Crimson Text has a more bookish traditional feeling.
Again, these are examples of typefaces that you can get for free at Google Fonts,
and there are literally hundreds more.
There are a few other sites that specialize in free typefaces.
You can check out dafont for example and Font Squirrel as another option.
Just be aware that the quality of free typefaces often varies.
Now, let's talk about another option,
renting typefaces via webfont delivery services.
Here, you can pay a monthly or a yearly fee and this
gives you the ability to use their typeface library in your projects.
A big one is Typekit.
It's owned by Adobe.
So, if you already have an Adobe Cloud Subscription,
you also have a Typekit accounts,
and you can use their typefaces.
Typekit has a very large selection of professional typefaces.
I actually use the service quite a bit in my own work.
A competitor to mention is cloud topography
created by the reputable typographer Jonathan Hoefler.
It's also the only place you can use their excellent type library which
includes popular fonts like Hoefler texts, knockout, and Gotham.
