CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts.

Slides:

Advertisements

Similar presentations

Font Families What are they and why do I need them?

Advertisements

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:

Web Development & Design Foundations with HTML5

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.

CSS Demo. Questions How many of you –knows how to code html? –have used dreamweaver or some other graphical html editor? –have used css styles?

SM5312 week 2: web design1 Web Typography Nick Foxall.

Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang

WEB PAGES: CREATING AND MAINTAINING ** Tom Keane & Mayis SeapanInstructors: HTML Tags to format your text.

© 2007 D. J. Foreman CSS-1 Cascading Style Sheets Styles.

CSS The Definitive Guide Chapter 5.  You will understand why setting font properties will be among the most common uses of style sheets.  Font family.

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.

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.

Fonts Desktop Publishing. How many words can you read per minute? 250 to 300 words per minute.

Typography 2.01 Investigate typefaces and fonts..

Chapter 7 Web Typography Principles of Web Design, 4 th Edition.

Principles of Web Design 6 th Edition Chapter 5 – Web Typography.

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.

Typography.  Introduction to Typography  Font Collections ▪ Serif ▪ They have small strokes at the end of the character strokes ▪ Ex: Times New Roman,

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.

Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.

Using Cascading Style Sheet As you create more web pages, you may wish to impose a consistent look for all of your web pages or for group of related pages.

Introduction to Programming the WWW I CMSC Winter 2003 Lecture 3.

Cascading Style Sheets Tom Osman. Keep the content of a webpage separate from the formatting of the page. Structure (of content)  Headings  Sub headings.

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.

Cascading Style Sheets Class 2, Lecture 2 Rachel A Ober

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.

CSS Cascading Style Sheets. CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate.

Typography (Fonts). Type type = any set of printed characters font = a set of printable or displayable characters with a specific style and size typeface.

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!

Basics of Web Design Chapter 6 More CSS Basics Key Concepts.

Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS.

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.

Microsoft Expression Web-Illustrated Unit F: Enhancing a Design with CSS.

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,

CSS Fonts. The Font properties allow you to change the font family, boldness, size, and the style of a text.

Intro to CSS Christy. What is CSS?  Cascading Style Sheets  Separates content from presentation  Defines how to display HTML elements  Provides control.

Typography Vocabulary and Guidelines This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory.

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)

WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.

Font:  Text of a certain design, available in hundreds of varieties.  Called typeface. Style:  The way a font looks: Bold, Italic, regular Points: 

Font-Family, Color and Background. Basics  CSS rule: Selector (multiple separated by, ) Declaration (multiple separated by ; ) Example: p { color: red;

PDF is the preferred format for poster printing. For Power Point 2007 for Windows: Click the Microsoft Office button, point to the arrow next to Save As,

MOAC Lesson 3.  From the HOME TAB you can change the capitalization of text using the change case icon in the font group.  Select the text, Home Tab,

The Internet 10/11/11 Fonts and Colors

CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr

2.01 Investigate typefaces and fonts.

POWERPOINT GUIDELINES

2.01 Investigate typefaces and fonts.

The Internet 10/13/11 The Box Model

السيرة الذاتية Now you are ready to begin. But you will need a resume.

Typography is the strategic use of type to create texture, hierarchy, organization, and clear communication.

Poster Title Authors Addresses

Poster Title Authors Addresses

Lesson 5 – Controlling fonts with CSS

Creating your own Styles

POWERPOINT GUIDELINES

POWERPOINT GUIDELINES

Session IV Chapter 15 - How Work with Fonts and Printing

POWERPOINT GUIDELINES

PowerPoint Presentations

Presentation transcript:

CSS FONT STACKS

What are font stacks?

Font stacks are about creating a relevant and comprehensive list of fall-back fonts.

Font stacks should take into account aspect ratio, platforms, operating systems etc.

A bad example

body { font-family: Verdana, Arial, sans-serif; } What’s wrong here?

Problem 1: There are a limited number of fallback fonts.

Problem 2: The fonts used may not be available for all operating systems (eg. Windows, Mac, Linux).

Problem 3: The fonts used have different “aspect ratios”

What is aspect ratio?

Some fonts, especially those specifically designed for screen, may appear wider and/or taller than other fonts.

This means that these fonts have a larger aspect ratio.

If you use fonts with different aspect ratio, some people may see your pages with a much smaller font size than others. body { font-family: Verdana, Arial, sans-serif; } Larger aspect ratio Smaller aspect ratio

Ideally, your font stacks should include a range of fonts that have a similar aspect ratio.

The basic font stacks based on aspect ratio

Wide sans-serif stack eg: Verdana Geneva

Narrow sans-serif stack eg: Tahoma Arial Helvetica

Wide serif stack eg: Georgia Utopia

Narrow serif stack eg: Times Times New Roman

Monospace stack eg: Courier Courier New

Some steps to creating a good font stack

1. Pick the font you like eg. Helvetica Neue

2. Determine which basic font-stack it belongs in eg. Narrow sans-serif

3. Choose a preferred Linux variation and a highly available variation eg. DejaVu Sans % availability on Linux URW Gothic L % availability on Linux

4. Choose a preferred Macintosh variation and highly available variation eg. Helvetica Neue % availability on Mac, Helvetica % availability on Mac

5. Choose a preferred Windows variation and a highly available variation eg. Arial % availability on Win, Microsoft Sans-serif % availability on Win

6. Include the generic font family eg. sans-serif

7. Make sure fonts with white-space in names are wrapped in single or double quotes. (eg. “Microsoft Sans-serif”)

body { font-family: "DejaVu Sans", "URW Gothic L", "Helvetica Neue”, Helvetica, Arial, "Microsoft Sans Serif", sans-serif; } A better font stack?

Results Font name DejaVu Sans URW Gothic L Helvetica Neue Helvetica Arial Microsoft Sans Serif sans-serif Windows 0.00% 1.51% 7.08% 90.79% 0.62% 0.00% Mac 0.00% 95.11% 4.89% 0.00% Linux 90.76% 8.98% 0.00% 0.07% 0.13% 0.00% 0.06%

A great font-stack builder Font stack

Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley