Week 12 CSS Font - family
•Download as PPTX, PDF•
1 like•1,588 views
This document discusses CSS fonts and font families. It covers: 1) There are generic and specific font families, with examples like Serif, Sans-Serif, Times New Roman, Arial. 2) For web accessibility, fonts should be simple, high-contrast, avoid small sizes and all caps. Standard fonts like Arial, Verdana are best. 3) Fonts like Verdana designed for screens and have good legibility, while Arial is also common but characters can be confused. Font stacks provide alternatives if the first isn't available.
Report
Share
Related slideshows
Week 12 CSS Font - family
- 1. WEEK 12 CSS FONTS: FAMILY
- 2. FONTS In CSS, there are two types of font family names: Generic family • a group of font families with a similar look (like "Serif" or "Monospace") Font family • a specific font family (like "Times New Roman" or "Arial")
- 3. FONTS Generic Family Font Family Description Serif Times New Roman Georgia Serif fonts have small lines at the ends on some characters Sans-serif Arial Verdana "Sans" means without - these fonts do not have the lines at the ends of characters
- 4. FONTS • Examples of serif fonts include Times New Roman, Georgia, and Book Antiqua: • Sans-serif fonts include Arial, Tahoma, Trebuchet MS, and Verdana:
- 5. FONT FOR THE WEB In terms of font accessibility, keep these principles in mind: 1. Use real text rather than text within graphics 2. Select basic, simple, easily-readable fonts 3. Use a limited number of fonts 4. Ensure sufficient contrast between the text and the background 5. Avoid small font sizes 6. Use relative units for font size 7. Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS 8. Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning, for examples links 9. Avoid blinking or moving text
- 6. FONT FOR THE WEB On computer screens, sans-serif fonts are considered easier to read than serif fonts How to specify fonts for your text: • Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. • If the browser does not support the first font, it tries the next font body { font-family: Helvetica, Arial, sans-serif; }
- 7. WHAT FONTS CAN I CHOOSE? There are thousands of fonts that could potentially be used on a web site… • However, a font can only be displayed on if it is loaded on a computer • Many fonts are natively available in modern operating systems, these are “safe” to use and include: • Arial • Georgia • Courier New • Tahoma • Times New Roman • Trebuchet MS • Verdana • It is generally best to use standard fonts that are available on the end users device.
- 8. WHAT’S THE BEST FONT TO CHOOSE? • Verdana, Tahoma, Trebuchet MS, and Georgia, were developed specifically for use in electronic media For example: • Verdana is one of the most popular fonts designed for on-screen viewing • Verdana has a simple, straightforward design Compared to Arial, another common web font: • The characters are not easily confused • Verdana has more spacing between letters and is larger
- 9. WHAT FONTS CAN I CHOOSE? body { font-family: Helvetica, Arial, sans-serif; } • In this case, if the computer didn’t have Helvetica it would choose Arial, if it didn’t have Arial then it would choose a general serif font that it did have, eg. Verdana
- 10. TRY IT OUT! Check the link in Week 12 to W3C schools and try the following serif and san-serif fonts: