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.

Slides:



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

Introduction to HTML & CSS
CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:
Unit 20 - Client Side Customisation of Web Pages
Who Wants to be a Millionaire? Web Page Development Dreamweaver Chapter 2.
Tutorial 3 Introducing Cascading Style Sheets. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write.
Tutorial 2: Formatting Text. Objectives Session 2.1 – Learn the functions of the Common toolbar – Change the size of text – Discern which fonts to use.
Week 7 Web Typography. 2 Understanding Type Design Principles.
Web Development & Design Foundations with HTML5
Chapter Concepts Discuss Fonts Understand Fonts
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.
CSS Properties on Parade PropertyValid valuesExample font-familylist of fonts (separate with commas, end with generic font: serif, sans-serif, fantasy,
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.
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.
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.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Principles of Web Design 6 th Edition Chapter 5 – Web Typography.
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.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
CO1552 – Web Application Development Cascading Style Sheets.
TEXT Size and typeface of text Bold, italics, capitals, underlines Spacing between lines, words, and letters.
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.
Stylin’ with CSS Monday October 8 th and Tuesday October 9 th.
Typography (Fonts). Type type = any set of printed characters font = a set of printable or displayable characters with a specific style and size typeface.
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.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
Fonts and Typography Section 7.3. Typography Typography: the style, arrangement, and appearance of text Well designed text makes your page more readable.
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.
Typography The Science of Text. Fonts Style of type How many fonts in a document? Conservative--one font Typical--two fonts Use a third for emphasis.
Style Sheets. Coding Style Sheets  Style sheets use RULES to create the style  A selector (a tag or user-defined style name)  and then declarations.
Intro to CSS Christy. What is CSS?  Cascading Style Sheets  Separates content from presentation  Defines how to display HTML elements  Provides control.
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.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
CSS for Styling Text.
CS3220 Web and Internet Programming CSS Basics
Style Sheets.
Understanding and Applying Typography in CSS
The Internet 10/11/11 Fonts and Colors
Applying Typography in CSS
Text Size and typeface of text Bold, italics, capitals, underlines
Understanding and Applying Typography in CSS
Intro to CSS CS 1150 Fall 2016.
Intro to CSS CS 1150 Spring 2017.
Stylin’ with CSS.
Web Development & Design Foundations with H T M L 5
Working with Cascading Style Sheets (CSS)
Working with Cascading Style Sheets (CSS)
CS3220 Web and Internet Programming CSS Basics
Lesson 5 – Controlling fonts with CSS
CS3220 Web and Internet Programming CSS Basics
Typography.
Creating your own Styles
Lesson 5 Topic B – Basic Text & Fonts
Stylin’ with CSS.
Stylin’ with CSS.
Session IV Chapter 15 - How Work with Fonts and Printing
ATLAS WEB Web Typography.
Presentation transcript:

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 font families to choose from. ●The font family or families chosen for a site should be part of the site’s style and design. ●The font and color should be clean and readable.

Font Family Examples ●Arial ● Calibri ● Impact ● Times ● Verdana ●Helvetica

Generic Font Families Serif – have extra details on the ends of letters. Times New Roman Sans-serif – have straight ends and have cleaner designs. Arial is a good example.

Generic Font Families cont’d. Cursive – this is one of the fonts from the cursive family. These fonts resemble handwriting styles. Fantasy – this is Impact. These type of fonts are usually used for titles.

Writing Font Family Code in HTML ● Write your text here. ●the and make the text italicized ● Write your text here.

Writing in HTML with inline CSS ● Write your text here. ●. ●Whether a font family is displayed or not depends on if the font is installed on the web browser used.

Font Family Uses Different font families can be used in a web page to differentiate content on the web page. For example, the font used for the title of the page or for section headings can be different from normal text content to help the user navigate and understand your site. Different fonts can also signify links to other pages.