Web safe fonts are something you’ll commonly find on a wide range of computer systems.
They’re used by web content authors in order to increase the likelihood that their content will actually display in their chosen font.
If your website’s visitor doesn’t have the specified font, the browser will try to choose an alternative, based on the list of fonts the author specified as a failsafe, or it will use a substitute in the visitor’s operating system.
There are font embedding services, such as Typekit or Google Fonts, and they’re a great alternative if you want your designs to have something fresh and unexpected. And, they’re also very easy to use.
For example, with Google, you can choose any font. Generate the code, and just paste it in the <head> of your document. There, you’re ready to reference it in CSS. And, it takes less than 60 seconds. And, it’s free. Thanks, Google!
Why does a web safe font matter?
On each device, there’s a list of common fonts and font families. It is usually based on the operating system, but each differs a little bit. For example, a Windows device will have one list of fonts, while a macOS device has another. And, there’s a proprietary list for Google’s Android OS.
Just go ahead and open any website. The font you’re seeing might not be the one the author originally intended.
What this means is that if the designer chose some obscure font for the site’s design, instead of a standard web font, or any of the other web friendly fonts for that matter, and you don’t have the font installed, the font you see might go back to some basic font, such as Times New Roman. Sure, as a visitor, you won’t know that it happened at all, but it will look plain ugly.
Choosing any font from the web safe fonts list will mean that the font is present on any operating system. That’s the small collection of fonts, such as HTML fonts and CSS fonts, that will overlap with Windows, Mac, Google, and even Linux and Unix. These are the best fonts for websites, just because of this fact.
They also give designers, as well as website owners, the option to specify which fonts the site should fall back to if necessary. That way, you have control over what will show up, regardless of the device. And you can pick something that’s close to the original font, the one you wanted, and your users won’t see something that’s extremely random. This is a plan B, a system that saves the user from bad font selections.
But, why can’t you just use whatever font you want? Or can you? Which ones can you use safely, easily, and reliably? The limited font choices on the Web is a pretty common design challenge. In print, what you see actually is what you get, but it’s different on the Web.
If you want the viewers to see what the designer sees, you should either have the viewers have all web-safe fonts, or for the fonts to be accessible from a remote server.
If none of these scenarios is true, the fonts will default to something completely else, which often gives you an undesirable result.
This is why web designers commonly stick to the web safe fonts that are common for most operating systems.
Web safe fonts
These fonts include serif, sans serif, and symbol typefaces. Some of them were originally intended for print, but others are specifically made for the screens.
- Courier New is similar to Times New Roman, and is a variation of an old classic. It’s also considered to be a monospace font.
- Garamond is another old-school option. It dates back to the styles used in 16th century Paris, but the new, improved version was introduced, and bundled with most Windows devices. It has been, since, adopted with others too.
- Bookman is another excellent headline option that maintains both legibility and readability, even when you use it at a small size.
- Trebuchet MS is actually a medieval-themed font, which was originally made by Microsoft back in the mid-90s. Used commonly on the XP version of the OS, it commonly appears as body copy online.
- Comic Sans MS this is a playful, whimsical alternative to many of the other sans serif options. And, it’s a bit fugly and hated all over the world.
- Helvetica is the go-to sans serif font for a designer. You can never go wrong with using it, even if you’re only using it as a fallback for another choice.
Sans Serif
The most legible web-safe typeface, Verdana, had its designer pay special attention to making sure that the text is very readable on a screen, even when used in small sizes. It offers a tall x-height, as well as a comfortable width and open letter spacing.
The Trebuchet MS typeface is also a typeface that maintains the clarity and readability, and it’s a bit narrower than Verdana, letting you put more copy in the same space. The unusual lowercase ‘g’ and the curved stroke endings give it more distinctiveness than Verdana.
The Arial typeface wasn’t originally made for the web, but it does work very well. It’s similar to Helvetica in terms of spacing and width, but it has slight character modifications.
Serifs
Designed for the web, the Georgia typeface is an alternative to Times New Roman. It has open letterforms and spacing, and is clean, crisp and easy to read, even at small sizes. In size and stature, it’s similar to Verdana. Even though it’s great for certain situations, avoid pairing it with others like Times New Roman, because they’ll look miniscule when compared to each other.
Times New Roman was originally designed for print, and is therefore not the easiest one to read on the web, and it gets worse at smaller sizes. If you like the look, but need something more versatile, use Georgia instead.
All of the fonts mentioned above are available both in Regular and Bold, with italics.
Symbol fonts
You’ll find Wingdings, Webdings and the ITC Zapf Dingbats included with most of today’s operating systems.
They have plenty of useful graphics, from geometric shapes and thought bubbles, to arrows, stars and snowflakes. However, when a font menu is displayed, the font names might show up as symbols, because what you see is what you get.
Ending thoughts on web safe fonts
A web safe font will give you a plan B, a fallback option when you think your first option might not work. They’ve been available on most devices for quite some time, and are widely accessible.
Even though not all of them are popular and look good (I’m looking at you, Comic Sans MS), you’ll find that you have plenty to choose from that are closely related to what you originally wanted. And if you can’t? Just use Helvetica, you can’t go wrong.
If you liked this article about web safe fonts, you should check out these as well:
- Bold Fonts: 42 Free Thick Fonts To Use For Headlines
- Arabic Fonts: 60+ Fonts Available For Download
- Cool Fonts: 100 Free And Unique Fonts To Download
- Signature Font Examples: Pick The Best Autograph Font
The post Web Safe Fonts To Use In HTML and CSS appeared first on Design your way.
Source: http://ift.tt/2EKq6Qa
No comments:
Post a Comment