SCHOOLOFDESIGNANDVISUA LART Typography with CSS Text Properties, Readability & Web Fonts.

Slides:

Advertisements

Similar presentations

Session Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances.

Advertisements

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.

Week 7 Web Typography. 2 Understanding Type Design Principles.

Web Development & Design Foundations with HTML5

Technologies for web publishing Ing. Václav Freylich Lecture 6.

Typography Basic terminology/concepts

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.

Chapter 10: TypographyCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.

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.

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

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

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10. Typography In this chapter you will learn about: The basic terminology and concepts of working.

TYPOGRAPHY vasuki belavadi reader dept. of communication s n school university of hyderabad.

TYPOGRAPHY BASICS Technical Foundations II. Typography Basics  Baseline Apple.

Typography. What message do these fonts convey?  Jokerman  Old English Text  Brush Script  Curlz  Edwardian Script.

Principles of Visual Design 2720 Principles of Visual Design LCC 2720 Instructor: Brian Schrank Intro to Typography.

1.01A – What typefaces should be used for various displays?????

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.

TYPOGRAPHY Jessica Chang. Times New Roman Georgia Baskerville Garamond  Respectable  Reliable  Traditional  Impressive  Authoritative Popular serif.

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.

Lecture 3: Typography, layout, and design..  What we’ll be designing.  Layout  Navigation  Content on a grid.  Examples of how sites are commonly.

10. Typography The basic terminology & concepts of working with type

Typography 2.01 Investigate typefaces and fonts..

Typeface Basics 1. Glossary 1 Ascenders: Ascenders: Strokes of letters that rise above the mean line of type (b, d, f, h, k, l, t). Descenders: Descenders:

Visual Rhetoric: Headers and Typography Professor Stevens Amidon Department of English and Linguistics, IPFW.

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

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

Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:

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

Typography All types of t y pe Typography Defined The design, arrangement, style and appearance of type matter constitute typography.

Typography The Art of designing with words and letters.

Class three: CSS review, backgrounds, font formatting, the box model.

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.

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.

Powerpoint Presentation Pointers

TIPS FOR POWERPOINT PRESENTATIONS

Typograpy. Type Type - Categories Serif Fonts  Oldstyle  Transitional  Modern  Slab Serif Sans Serif Fonts Script Decorative Monospaced.

Typographic History & Classification

Visuals Lenka Zouhar Ludvíková. printed visuals – serif fonts Baskerville Old Face Batang Bodoni MT Bookman Old Style Century Schoolbook Garamond Modern.

Graphic Communications Chapter 4.  Distinctive designs of visual symbols that are used to compose a printed page.  Ie: Magneto, Times New Roman, Baskerville,

Typography Classifying Typefaces. Typeface Classification - Serif, Sans and Script Type can be classified into 3 broad categories: SERIF, SANS SERIF and.

Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall.

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,

TYPOGRAPHY. Typography  Typography is the art of creating and setting type with the purpose of honoring the text it sets.  Typography exists  to honor.

C a t e g o r i e s of T y p e. Oldstyle Diagonal Stress Serifs on lowercase letters are slanted Moderate thick/thin transition in the stroke Examples.

Microsoft Word 2000 Formatting Characters and Paragraphs.

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

Typography. The Target Audience Publications are created to convey a message to the intended audience, called the target audience. The target audience.

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)

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

Changing Font After the background, the font is one of the first things people sees.

Principles of Design If you can memorize the following four principles you have what it takes to be a good designer. You can create layouts that are visually.

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents Dr. Irwan Sembiring,ST.,M.Kom.

ATLAS WEB Web Typography.

Microsoft Word - Formatting Pages

Typography Basics 2.01 Investigate typefaces and fonts.

2.01 Investigate typefaces and fonts.

Typography The Art of designing with words and letters.

2.01 Investigate typefaces and fonts.

TIPS FOR POWERPOINT PRESENTATIONS

ATLAS WEB Web Typography.

Presentation transcript:

SCHOOLOFDESIGNANDVISUA LART Typography with CSS Text Properties, Readability & Web Fonts

SCHOOLOFDESIGNANDVISUA LART Clearing the Decks CSS Normalization & Reset

SCHOOLOFDESIGNANDVISUA LART CSS Normalization & Reset Eric Meyer’s “Reset CSS” Yahoo! (YUI 3) Reset CSS Normalize.css

SCHOOLOFDESIGNANDVISUA LART Web-Safer Fonts and Font Embedding Typeface Options

SCHOOLOFDESIGNANDVISUA LART Web Safe(r) Fonts Sans-SerifSerifMonospacedFantasyScript Arial Arial Black Arial Narrow Arial Rounded MT Bold Avant Garde Calibri Candara Century Gothic Franklin Gothic Medium Futura Geneva Gill Sans Helvetica Impact Lucida Grande Optima Segoe UI Tahoma Trebuchet MS Verdana Baskerville Big Caslon Bodoni MT Book Antiqua Calisto MT Cambria Didot Garamond Georgia Goudy Old Style Hoefler Text Lucida Bright Palatino Perpetua Rockwell Rockwell Extra Bold Times New Roman Andale Mono Consolas Courier New Lucida Console Lucida Sans Typewriter Monaco Copperplate Papyrus Brush Script MT

SCHOOLOFDESIGNANDVISUA LART Font { [font-family: ;]? [src: [ [format( #)]? | ]#;]? [unicode-range: #;]? [font-variant: ;]? [font-feature-settings: normal| #;]? [font-stretch: ;]? [font-weight: ]; [font-style: ]; }

SCHOOLOFDESIGNANDVISUA LART Communicating Relative Importance Visual Hierarchy

SCHOOLOFDESIGNANDVISUA LART Use a Typographic Scale

SCHOOLOFDESIGNANDVISUA LART Use a Typographic Scale h1 {font-size: 48px;}h2 {font-size: 36px;}h3 {font-size: 24px;}h4 {font-size: 21px;}h5 {font-size: 18px;}h6 {font- size: 16px;}p {font-size: 14px;}

SCHOOLOFDESIGNANDVISUA LART Contrast

SCHOOLOFDESIGNANDVISUA LART Provide Adequate Contrast An example of insufficient contrast resulting in poor readability An example of sufficient contrast resulting in good readability

SCHOOLOFDESIGNANDVISUA LART Leading

SCHOOLOFDESIGNANDVISUA LART Leading

SCHOOLOFDESIGNANDVISUA LART Leading body {font-family: Helvetica, sans-serif;font-size: 12px;line-height: 15px;}p {margin-bottom: 15px;}

SCHOOLOFDESIGNANDVISUA LART Tracking

SCHOOLOFDESIGNANDVISUA LART Tracking

SCHOOLOFDESIGNANDVISUA LART Tracking letter-spacing: 0.2em;

SCHOOLOFDESIGNANDVISUA LART Measure

SCHOOLOFDESIGNANDVISUA LART Measure

SCHOOLOFDESIGNANDVISUA LART Margins, Gutters, & Indentation Whitespace

SCHOOLOFDESIGNANDVISUA LART Whitespace

SCHOOLOFDESIGNANDVISUA LART Justification

SCHOOLOFDESIGNANDVISUA LART Justification

SCHOOLOFDESIGNANDVISUA LART Let’s give it a try…