Creating the Pages Part Four Typography. Type Design Principles Choose fewer fonts and sizes Choose fewer fonts and sizes Choose available fonts Choose.

Slides:



Advertisements
Similar presentations
Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.
Advertisements

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2: Planning.
XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.
Chapter 6 Web Typography
Week 7 Web Typography. 2 Understanding Type Design Principles.
Chapter Concepts Discuss Fonts Understand Fonts
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Chapter 1 Understanding the Web Design Environment
Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.
Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
CHAPTER 8: Enhancing a Website Session 1. Objectives Embed a YouTube video in your website Insert a slideshow in your website Use Google fonts in your.
Basics of HTML.
Chapter 1 Variables in the Web Design Environment.
Chapter 1 Variables in the Web Design Environment
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Principles of Web Design 6 th Edition Chapter 5 – Web Typography.
Week 2 Web Site Design Principles. 2 Design for the Computer Medium Craft the look and feel Make your design portable Design for low bandwidth Plan for.
Web Design: HTML & CSS Lauren Lewis Mauricio Gomez.
Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand.
Styles with Cascading Style Sheets (CSS) Web Design – Section 4-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design.
Chapter 2 Web Site Design Principles
Lesson 13 – Color and Typography. 2 Objectives Discuss basic color theory. Understand the color wheel. Understand how color is presented on a computer.
Web Site Design Principles
The Internet and the World Wide Web. The Internet A Network is a collection of computers and devices that are connected together. The Internet is a worldwide.
Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.
Objectives: 1. Create a Skeleton HTML 2. View a Skeleton File Through a Server and Browser 3. Learn HTML Body Tags for the Display of Text and Graphics.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
Microsoft FrontPage 2003 Illustrated Complete Using a Dynamic Web Template.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Bad/Good Power Point slides
ECA 228 Internet/Intranet Design I Intro to Markup.
Microsoft Expression Web-Illustrated Unit M: Advanced Typography Using CSS.
MTA EXAM HTML5 Application Development Fundamentals.
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
Colors & Fonts Building a Website Lesson 7. Font Font The tag specifies the font face, font size, and color of text. The tag can have any or all of these.
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
Tutorial 3 Adding and Formatting Text with CSS Styles.
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.
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.
Cascading Style Sheets
+ Web Design Terminology Digital Communications III- Frameworks-2.1 Terminology HTML Domain Name Hot Spot Site Maps.
A Presentation on Presentation Design. Presentation Basics To create your presentation: Research your content Identify your audience Choose a design Write.
INTRODUCTION TO HTML5 New HTML5 User Interface and Attributes.
External Style Sheets Exploring Computer Science – Lesson 3-6.
WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.
Typography A Key Element in Design A. Definition of Typography Typography is the appearance and arrangement of the characters that make up text on a page.
Lesson 13 – Color and Typography. 2 Objectives Understand basic color theory. Understand the color wheel. Understand how color is presented on a computer.
Microsoft Expression Web 3 – Illustrated Unit M: Advanced Typography Using CSS.
Pre-Production Meet with the client to create a project plan:
HTML5 and CSS3 Illustrated Unit D: Formatting Text with CSS
3D MAN– HOUSE.
Styles with Cascading Style Sheets (CSS)
Web Page Development Tools
what is good typography?
Web Page Development Tools
Web Design and Development
Chapter 7 Web Typography
Presentation transcript:

Creating the Pages Part Four Typography

Type Design Principles Choose fewer fonts and sizes Choose fewer fonts and sizes Choose available fonts Choose available fonts Design for legibility Design for legibility Avoid using text as graphics Avoid using text as graphics

Using the Element Use to set font size and color and to specify font substitution Use to set font size and color and to specify font substitution With HTML 4.0, the tag has been deprecated in favor of CSS. To ensure forward compatibility, you should consider moving to CSS, and limit or replace the element in your code. With HTML 4.0, the tag has been deprecated in favor of CSS. To ensure forward compatibility, you should consider moving to CSS, and limit or replace the element in your code.

Type Summary Use type to communicate information structure. Be sparing with your type choices, and use fonts consistently. Use type to communicate information structure. Be sparing with your type choices, and use fonts consistently. Remember that HTML text downloads faster than graphics-based text. Use HTML text whenever possible. Remember that HTML text downloads faster than graphics-based text. Use HTML text whenever possible. Use browser-safe fonts that will display as consistently as possible across operating systems Use browser-safe fonts that will display as consistently as possible across operating systems