Exploring Web Design Chapter 3 Web Typography. The goal of any web page is to communicate.

Slides:

Advertisements

Similar presentations

HI-TECH VISUAL AIDS B. Power Point. POWER POINT Over 90% of all professional speakers use PPT. But A careless PowerPoint Confusing or distracting.

Advertisements

Typography. Base line Base line The imaginary line on which all characters rest.

Typography Selecting appropriate typefaces for a document. Typography.

The art or process of printing with type Typography.

Typography Typogra Typography Typogra. Designers use typography to communicate a client's message to an audience. They explore the creative possibilities.

Typography the art of using (text) fonts and font styles to produce professional looking publications the art of using (text) fonts and font styles to.

Typography Usability & Readability

Typography Basic terminology/concepts

Chapter Concepts Discuss Fonts Understand Fonts

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

SM5312 week 2: web design1 Web Typography Nick Foxall.

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

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

1.01 Investigate typefaces and fonts.

 Font is also commonly called type or text › They all mean the same thing You can say font face or type face but they mean the same thing.

Categories TYPE of Text is the most essential ingredient in design communication. With type you communicate in two distinct ways. The first message your.

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.

Typography Conveys mood Communicates attitude. The Letters X-height –the height of the main body of a lower case letter (literally, the x) x j Cap height.

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

Chapter 9 Text. So, chapter 10 is about Photography, now Chapter 9 is about text What should it look like, how big should it be, how do colors contrast,

Print Medium. Advantages & Limitations Typography Readability Layout.

Introduction to Type in Graphic Design AEE 210 Jim Lucas Modified by Luke Reese.

Typography Terms. o.php?viewkey=d26eb03e91d5741a4a 3b.

Fonts! Week 3 – Intro to Desktop Publishing. Typography Definition: The study of type and its characteristics Type does many things – Conveys the message.

All of the following terms describe parts of a font that give the eye visual clues to decoding the letters while reading. Many of these terms stem from.

Typography: Basics. Type Basics Typography: The design of letterforms and the arrangement of them in two-dimensional space. Type font: A complete set.

Typography The Art of designing with words and letters.

The art of using text to produce professional looking publications.

Six Principles of Good Design

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.

DTP Word 2002 Chapter 2 Preparing Internal Documents.

Design Tips for PowerPoint Projects for Ms. Birtcher’s Classes.

$1 Million $500,000 $250,000 $125,000 $64,000 $32,000 $16,000 $8,000 $4,000 $2,000 $1,000 $500 $300 $200 $100 Welcome.

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

Adobe Photoshop CS Design Professional AN IMAGE PLACING TYPE IN.

Universal Design for Learning & Principles of Web Design C. Candace Chou.

Desktop Publishing Review. What is a rough sketch used in planning a layout and design?

Typography Graphic Design Fundamentals

Graphic Design  Graphic Design is a form of visual communication.  Communicate a message  Using typography and graphic elements.

Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall.

The art of using text to produce professional looking publications.

So many fonts, so much choice. More than 1000 fonts Just as an author struggles to find the right words, the graphic designer struggles to find the right.

Desktop Publishing & Design. Baseline The invisible grid line the characters sit on.

UNIT 4 - TYPOGRAPHY Digital Communications I. 3-D  an effect that gives the illusion of depth.

Color Aesthetics Weinman, chapter 2 Terms, color themes and relationships, type, layout Aesthetics a guiding principle in matters of artistic beauty and.

What are we interested in? 1. Understand Design 0 2. Digital Image design 3 3. Time-based media Webpage design 2 1.

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.

Words are communication. What do they say? The meaning should come before the look of the type is considered. Choose typographic styles and sizes that.

FontSFontSFontSFontS aka Typography. Font Parts Lets break fonts down by their parts!

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.

Design and Typography Chapter Designing a Publication Designing is the process of determining the format and layout, then creating Format: how and.

Chapter 7 Working with Type. Goals Practice the three methods of creating type in Illustrator: - Type at a point, type in an area, and type on a path.

Understanding and Applying Typography in CSS

Typography Usability & Readability

The art of using text to produce professional looking publications.

Web Development & Design Foundations with HTML5 8th Edition

Basic Desktop Terminology

Applying Typography in CSS

Understanding and Applying Typography in CSS

Unit 2.1: Identifying design elements when preparing graphics

Layout Terms Visual Hierarchy

The Art of Type 9/17/2018.

Table CSS Create a new CSS called tablestyle.CSS Green Background

Source: Digital Desktop Publishing--Font Basics

Desktop Publishing Terminology

Tutorial 3 Working with Cascading Style Sheets

Typography Usability & Readability

Typography Usability & Readability

Layout Terms Visual Hierarchy

Presentation transcript:

Exploring Web Design Chapter 3 Web Typography

The goal of any web page is to communicate.

What is Typography? Typography is the manipulation of text on the page. Through typography we can better convey that which we are trying to communicate.

Why is Typography Important? Font refers to the style of printing letters, numbers and characters. Choice of font, in addition to color, helps set the tone of a page. –Is the site friendly, fun or cool (1) (2) (3)?fun123 –Is the site professional, radical or edgy? –Is the site dark, grungy or gothic?grungygothic

Ten Basic Fonts

Font Choices (1) Viewers only see the fonts they have installed on their machines. If you use a font they don’t have, the font reverts to one they have. This means THEY WON’T SEE YOUR COOL FONT!! Ex: You see this: They see this: AGENT ORANGE

Font Choices (2) Dark Grey on Black Background Avoid these for the color blind: –Yellow on green –Green on red –Red on green –Blue on red –Red on blue –Red on black Tactics: use a contrasting outline around text

Font Choices (3) Make use of size and contrast The goal (most often) is readability Don’t make your page a chore to read

Typography Terminology Font: refers to styles of text Arial Times New Roman

Typography Terminology (2) Font Family: groups or variations of a single style of font. Also called styles.

Typography Terminology (3) X-Height: the height of a lowercase x. –Sets the standard height for lowercase letters.

Typography Terminology (4) Baseline: the line that the base, or the bottom, of the letters are aligned to.

Typography Terminology (5) Baseline shift: setting your text below the baseline.

Typography Terminology (6) Ascender: parts of the font that extend above the x-height line.

Typography Terminology (7) Leading: the vertical space between two lines of type.

Typography Terminology (8) Kerning: the spacing between individual letters.

Typography Terminology (9) Tracking: the spacing between all letters.

Typography Terminology (10) Scale: changes the height / width of text

Typography Terminology (11) Serif: those little tails and hooks!! I call them “fonts with feet!”

Typography Terminology (12) Sans Serif: sans = without. Therefore, these are fonts without feet (serif strokes). Sans Serif

Yeah, so what!?! HTML / XHTML does not allow you to set: –Kerning –Tracking –Scaling –Leading –Font relative to baseline So why do you need to know these terms?

Why Know Typography? You can apply these concepts to graphics. You can also apply shadows, glows, bevels, etc. You can use Cascading Style Sheets (CSS) to set baseline, leading and tracking as well as set the spacing between words.