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.

Slides:



Advertisements
Similar presentations
WEB PAGES: CREATING AND MAINTAINING ** Frank Romanelli Instructor: Wednesday: 10:15 -11:15 Week 3.
Advertisements

Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.
1 Tips You Need to Know. 2 In designing presentations…  Observe  Consistency, simplicity, neatness  present explanations  (if possible) using words.
More Information on Graphic Design & Color: A few pointers for your websites & other e- publications Dr. Jennifer Bowie.
Font Families What are they and why do I need them?
Session 2—Chapter 3 Visual Literacy Learn to See, See to Learn.
 CSS Presentation and layout is based on the CSS Box Model.  The CSS Box Model states that every element on a page is a rectangular box.  This includes:
Week 7 Web Typography. 2 Understanding Type Design Principles.
1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties.
The Use of Typography in Print and Electronically. [typography] “exists to honour content” Robert Bringhurst, The Elements of Typographical Style.
SM5312 week 2: web design1 Web Typography Nick Foxall.
WEB PAGES: CREATING AND MAINTAINING ** Tom Keane & Mayis SeapanInstructors: HTML Tags to format your text.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
TYPOGRAPHY vasuki belavadi reader dept. of communication s n school university of hyderabad.
1.01A – What typefaces should be used for various displays?????
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
Font Families By: Jonathan Bird. What is a font? First, what is a font? A font is a grouping of the same type and style of characters, often in the same.
Web Design – Sec 4-6 and 4-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
 Layout – refers to the design and orderly formation of the various elements of an advertisement.  It is where & how you place the various elements.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
Typography 2.01 Investigate typefaces and fonts..
Chapter 2 TEXT.
Typography Concepts Typeface Anatomy Typeface Categories –Text –Display –Decorative Emphasis Strategies Point size/ Measure/ Leading.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Font Families by Anthony Asay. Font Family ●Font family or font face is the typeface that is applied to the text by a web browser. ●There are a lot of.
Web Typography Serif and sans serif fonts  Serifs are the tails on the letters  Serif leads the eye from letter to letter  At large font sizes, the.
INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.
CSS Font CSS font properties define the font family, boldness, size, and the style of a text. CSS Font Families Generic family Font familyDescription Serif.
Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,
Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.
FONTS serif or sans serif ?. Times New Roman is a serif font Ariel is a sans serif font.
Prioritizing Web Usability Nielsen and Loranger Chapter 7: Typography: Readability and Legibility Paul Ammann SWE 432 Design.
Files you will need ... Black Goose Bistro Summer Menu
Fonts The following CSS properties will be described: 1.Font-family 2.Font-style 3.Font-variant 4.Font-weight 5.Font-size 6.Font.
FOR WHEN YOU REALLY WANT TO BE THE LIFE OF THE PARTY FONTS!
30 March 2005 Integrating PowerPoint into your Talk.
Fonts and Typography Section 7.3. Typography Typography: the style, arrangement, and appearance of text Well designed text makes your page more readable.
Prese ntation Tips Arial Calibri Century Gothic Franklin Gothic Impact Verdana Trebuchet Lucida Sans Tahoma.
Web Site Design: Layout Fall Basic Concepts Basic Web Design Concepts – Proximity – Alignment – Repetition – Contrast
Advanced Web Development Instructor: Thomas Bombach.
Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS.
Typography Graphic Design Fundamentals
XHTML Formatting font with a style declaration. Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated.
Web Colors and Fonts.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Planning and Design.
Fonts. Choosing Fonts How text looks on our web pages is a major component of the overall appearance of our site. We need to choose our text fonts carefully,
1 2/21/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Lists, Fonts, Links, and Preformatted Text.
CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts.
Font Type (and S i z e ) Matters …especially for ‘distance’ viewing Serif vs. non-serif (aka…sans serif) TECHNICAL COMMUNICATONS Spring Althoff.
Assignment Compose a black and white design using the grid system. Your design will include: 2. Two or more photographs One straight photo. One using transparency.
Fonts Sampler Pick your favourite fonts  As you look at these slides of fonts: –try adjusting the zoom to make the text smaller (or use the slide sorter)
Writing Accessible Electronic Documents with Microsoft® PowerPoint
Changing Font After the background, the font is one of the first things people sees.
FONT EXAMPLES Computer Applications. Serif Fonts Serif fonts have small marks called “serifs” on the tops and bottoms of letters. They may be decorative.
SCHOOLOFDESIGNANDVISUA LART Typography with CSS Text Properties, Readability & Web Fonts.
Tips for Effective PowerPoint Presentations
Fonts.
Understanding and Applying Typography in CSS
Cascading Style Sheets Color and Font Properties
Microsoft Word - Formatting Pages
Applying Typography in CSS
Understanding and Applying Typography in CSS
2.01 Investigate typefaces and fonts.
2.01 Investigate typefaces and fonts.
Fonts.
Lesson 5 – Controlling fonts with CSS
Session IV Chapter 15 - How Work with Fonts and Printing
Presentation transcript:

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. 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.

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 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. s A "sans-serif" font is one that does not contain serifs on its characters. These fonts are generally preferred for web pages.

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

CSS Font Syntax: p { font-family:"Palatino Linotype", "Book Antiqua", serif; } This is my first paragraph. This is my first paragraph. If a font name has a space in it, you must enclose it in quotation marks.

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.

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!