Type on the Web: Dos, Don ts and Maybes Ilene Strizver
|
|
- Miles Patrick
- 5 years ago
- Views:
Transcription
1 Type on the Web: Dos, Don ts and Maybes Ilene Strizver What exactly is Type on the Web? How does it differ from print? Type in print Fixed Predictable Controllable Appearance varies depending on: Operating system Browser Monitor resolution Installed fonts screen resolution Characteristics of Type on the Web Font style Type size Column width (line length) Alignment Color Font style In order for fonts to be viewed by everyone, they have to be installed on the viewer s computer. (Unless they are the new Web fonts which reside on a remote server.) If they aren t, the font will default to something else on the user s system... often with disasterous results! For this reason, it is best to stick to Web-safe fonts to maintain control over what you viewers see. The five Web-safe fonts common to most Mac and PC browsers: Verdana Trebuchet Arial Georgia Times New Roman Verdana Considered the most legible, this sans serif, with its tall x-height, comfortable width, and open letter spacing, was designed to be readable at small sizes on screen. Trebuchet This sans serif retains clarity and readability at small sizes. It is slightly narrower than Verdana, allowing more copy to fit in the same space. Its curved stroke endings and unusual lowercase g give it a bit more personality than Verdana.
2 Arial Although not specifically designed for the Web, Arial is a fairly readable sans that works well on the Web. It is similar to Helvetica in both width and spacing, but with slight character modifications. Georgia Designed for the Web as an alternative to Times, Georgia has open letterforms and spacing, making it crisp, clean, and easy to read on the Web, especially at smaller sizes. Times New Roman Designed for print, this commonly used typeface is not the easiest to read on the Web, especially at smaller sizes. If you like Times, try Georgia instead. Symbol Fonts Although not considered 100% Web safe, these symbol fonts are found in most systems, although occasionally with a different name. Webdings Wingdings ITC Zapf Dingbats Alignment There is no control over where a line will break in running text on the Web, since font size and style can vary from user to user. In addition, current browsers don t support hyphenation. Because of this, the line breaks and the resulting column rag are at best unpredictable. Avoid justification on the Web Avoid justification on the Web as varying type size and lack of hyphenation often result in huge word spaces and rivers of white space. While a justified setting might look ok on one person s monitor, it can change drastically for a viewer whose computer and browser displays the type at a different size. Stick to flush left for best readability and more reliable results. Color Color varies from computer to computer depending on: browser monitor calibration color profile Aim for enough contrast between type and background color to allow for color variations from viewer to viewer. Less is more...colorwise. Smart Punctuation on the Web IN PRINT, the use of typographically correct punctuation, including smart quotes and apostrophes, as well as en and em dashes, is the accepted practice when setting professional typography. ON THE WEB, not only can they be used, but they should be.
3 Cascading Style Sheets (CSS) CSS is style sheet language that is used to define specific characteristics of type on the Web, including font style, size, spacing, alignment, emphasis, and color. Much like style sheets used for print, cascading style sheets are a time-saving feature that give more control over the stylistic preferences and appearance of Web documents. CSS can be applied to a block of text or a whole site, making for consistent typography, as well as making it easy to alter elements on a global basis. These days, CSS is an essential element in Web design. Even if you are working with a programmer to built the site, CSS is worth learning and understanding its characteristics and possibilities. Type as Graphic Type can be converted into a graphic in the form of a.gif,.jpg, or.png file. Pros Unlimited freedom and creativity for headings, logos, other font-specific images. Allows combining text with images, textures, patterns. Special effects are possible. Cons Graphics are slower loading. Search engines won t recognize a graphic as content with key words as they do text. Graphics are not easily editable for corrections or updates. Dos and Don ts for Type on the Web Do Do use a line space between paragraphs for better readability, not an indent. Do add a word space before and after dashes to allow for more line-break choices. Do use subheads to break up lengthy copy, which can be tiring to read. Do choose text colors and backgrounds carefully for maximum readability. Do check how your Web pages look on as many browsers as possible on both a Mac and a PC. Do use the smallest image files possible while maintaining sharpness, clarity, and color. Don t Don t justify type on the Web which can create unsightly rivers and holes. Don t set a lot of text in all caps which reduces redability. Don t make manual line or word breaks to adjust a rag as one does in print. Don t make text columns too wide or too narrow, both of which can reduce readability. Don t drop small text out of black or a color close in value.
4 Web Fonts In the recent past, text on a Web site was limited to either Web-safe fonts, or the use of type as image. But the availability of the code, Web fonts and Web font services is changing all that. Web fonts offer a degree of typographic freedom never before available. What exactly are Web fonts?? They are NOT what are commonly referred to as Web-safe fonts. They are NOT fonts commonly found on your computer or operating system. They are NOT fonts used to create images for the Web. They ARE fonts that can be used for Web design that are not found on the user s computer but are located and downloaded from a remote location. What is a Web font service? It is a service that offers a range of specially developed Web fonts optimized for the Web that can be used to display real text on a Web page. The actual fonts reside on a network of remote servers and can be accessed and automatically downloaded to a Web page by the inclusion of special code within the Web page or site. What does this mean for designers and clients alike? Pros Expanded creative and typographic freedom Protect your brand; Use the same typefaces that define your identity in the print world. Text is search engine friendly, searchable, editable, resizable, copyable. Text is easily editable. Web font text is dynamic far easier to update and customize than static images. Faster loading than many graphics. Cons Variable onscreen quality Variable browser support and screen display, look different on every browser Issues and Considerations Web fonts Main issue is browser screen rendering, which can vary dependent upon platform (Mac vs. PC), operating system, browser, version, and the user s browser settings. Factors in selecting a Web font and/or service: Web font quality varies wildly. A good Web designer needs to sample Web fonts in all rendering scenarios. Size of library Font quality Pricing terms Character set Browser and OS support Degree of user-friendliness Not all Web fonts are created equal
5 Ease of setup Speed of upload/ depends on file size of font Web font services The ease with which one can search a particular Web font library varies from service to service, but most attempt to mimic the font search capabilities and features of the major font foundry distributor Web sites. This, too, is being tweaked and improved for optimum ease and functionality. Most of these services are subscription-based, and offer different tiers of service for different budgets and needs. (Google Web fonts are free.) Most require a special code added to the Web site or page to allow for the access of these Web fonts from a remote server. Some of the major supplies of Web type are: Typekit [ Fonts.com Web fonts [ Webtype [ Extensis WebINK Fontdeck [ Web fontfonts Kernest [ Typotheque [ Google Web Fonts [
6 STAY INFORMED (typographically speaking) Sign up for The Type Studio s monthly enewsletter, All Things Typographic at Follow me: Twitter@The Type Studio Facebook@Ilene Strizver & The Type Studio LinkedIn@Ilene Strizver Thank you! S
for the Web by Ilene Strizver
Type Basics for the Web by Ilene Strizver Designers need to understand the fundamentals of both type and web functionality, since they go hand in hand for developing and maintaining strong type online.
More informationPutting type on a page without incorporating typographic principles is merely word processing. Terry Rydberg, Author Exploring InDesign 3
Putting type on a page without incorporating typographic principles is merely word processing. Terry Rydberg, Author Exploring InDesign 3 Typography The study of all elements of type as a means of visual
More informationMODULE CM 2004 / STAGE 2 / SEMESTER 2 / SESSION Module title Design Principles and Context
MODULE CM 2004 / STAGE 2 / SEMESTER 2 / SESSION 06-07 Module title Design Principles and Context Typography Fonts are classified under the following headings. Old Face fonts make use of contrasting wide
More informationTypography. is the foundation of good web design
Typography is the foundation of good web design my name is Samantha Warren I am a web designer for Viget Labs I teach web & graphic design at the Center for Digital Imaging Arts at Boston University &
More informationOUR TYPOGRAPHY APPROVED UNIVERS FONTS. Univers 65 Bold Univers 65 Bold Oblique Univers 75 Black Univers 75 Black Oblique
BRAND TYPOGRAPHY For Internal Use Only Not For Use With The Public. For help and guidance on our brand standards, contact marketinginbox@firstcommand.com. 63 OUR TYPOGRAPHY Typography is a powerful extension
More informationBRAND. For Internal Use Only Not For Use With The Public. For help and guidance on our brand standards, contact
BRAND TYPOGRAPHY. 1 OUR TYPOGRAPHY. Typography is a powerful extension of our brand s personality. It plays an important role in creating a consistent look for First Command across all communications and
More informationFranklin Gothic. Seniors: Use larger text that is clear and legible. (Souvenir, Times, Garamond, Helvetica)
one TYPOGRAPHY LECTURE: Do s and Don t s in Typography Do Build a basic library first. Find out who your audience is. Use appropriate type sizes. Celebrate white space. Use correct alignment. Use correct
More informationWEB TYPOGRAPHY FOR WEB DEVELOPERS. Matej Latin Lead UX/UI Designer at Autotrader.co.uk
WEB TYPOGRAPHY FOR WEB DEVELOPERS Matej Latin Lead UX/UI Designer at Autotrader.co.uk 1 A MEANINGFUL WEB TYPOGRAPHY STARTER KIT 2 Most people think typography is about fonts. Most designers think typography
More informationHow to use CSS text styles
How to use CSS text styles Web typography is an important creative tool web designers use to express style and emotion that enhances the goal and overall message of a website. Image-based text gives you
More informationChapter 12: FORMATTING TEXT
Disclaimer: All words, pictures are adopted from Learning Web Design (3 rd eds.) by Jennifer Niederst Robbins, published by O Reilly 2007. PART III: CSS FOR PRESENTATION Chapter 12: FORMATTING TEXT CSc2320
More informationBefore & After. Use the Principles Cheatsheet! From The Non-Designer s Design Book, Robin Williams Non-Designer s Design 8
Before & After Use the Principles Cheatsheet! From The Non-Designer s Design Book, Robin Williams Non-Designer s Design 8 Before & After From The Non-Designer s Design Book, Robin Williams Non-Designer
More informationDesigning Research Posters. College of Art and Design Chris Jackson, Associate Dean Keli DiRisio, Assistant Professor
Designing Research Posters College of Art and Design Chris Jackson, Associate Dean Keli DiRisio, Assistant Professor Size and Orientation If you are NOT using the poster template: Start is with a 48"
More informationStructure of Text. Creating Memory Aids through Typography
Structure of Text Creating Memory Aids through Typography Edward Rushton MFA Donald Armel PhD Legibility Readability Definitions Legibility Legibility is dependent on the design of the typeface, the letterforms
More informationFont Basics. Descender. Serif. With strokes on the extremities of the letters. T Script. Sans-Serif. No strokes on the end of the letters
Font Basics Ascender Font Size d p x A X-height Cap height Counter The white space within letters Descender Bar A Serif With strokes on the extremities of the letters. T A Sans-Serif No strokes on the
More informationUser-Centered Website Development: A Human- Computer Interaction Approach
User-Centered Website Development: A Human- Computer Interaction Approach Daniel D. McCracken City College of New York Rosalee J. Wolfe DePaul University With a foreword by: Jared M. Spool, Founding Principal,
More informationLOGO & BRAND STANDARDS GUIDE
LOGO & BRAND STANDARDS GUIDE INTRODUCTION The SparkPost Brand Standards Guide provides key information needed to accurately and consistently produce external and internal documents and communications.
More informationThe building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations).
WDI Fundamentals Unit 4 CSS Cheat Sheet Rule The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations). Declaration A declaration is made
More informationIntroduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100
Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!
More informationUsing Text in Photoshop
Using Text in Photoshop So, we re going to take a break for a while from talking about photographs and how to manipulate them, and instead focus on some design elements! We re going to spend a while talking
More informationCSS. Text & Font Properties. Copyright DevelopIntelligence LLC
CSS Text & Font Properties 1 text-indent - sets amount of indentation for first line of text value: length measurement inherit default: 0 applies to: block-level elements and table cells inherits: yes
More informationACSC 231 Internet Technologies
ACSC 231 Internet Technologies Lecture 7 Web Typography Efthyvoulos Kyriacou - Assoc. Prof. Frederick University Resources: C. Markides (Frederick University) Slide 1 ACSC 231: Internet Technologies 23/12/2008
More informationTypesetting Tips. Put your best type forward.
Typesetting Tips Put your best type forward. Do you want your audience to read your document? Improve your chances by making your article easy to read. Make the document difficult to read and To learn
More informationF PROT. Sub-brands FILE SERVER SECURITY
BRANDING MANUAL Logo The F PROT Circle Icon was designed by Ágúst Gunnarsson and was introduced in 2006. We consider it very strong and it is at the focal point of a lot of our material. The latest update
More informationUnderstanding PowerPoint s Text Capabilities
Page 1 of 14 Chapter 3: Working with Text In this chapter z Understanding PowerPoint s Text Capabilities z Adding Text z Formatting Text z Using Bullets z Using Numbered Lists z Checking Spelling and Style
More informationThe 12 most common newsletter design mistakes
The 12 most common newsletter design mistakes www.targetmarketingnetwork.com By: Roger C. Parker Your newsletter s success depends on its design. An attractive, easy to read newsletter encourages readers
More informationChapter 7 Typography, Style Sheets, and Color. Mrs. Johnson
Chapter 7 Typography, Style Sheets, and Color Mrs. Johnson Typography Typography refers to the arrangement, shape, size, style, and weight of text. Affects the navigation and usability of a web site and
More informationFont, Typeface, Typeface Family. Selected Typographical Variables
Font, Typeface, Typeface Family Font: A font is a set of printable or displayable text character in a specific style, weight, and size. E.g. Helvetica Italic 10 Point. Typeface: The type design for a set
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 3 Configuring Color and Text with CSS Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
More informationVOICE OF TYPE LECTURE 1
VOICE OF TYPE LECTURE 1 TYPOGRAPHY II COUNTY COLLEGE OF MORRIS PROFESSOR GAYLE REMBOLD FURBERT VOICE OF TYPE As you look at typefaces, analyze their forms, learn their history and learn how to use them
More informationMultimedia for the Web: Creating Digital Excitement. Multimedia Element Text
: Creating Digital Excitement Multimedia Element Text Chapter Concepts Discuss Fonts Understand Fonts Define Cascading Style Sheets (CSS) Explain Additional Options for Implementing Text on the Web Chapter
More informationContent Design. Jason Withrow
Content Design Overview Reading Online Writing for the Web Guidelines Presenting Text Content Graphical Text Text Links PDF Documents Printer-Friendly Format Reading Online 1. Reading from computer screens
More informationFriendly Fonts for your Design
Friendly Fonts for your Design Choosing the right typeface for your website copy is important, since it will affect the way your readers perceive your page (serious and formal, or friendly and casual).
More informationTypographic. Alphabet. Book. Interactive PDF of typographic rules & terms YOU NEED TO KNOW. Home. Table of Contents
Typographic Alphabet Table of Contents > Rules That Every Typographer Should Know... 2-3 Book Interactive PDF of typographic rules & terms YOU NEED TO KNOW > Baseline... > Gutter... > Hierarchy... > Kerning...
More informationLogos. North Dallas Shared Ministries
Brand Guidelines Logos The NDSM logo stands at the center of the NDSM brand. For this reason it must be reproduced and applied with consistency in all of our brand communications. It is essential that
More informationA Crash Course in Typography: Principles for Combining Typefaces - noupe
A Crash Course in Typography: Principles for Combining Typefaces Cameron Chapman When combining typefaces, there are a couple of important principles you ll need to keep in mind, namely contrast and mood.
More informationWeb design and development ACS Chapter 5. Working with Text
Web design and development ACS-1809 Chapter 5 Working with Text 1/25/2018 1 Working with Text In this chapter we will study Ensuring Onscreen Readability Adding Logical Emphasis to Sections of Text Style
More informationWeb Development & Design Foundations with HTML5
1 Web Development & Design Foundations with HTML5 CHAPTER 3 CSS BASICS Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to... Describe the evolution of style sheets
More informationMS WORD TO WEB PAGE: THE SYLLABUS. Download MS Word to Web Page in PDF Format
MS Word to Web Page: The Syllabus Terms of Use & Acknowledgements Paula Petrik George Mason University http://www.archiva.net/ MS WORD TO WEB PAGE: THE SYLLABUS Download MS Word to Web Page in PDF Format
More informationReading 2.2 Cascading Style Sheets
Reading 2.2 Cascading Style Sheets By Multiple authors, see citation after each section What is Cascading Style Sheets (CSS)? Cascading Style Sheets (CSS) is a style sheet language used for describing
More informationIntroduction A global icon needs an iconic logo. Fashion has evolved since 1969, when Gap opened its first store. Our logo has changed with the
Introduction A global icon needs an iconic logo. Fashion has evolved since 1969, when Gap opened its first store. Our logo has changed with the times, too. One thing that hasn t changed is our mission
More informationTYPE ANATOMY jtittle
TYPE ANATOMY TYPE ANATOMY TITTLE j Serif Typefaces Tt HUMANIST (a.k.a. Old Style ) - Modeled after the roman typefaces of 15 th & 16 th centuries - Closely related to calligraphy and hand movement CLASSIC
More informationInDesign. your. Resumé. a how-to guide for creating a professional resumé using InDesign
InDesign your Resumé a how-to guide for creating a professional resumé using InDesign Table of Contents p4. Glossary p5. The Importance of Good Design p6. Setting up the Document p10. Creating a Grid p12.
More informationDocument and Web design has five goals:
Document and Web design has five goals: to make a good impression on readers to help readers understand the structure and hierarchy of the information to help readers find the information they need to
More informationLogo Style Guide. February 20, 2008
Logo Style Guide February 20, 2008 Table of Contents Communicating the Plexera Brand. 1 The Plexera Logo. 2 Using the Plexera Logo. 3 Color Palette. 4 Logo Don ts. 5 Typefaces. 6 Product Naming Typography.
More informationBBN ANG 183 Typography Text colour: vertical and horizontal spacing
BBN ANG 183 Typography Text colour: vertical and horizontal spacing Zoltán G. Kiss & Péter Szigetvári Dept of English Linguistics, Eötvös Loránd University gkz & szp (delg) typo/spacing 1 / 43 outline
More informationfrom The Elements of Typographic Style by Robert Bringhurst, page 171
from The Elements of Typographic Style by Robert Bringhurst, page 171 from The Elements of Typographic Style by Robert Bringhurst, page 148 h Dunt augue et, sum ad dolore do od estionse feum iure magna
More informationIn your lifetime you ve seen billions of letters and millions of words, yet you might never have consciously noticed the typefaces you read.
In your lifetime you ve seen billions of letters and millions of words, yet you might never have consciously noticed the typefaces you read. Type is important because it is an unconscious persuader. It
More informationTEMPLATE ORDER GUIDE /
TEMPLATE ORDER GUIDE / Our template order guide is filled with guidelines to help you complete the template order form. We want this to be a super easy and fun process for you! In order to prevent any
More informationlimelightplatform.com
1 limelightplatform.com Introduction: Email Template Overview: This document is an example of an email template. It contains the different sections that could be included. Email templates provide a layout.
More informationTYPOGRAPHY. ascender arm (as on the capital T) descender bar (as on the capital H) counter ear (as on the lower case g and r)
TYPOGRAPHY Parts of letters: base line x-height ascender arm (as on the capital T) descender bar (as on the capital H) extenders bowl counter ear (as on the lower case g and r) serif stroke tail (as on
More informationFonts, text, and colour on the web. Sourcing, resizing, and inserting web site images MGMT 230 LAB
Fonts, text, and colour on the web Sourcing, resizing, and inserting web site images MGMT 230 LAB Fonts and font families Font families are used in web development rather than just the name of one font
More informationHow to use text. Adding a text frame
How to use text Because Adobe InDesign CS6 is a page layout tool, working with text is an important skill. With InDesign, you add all text (and all content) into frames. Frames are shapes (called paths)
More informationABOUT RESEARCH POSTERS
ABOUT RESEARCH POSTERS Research posters summarize information or research concisely and attractively to help publicize it and generate discussion. The poster is usually a mixture of a brief text mixed
More informationBranding Guidelines - gather, grow, go
Branding Guidelines - gather, grow, go Heartland Community Church, June 2008 Brand Attributes 1 2 The Heartland gather, grow, go logos are made up of 2 different elements 1. Symbol - Each g logo has a
More informationunderstanding typography
understanding typography What is typography?! it is what language looks like! it is the art and technique of modifying type and arranging it on a page What does the arrangement of type mean? the arrangement
More informationLESSON 7 Introduction to Typography
FOUNDATION IN GRAPHIC DESIGN with ADOBE APPLICATIONS LESSON 7 Introduction to Typography Summary Notes WHAT IS TYPOGRAPHY? Typography is, quite simply, the art and technique of arranging type. Typography
More informationWEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5
WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 LEARNING OUTCOMES In this chapter, you will learn how to... Describe the evolution of style sheets from print media to the Web List
More informationWeb Development & Design Foundations with HTML5
Web Development & Design Foundations with HTML5 KEY CONCEPTS Copyright Terry Felke-Morris 1 Learning Outcomes In this chapter, you will learn how to... Describe the evolution of style sheets from print
More informationIn the early days of the Web, designers just had the original 91 HTML tags to work with.
Web Design Lesson 4 Cascading Style Sheets In the early days of the Web, designers just had the original 91 HTML tags to work with. Using HTML, they could make headings, paragraphs, and basic text formatting,
More informationUsing CSS in Web Site Design
Question 1: What are some of the main CSS commands I should memorize? Answer 1: The most important part of understanding the CSS language is learning the basic structure and syntax so you can use the language
More informationCMPT 165: More CSS Basics
CMPT 165: More CSS Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 14, 2011 1 The Favorites Icon The favorites icon (favicon) is the small icon you see
More informationWe assume that occasionally you want to say something on your Web
Chapter 5 What s Your Type? In This Chapter Creating, editing, and formatting text Using cool text effects We assume that occasionally you want to say something on your Web site, so this chapter covers
More informationCSS: Formatting Text. CSS for text processing: font-family. Robert A. Fulkerson
CSS: Formatting Text Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for text processing: font-family
More informationWhat is Accessibility?
Email Accessibility What is Accessibility? 1. Extent to which a consumer or user can obtain a good or service at the time it is needed. 2. Ease with which a facility or location can be reached from other
More informationlaurengregory laurengregorydesign.com
THSPA November 25, 2013 Topic: Basic Design Tips and Photoshop Helps 1. Layout Page layout is one of the most important graphic design disciplines. laurengregory lauren@briererows.com laurengregorydesign.com
More informationAccessible Documents & Presentations. By Amy Maes, DNOM
Accessible Documents & Presentations By Amy Maes, DNOM 1 Overview Accessibility: What am I required to do? Disability Characteristics Creating an Accessible Word Document & PowerPoint Presentation v2010
More informationsection four typography contents introduction...44 helvetica neue...45 bodoni...46 examples of type usage...47 body text examples...
section four typography 43 contents introduction...44 helvetica neue...45 bodoni...46 examples of type usage...47 body text examples...48 introduction Consistent application of type fonts and styles allows
More informationThe Newsletter will contain a Title for the newsletter, a regular border, columns, Page numbers, Header and Footer and two images.
Creating the Newsletter Overview: You will be creating a cover page and a newsletter. The Cover page will include Your Name, Your Teacher's Name, the Title of the Newsletter, the Date, Period Number, an
More informationReview Question 1. Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em>
Introduction to CSS Review Question 1 Which tag is used to create a link to another page? 1. 2. 3. 4. Review Question 1 Which tag is used to create a link to another page? 1. 2.
More informationGoogle Sites Guide Nursing Student Portfolio
Google Sites Guide Nursing Student Portfolio Use the template as base, but customize it according to your design! Change the colors and text, but maintain the required pages and information. Topic Outline:
More information**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet.
CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look
More information5. Text CHAPTER HIGHLIGHTS 10/12/2016 CHAPTER. Text tradition. Codes for computer text. t. Font technologies. Multimedia text.
CHAPTER 5. Text CHAPTER HIGHLIGHTS Text tradition. Codes for computer text. t Font technologies. Multimedia text. Guidelines for use of text in multimedia. 2 1 POWERS OF TEXT Multimedia developers value
More informationCOMSC-031 Web We S ite Site Development Development- Part 2 Part-Time Instructor: Joenil Mistal November 7, 2013
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal November 7, 2013 Chapter 12 12 Creating and Applying Cascading Style Sheets This chapter shows you how to use Cascading Style
More informationLet s start with the document tree
CSS INHERITANCE Let s start with the document tree Before we explore inheritance, we need to understand the document tree. All HTML documents are trees. Document trees are made from HTML elements. The
More informationThe use of eye-tracker technology to evaluate typefaces, Greek fonts and publication design for screen.
Typography in Publication Design The use of eye-tracker technology to evaluate typefaces, Greek fonts and publication design for screen. Evripides Zantides, Cyprus University of Technology, Lemesos, Cyprus,
More informationWEB DESIGN: CONSTRUCTION, FILES, CODE AND COLOURS UNIT NUMBER: H383 34
WEB DESIGN: CONSTRUCTION, FILES, CODE AND COLOURS UNIT NUMBER: H383 34 OUTCOME 1 Knowledge requirements Web page construction methods File formats Terminology html type Web safe colours WEB PAGE CONSTRUCTION
More informationOTTER TAIL COUNTY - MINNESOTA LOGO USAGE POLICY
OTTER TAIL COUNTY - MINNESOTA LOGO USAGE POLICY Prepared By: The Branding Task Force as directed by the Division Directors and the Otter Tail County Board of Commissioners. Manual Version Control Version
More informationKEEP CALM KERN AND. Some of the do s and don ts of Typography by Fran Pimblett
KEEP CALM AND KERN Some of the do s and don ts of Typography by Fran Pimblett Typography Dos and Don ts.indd 1 14/09/2014 8:21:37 AM Contents Smart Quotes... 2 Us ME Ornate Fonts... 3 Headers and Body
More informationHow to create and edit a CSS rule
Adobe Dreamweaver CS6 Project 3 guide How to create and edit a CSS rule You can create and edit a CSS rule in two locations: the Properties panel and the CSS Styles panel. When you apply CSS styles to
More informationBDA Dyslexia Style Guide
BDA Dyslexia Style Guide This Guide is in three parts: 1. Dyslexia Friendly Text 2. Accessible Formats 3. Website design 1. Dyslexia Friendly Text. The aim is to ensure that written material takes into
More informationHomeNet Automotive Visual Identity Guide
HomeNet Automotive Visual Identity Guide Official Care and Feeding of the HomeNet Automotive Brand Version 1.2 September 3, 21 Table of Contents HomeNet Automotive s Branding Mission - A letter from Jesse
More informationFrequently Asked Questions about Text and Graphics
1 Frequently Asked Questions about Text and Graphics 1. What is a font? A font is a set of printable or displayable text characters that are in a specific style and size. The type design for a set of fonts
More informationTrust runs deep. Brand Communications Guidelines. Version 12.1,
Trust runs deep Brand Communications Guidelines Version 12.1, 08.25.2017 Flint & Walling logo lockup Flint & Walling logo script (includes the Zoeller Meatball) Flint & Walling logo name bar Flint & Walling
More informationTypefaces are character sets based on distinct design characteristics.
Level 3 WGHS VISUAL ARTS 2011 ART DESIGN Typography An Introduction to Type Type Design Since the first recordings of letterforms the concept of the typographic form has evolved into a seemingly endless
More informationObjective 203 Apply production methods to plan and create advanced digital media graphics projects. Course Weight : 25%
Objective 203 Apply production methods to plan and create advanced digital media graphics projects. Course Weight : 25% Objective 203 - Graphics Objectives are broken down into three sub-objectives : pre-production,
More informationWATER (No kerning) WATER (Automatic Kerning) WATER (Manual Kerning).
Styles Learning to use styles is a very effective way to save time and improve the consistency of publications. A style is a group of attributes that can be applied at once, to one or more paragraphs,
More informationINTRODUCTION TO TYPOGRAPHY DESIGN
INTRODUCTION TO TYPOGRAPHY DESIGN Goals of typographic design Typography plays an important role in how audiences perceive your document and its information. Good design is about capturing your audience
More informationTYPE BASICS Cartographic Design & Principles Winter 2016
TYPE BASICS Cartographic Design & Principles Winter 2016 Words on a Map Everything on the Earth has a name Names on a map, make it a map Otherwise it is a picture, photograph or design Assigning names
More informationSession 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style
Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use
More informationBRAND IDENTITY GUIDELINES
BRAND IDENTITY GUIDELINES table of contents Mechanics of the Logo 3 Correct Usage - Full Color Logo 4 Correct Usage - Grayscale Logo 5 Correct Usage - Black Only Logo 6 Reversed Identity 7 Clear Zone Requirements
More informationModifying Type: effects of a letter change COLDS
Modifying Type Modifying Type The goal of good typography is like fabric. It should be evenly woven together where all facets and all parts of the letter forms work together. Sometimes if you have one
More informationWelcome to The Nova Scotia Government. Website Template
Welcome to The Nova Scotia Government Website Template Why a new web template? The new Nova Scotia Government website template is designed to help you maintain or create your government web pages. If right
More information> what is a font? Times New Roman [10 pts] Times New Roman [12 pts] Times New Roman [14 pts] Times New Roman [18 pts] Times New Roman [24 pts]
> what is a font? > what is a font? A font is set of glyphs (or images) that represent a complete series of alphabetic and numeric characters, punctuations and symbols in a particular size and style (or
More informationBest Practices Guide for Payments. Android August 2018
Best Practices Guide for Payments Android August 2018 Contents 3 Overview 4-5 Google Pay Payment Button: Do s & Don ts 5 Examples 6-7 Google Pay Logo & Mark: Do s & Don ts 7 Examples 8-9 Using Google Pay
More informationFerrysavers Brand Guidelines
2 Contents 3 4 5 6 7 8 9 10 11 12 13 Introduction The Ferrysavers Logo Protecting Our Master Logo Incorrect Master Logo Application Ferrysavers Family Logos Typography Print Typography Digital Typography
More informationcorporate identity guidelines
Seilevel Corporate Identity Guidelines Introduction 1 Preferred Signature and Components Logo Space and Minimum Size Signature Variations Color Palette Typography Signature Misuse 2 3 4 5 6 7 corporate
More informationCSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options):
CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look
More informationWHAT IS A POSTER SESSION?
WHAT IS A POSTER SESSION? GENERAL OVERVIEW A SUCCESSFUL POSTER Conveys a clear message and presents highimpact visual information with minimum text Readable use clear language and correct grammar in
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationNatalie Olson - Kisscut design Typography and Internal Book Design
Natalie Olson - Kisscut design Typography and Internal Book Design www.kisscutdesign.com/blog Typography and the art of setting type in books hasn t changed a lot since the 1500s. The methods have changed.
More information