Can Fonts Be Slowing Your Site
What does it mean to use a Web Safe Font?
The most negative aspect of using web fonts is that it has an immediate impact on your page’s overall rendering speed. If you use a third-party service like Google or Typekit, you have no control over whether or not their services are available.
Advantages of web fonts
Integrating web fonts has numerous advantages. Businesses use web fonts for a variety of reasons, one of which is to achieve consistent branding across multiple mediums. Web fonts are scalable, zoomable, and high-DPI friendly, which means they can be displayed on any device, including desktops, tablets, and smartphones, regardless of resolution. Design, readability, and accessibility are also advantages of using web fonts.
For Speed Web Safe Fonts
The font should be installed in the device in order for it to be readable and look the same in any browser or device (such as mobile and web). Web Safe fonts are typically pre-installed on most computers, smartphones, and tablets.
Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred to sometimes as “browser safe fonts”. This is the reference I use when making web pages and I expect you will find it useful too.
Fonts In Web Design
If you are new to web design, maybe you are thinking: “Why I have to limit to that small set of fonts? I have a large collection of nice fonts on my computer”. Well, as seasoned web designers already know, browsers can use only the fonts installed in the same computer, so it means that every visitor of your web page needs to have all the fonts you want to use installed in his/her computer. Of course, different people will have different fonts installed, and thus comes the need of a standard set of fonts. Fortunately, CSS allows set several values for the font-family property, which eases the task a bit.
If you want to know how the fonts are displayed in other OS’s or browsers than yours, after the table you can find several screenshots of this page in different systems and browsers
The Font list
First, a few introductory notes:
- The names in grey are the generic family of each font.
- In some cases, the Mac equivalent is the same font since Mac OS also includes some of the fonts shipped with Windows.
- The notes at the bottom contain specific information about some of the fonts.
Normal style | Bold style |
---|---|
Arial, Arial, Helvetica, sans-serif | Arial, Arial, Helvetica, sans-serif |
Arial Black, Arial Black, Gadget, sans-serif | Arial Black, Arial Black, Gadget, sans-serif |
Comic Sans MS, Comic Sans MS5, cursive | Comic Sans MS, Comic Sans MS5, cursive |
Courier New, Courier New, Courier6, monospace | Courier New, Courier New, Courier6, monospace |
Georgia1, Georgia, serif | Georgia1, Georgia, serif |
Impact, Impact5, Charcoal6, sans-serif | Impact, Impact5, Charcoal6, sans-serif |
Lucida Console, Monaco5, monospace | Lucida Console, Monaco5, monospace |
Lucida Sans Unicode, Lucida Grande, sans-serif | Lucida Sans Unicode, Lucida Grande, sans-serif |
Palatino Linotype, Book Antiqua3, Palatino6, serif | Palatino Linotype, Book Antiqua3, Palatino6, serif |
Tahoma, Geneva, sans-serif | Tahoma, Geneva, sans-serif |
Times New Roman, Times, serif | Times New Roman, Times, serif |
Trebuchet MS1, Helvetica, sans-serif | Trebuchet MS1, Helvetica, sans-serif |
Verdana, Verdana, Geneva, sans-serif | Verdana, Verdana, Geneva, sans-serif |
Symbol, Symbol (Symbol2, Symbol2) | Symbol, Symbol (Symbol2, Symbol2) |
Webdings, Webdings (Webdings2, Webdings2) | Webdings, Webdings (Webdings2, Webdings2) |
Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) | Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) |
MS Sans Serif4, Geneva, sans-serif | MS Sans Serif4, Geneva, sans-serif |
MS Serif4, New York6, serif | MS Serif4, New York6, serif |
1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.
2 Symbolic fonts are only displayed in old Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).
3 Book Antiqua is almost exactly the same font as Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.
4 These fonts are not TrueType fonts but bitmap fonts, so they won’t look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).
5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seem to emulate properly the styles not provided by the font (thanks to Christian Fecteau for the tip).
6 These fonts are present in Mac OS X only if Classic is installed.
Note that while the ClearType smoothing is applied always, the basic font smoothing of Windows 98/2000/XP is applied only to certain font sizes. That sizes can be specified by the font designer, but usually, they are in the ranges of 0-6 and 14+ points (pt).
A Quick Guide To Different Fonts And Their Uses
When to Use Each Font Type and When Not; there are various types of Fonts; most types of fonts were influenced by history.
What are fonts?
A font is an instrument used to produce text. Their size, their weight can define fonts, and the letter spacing used. This is only a brief introduction to the world of fonts. We will give you a detailed step by step guide to understanding what fonts are, which fonts are used, what typefaces are available, and the individual or word face used with each typeface. Read on to learn more about the different types of fonts, what font family makes each font and what font type they are. What are fonts? Fonts are unique or different font letter pairs that can make up words or letters on your screen or print screen. So, a font is a type of character (such as a font) that is a single character built on an image (such as a block of type).
Serif fonts
The serif is considered the oldest style of typography which the most versatile style of type, is why it is used in every type of font,, including letters. These types of fonts can either be two or three kinds. There are those type of fonts that could be made with only one. Those type of fonts which has shading or design on it are also known as sans serif. Sans serif fonts have sharp lines, and simple shapes and never mix dark and light ones. These fonts can be found on the top menu of the desktop of the computer. Serif fonts The serif is also the oldest style of typography with a more rounded form, also known as the old style of typography. These are the most common fonts which you would see.
Sans-serif fonts
The concept of a sans-serif is to make the text more readable by removing extra detail, either characters or spacing. It was influenced by the Fraktur typeface, which was used in Germany before World War II. Serif fonts are typically used in longer texts that you would want to make more easily recognizable. There are tons of styles and types of serif fonts. Most serif fonts are black and white. Tahoma font is a common serif font that comes with bold, italic and grey fonts, and this was inspired by the old-style typewriters. Slab serif fonts have large details and the overall style is block-like.
Script fonts
Script fonts usually have straight letters and for this type of font, you can do a lot of things in most font sizes and styles. If you are looking for a few fonts to use for your project, Script type fonts are the way to go. These fonts are not readily available in the font store like other types of fonts, but you can get them from google. Also Known As Indirect Comic Script, Latin Extended Older Script fonts Script type fonts originally came from Latin, and now the script fonts are adapted for other languages. The oldest script type fonts still in use today are Hebrew and Spanish. Older Script fonts have more elaborate stroke lines, and the letters come together more to create a more unified look.
Display fonts
These are the type of fonts you would be most used to seeing in text or a header for a website. They are usually drawn in real fonts and don’t have any special treatment to them. Typewriter fonts are what is called serif fonts because they are serifs. They have thin vertical lines and look like they were designed by hand. However, they were actually created using a typeface designer’s computer. They usually have big weight and they generally look best on letters and numbers. Typewriter fonts are traditionally used in business and legal documents and books. Old Style Fonts A typeface that looks a bit like what the early 1800s inspired. The Old Style Fonts as a group have deep lines and small, narrow borders.
Conclusion
To get a more detailed understanding of each type of font, it’s important to learn a little bit about each type and understand when to use each type font. At a basic level, there are five types of font, each of which is represented by a letter. There are over 100 font families in the Adobe software, and a font type may have 2 to 3 font families. If you want to learn more about the fonts themselves, you can visit the Adobe Type Studio website.