1 / 7

Web Fonts

Web Fonts. Choosing Fonts for a Website:. Only those fonts that are installed on our viewers' computers will display properly on our web pages. For this reason, we are limited to a handful of so-called "web-safe fonts", i.e. those fonts that are installed on nearly all computers.

orpah
Download Presentation

Web Fonts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Fonts

  2. Choosing Fonts for a Website: • Only those fonts that are installed on our viewers' computers will display properly on our web pages. • For this reason, we are limited to a handful of so-called "web-safe fonts", i.e. those fonts that are installed on nearly all computers. • Whichever font we choose as primary, we should provide one or more "backup" fonts for the browser to use in case the main one is not available.

  3. Web-safe Fonts: Sans-serif fonts: Arial Arial Black Century Gothic Comic Sans MS Lucida Sans Unicode Tahoma Trebuchet MS Verdana Serif fonts: Book Antiqua Courier New Georgia Palatino Linotype Times New Roman s A serif is the extra fluorish at the ends of letters. Serifs are intended to enhance readability, especially in physical print media, such as newspapers and magazines. A "sans-serif" font is one that does not contain serifs on its characters. These fonts are generally preferred for web pages.

  4. Specifying Fonts and Fallbacks: <head> <style type="text/css"> p { font-family:Tahoma, Arial, sans-serif; } </style> </head> <body> <p>This is my first paragraph.</p> </body> We should specify more than one font. If the first one listed is not available, the browser will choose the next in the list. This is my first paragraph. Try to choose similar fonts as fallbacks, so your page will look consistent even if the primary font is unavailable. This is my first paragraph. Always list serif or sans-serif as the final entry in your list. This is the "ultimate" fallback font.

  5. CSS Font Syntax: <head> <style type="text/css"> p { font-family:"Palatino Linotype", "Book Antiqua", serif; } </style> </head> <body> <p>This is my first paragraph.</p> </body> This is my first paragraph. If a font name has a space in it, you must enclose it in quotation marks. This is my first paragraph.

  6. The Importance of Fonts: • Your choice of font has a noticeable effect on the "look and feel" of your website. • Experiment using various fonts and font sizes to find those that best suit your tastes. • Visit websites in which you find the text visually appealing. View the page source to see which fonts they are using. • As a general web design rule, it is best not to use more than two different fonts on a single web page.

  7. Using Unusual Fonts: • It can be OK to name a relatively exotic font in your font-family declaration, as long as you have a fallback font that renders acceptably on the page. • For limited one-time uses of unusual fonts - such as titles, headings, and navigation - many web designers create images containing the text and place those images on the page instead. • The future of fonts is encouraging to web designers: most of the newest browsers allow us to load fonts directly from the web and do not rely on the font being installed on the local computer!

More Related