Typography for the Web. Kayla Hardy
|
|
- Kory Hoover
- 7 years ago
- Views:
Transcription
1 Typography for the Web Kayla Hardy
2 Review of the Basics Typeface: a family of fonts example: Garamond Two main types of typefaces: Serif: has feet Sans Serif: without feet Font: A specific weight and size of a typeface example: Garamond bold 12 pt Mixing fonts in a document creates structure, hierarchy and visual interest However, you don t want too many fonts in one page, usually 2-4 is good
3 Basic Anatomy Hefty BASELINE descender serif ascender CAP HEIGHT X-HEIGHT For more about type
4 Legibility The ability to distinguish each letter in a font Several factors that make a font legible White space: good balance between the letter forms and the white spice in and around them Ascender and descenders: long ascenders and descenders which help distinguish between letters X-height: generous x-height provides plenty of space inside the letters Stroke: even strokes with less contrast that are not too thick or thin
5 Readability How easily and comfortably a block of text can be read A legible font is important for readability, but there are other factors Line spacing: generous line spacing, but close enough that you can easily distinguish between chunks of text Line length: medium length lines, about 86 words is ideal Alignment: left alignment provides a vertical edge for reading (justified does the same, but can stretch the word and letter spacing which will decrease readability) Sans serif typefaces are considered more readable than serif, both are more readable than a decorative or script typeface
6 Emotional Associations As a society certain typefaces have certain connotations Using the wrong style typeface can create dissonance between the feeling it communicates and the message of the text Serif typefaces feel traditional Sans serif typefaces feel modern Decorative typefaces (like script or handwriting typefaces) can convey a variety of feelings based on the design Decorative typefaces are very difficult to use, they are generally not necessary and often look unprofessional
7 Why It s Important Readability and the emotional associations people have with a font affect how they receive the information you are presenting to them The majority of content on most sites is text Therefore, typography is often the key to good website design. You can have great images and effects, but if the type is bad the message will get lost
8 Web Safe Fonts Fonts in a webpage are are taken from the font library on the computer of the individual looking at the page Web safe fonts are fonts that everyone should have on their computer, therefore they are safe to use There are only 8: Georgia, Verdana, Times New Roman, Arial, Trebuchet MS, Impact, Courier & Comic Sans MS What if you want to use a different font? For example, you want to use the same font as the existing logo There are a few ways to do it
9 Font Stacking A CSS technique is which you choose the font you want and then provide multiple back up options of a similar style in the event that the users computer doesn t have your first choice. Example: h1 { Font-family: Garamond, 'Hoefler Text', Georgia, serif; } will tell you the percent of machines that your font is available on, and give you suggestions for back up fonts This is a free and easy option, but give you little control Web Fonts are a better option
10 Web Fonts Fonts saved in a format to be used on the web Hosted on the server and use the declaration to link to the font, retrieve it from the server, and then display it You can host fonts on your server or use a web font service Legal note: Be sure to check that the font s licensing agreement allows the font to be used on the web. You can find websites that will convert a desktop font into a web font, this generally violates the licensing agreement and shouldn t be done
11 Web Font File Types A variety of different font files: Embedded OpenType (EOT), TrueType (TTF/OTF), Scalable Vector Graphics (SVG), & Web Open Font Format (WOFF & WOFF 2.0) WOFF is a font format created for use in web pages Developed in 2009, it became a W3C Recommendation in 2012 WOFF is currently supported on all major browsers (but not all older versions) If you want to ensure your font will be displayed in as many bowser versions as possible you can host a version of the font in all 4 file types
12 Self Hosted Web Font There are many sites where you can purchase and download fonts which you can host on your server FontShop: MyFonts: FontSpring: some free options Fontspring provides easy to use packages that provide you will all the files you need to host the fonts on your own server including a CSS file with declaration
13 Self Hosted Web Fonts Self hosting fonts is simple: First, place all the font files on the server in the same folder as your CSS Second, in your CSS use declaration to define your font and point to it s location Once you have declaration you can use your font anywhere in your CSS document Note for self hosted and web font services: it is still a good idea to use font stacking even when using web fonts incase something goes wrong
14 Example { font-family: 'droid_sansregular'; src: url('droidsans-webfont.woff') format('woff ); font-weight: normal; font-style: normal; } Body { } font-family: droid_sansregular, Arial, sans-serif;
15 Web Font Services A variety of web font services at varying prices GoogleFonts: free Typekit: yearly subscription (free option) Fontdeck: annual price per font Cloud.typography: yearly subscription When using a web font service: first you choose the fonts you wish to use, then provide them with your websites information, next they provide you with a script to include in your webpage. Once the script is placed in your webpage the font can be used in your CSS
16 The HTML: <!DOCTYPE html> Example <head> <script src="//use.typekit.net/pcj6rhu.js"></script> <script>try{typekit.load();}catch(e){}</script> </head> The CSS: body { font-family: adelle sans, helvetica, arial, sans-serif; }
17 Which is better? Self Hosting fonts Pro: You own the font, don t have to worry about it no longer being offered etc. Pro: Not reliant on a third party server Con: Limited free options, can be very expensive Web Font Services Pro: Quick and easy Pro: Wide variety of pricing options, including free options Con: Completely reliant on a third party server, if their server is down your fonts are gone
18 More Information W3schools CSS3 web fonts: Type on Screen by Ellen Lupton ISBN Developers/dp/ X Laura Franz s Lynda courses (a little older but lots of good info about typography) Choosing-Using-Web-Fonts/ html? org=simmons.edu
19 References Hazlett, R. L., Larson, K., Shaikh, A. D., & Chaparo, B. S. (2013). Two studies on how a typeface congruent with content can enhance onscreen communication. Information Design Journal (IDJ), 20(3), doi: /idj haz Josephson, S. (2008). Keeping Your Readers' Eyes on the Screen: An Eye-Tracking Study Comparing Sans Serif and Serif Typefaces. Visual Communication Quarterly, 15(1/2), doi: / KOCH, B. E. (2012). EMOTION IN TYPOGRAPHIC DESIGN: AN EMPIRICAL EXAMINATION. Visible Language, 46(3),
Graphic Design Basics. Shannon B. Neely. Pacific Northwest National Laboratory Graphics and Multimedia Design Group
Graphic Design Basics Shannon B. Neely Pacific Northwest National Laboratory Graphics and Multimedia Design Group The Design Grid What is a Design Grid? A series of horizontal and vertical lines that evenly
More informationAdjunct Assistant Professor Gayle Rembold Furbert. Typography II. County College of Morris Graphic Design Degree Program
Adjunct Assistant Professor Gayle Rembold Furbert Typography II County College of Morris Graphic Design Degree Program Voice of Type As you look at typefaces, analyze their forms, learn their history and
More informationMaking Textual Webpage Content Responsive
Making Textual Webpage Content Responsive Web page content can be quickly broken down into the following categories: 1) Textual Information 2) Image based information 3) Video information i.e. videocasts
More informationWhen older typesetting methods gave
Typographic Terms When older typesetting methods gave way to electronic publishing, certain traditional terms got carried along. Today we use a mix of old and new terminology to describe typography. Alignment
More informationProducing accessible materials for print and online
Producing accessible materials for print and online Standard of Accessibility AbilityNet is a registered national pan disability charity helping people adapt and adjust their information and communication
More information01/42. Lecture notes. html and css
web design and applications Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications ( WebApps
More informationHow to Copyright Your Book
Need a Bar Code? Same thing. After you ve obtained your numerical ISBN, that number can be used to create a barcode for your back cover. A barcode is a graphic of vertical lines that can be scanned for
More informationDigital Commons Design Customization Guide
bepress Digital Commons Digital Commons Reference Material and User Guides 6-2016 Digital Commons Design Customization Guide bepress Follow this and additional works at: http://digitalcommons.bepress.com/reference
More informationON-SCREEN TEXT LEGIBILITY AMONG CROATIAN AND SLOVENIAN LANGUAGE GROUPS
ON-SCREEN TEXT LEGIBILITY AMONG CROATIAN AND SLOVENIAN LANGUAGE GROUPS Dorotea KOVA EVI 1, Nace PU NIK 2, Maja BROZOVI 1 & Klementina MO INA 2 1 University of Zagreb, Faculty of Graphic Arts, Department
More informationWeb Design. www.ltscotland.org.uk/sustainabledevelopment/climatechange
Web Design www.ltscotland.org.uk/sustainabledevelopment/climatechange Web Design Personnel Web design involves a range of skills. Everyone in the class can be involved in planning the website structure
More informationBasics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
More informationBase template development guide
Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento
More informationCRAFTING TYPE ON THE WEB
CRAFTING TYPE ON THE WEB Amit Jakhu Copyright 2016 by Amit Jakhu All rights reserved Designers: Amit Jakhu, Jacques Ramphal Editor: Cahill Puil Copy Editor: Leigh Bryant myplanet.com 1.866.232.7456 252
More informationcustomer community Getting started Visual Editor Guide! www.pure360community.co.uk
Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for
More informationDreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
More informationSerif or Modern Fonts
Serif or Modern Fonts The serif, or cross-line at the end of a stroke, probably dates from early Rome. Father Edward Catich proposed in his seminal work, The Origin of the Serif, that the serif is an artifact
More informationITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
More informationMobile Web Site Style Guide
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
More informationWebsite 101: Visual Design And Content
Topic Website Tutorial 13 Website 101: Visual Design And Content This tutorial is the first of two that will look at the essential elements required for your website. The focus will be on visual design
More informationTypography and Drupal. What does Drupal provide? Ashok Modi DDCLA 2011
Typography and Drupal What does Drupal provide? Ashok Modi DDCLA 2011 About the presenter Canadian (migrated after the igloo melted) Work at the California Institute of the Arts (http://calarts.edu) "Computer
More informationInstructions to Create Your Rollup Poster in PowerPoint
Instructions to Create Your Rollup Poster in PowerPoint THE IDEAL POSTER IS DESIGNED TO... Provide a brief overview of your research Encourage discussion Stand alone when you re not there to provide an
More informationRecommendations for Designing Home Library Service Flyers NSW Home Library Service Working Group
Recommendations for Designing Home Library Service Flyers NSW Home Library Service Working Group These recommendations have been developed by the members of the Home Library Service Working Group, a working
More informationCreating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
More informationRoles of Visuals in Instruction
Literacy Ms. Magdalena Galloway The ability to read and write verbal messages? What about knowing Shakespeare? Is knowing how to e-mail part of literacy? Language is Power? wordle.net Visual Literacy Learned
More informationDIY Formatting and Layout Guidelines
DIY Formatting and Layout Guidelines Print-ready means that you give us your book PDFs once they re final. You ve written, edited and proofread your book, and you ve formatted it to look the way you want.
More informationWeb Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
More informationFacing up to Fonts. Richard Rutter
Facing up to Fonts Richard Rutter When the only font available is Times New Roman, the typographer must make the most of its virtues. The typography should be richly and superbly ordinary, so that attention
More informationWeb Publishing Basics 2
Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What
More informationThere are three responses to a piece of design yes, no, and WOW! Wow is the one to aim for. ~ Milton Glaser
Making Your Direct Mail Pieces Noticeable Understanding Basic Design Skills to Catch Your Customer's Attention Dr. Charles T. Weiss Clemson University ctweiss@clemson.edu http://sherpablog.marketingsherpa.com/wp-content/uploads/2012/02/mail.png
More informationU T A H V A L L E Y U N I V E R S I T Y
U T A H V A L L E Y U N I V E R S I T Y W E B S T Y L E G U I D E V olume 1: Web Style Guide v1.0.1 HOW TO USE THIS STYLE GUIDE This guide is to be used in conjunction with, and is a expansion of, the
More informationSmartphones and tablets: If you have a data plan, use the SMTP server setting for the company that provides this service.
ARTSPHERE USER MANUAL Hosting for versions 5.0 and 5.1 The hosting control panel is where your website is located. We refer to this as the cpanel. To access the cpanel add /cpanel to your domain name (for
More informationPowerPointoint Presentations a n d T U S K [
Color Schemes PowerPointoint Presentations a n d T U S K [ [ T U F T S U N I V E R S I T Y S C I E N C E S K N O W L E D G E B A S E ] Limit color palette to two or three dark colors against a light background
More informationStyle Guide Provided courtesy of Innovative Emergency Management Inc.
Style Guide 1. Introduction Louisiana.gov is an enterprise approach for state agencies to work together to provide citizen-centric digital government services and information. Key to achieving this goal
More informationWebsite Development. 2 Text. 2.1 Fonts. Terry Marris September 2007. We see how to format text and separate structure from content.
Terry Marris September 2007 Website Development 2 Text We see how to format text and separate structure from content. 2.1 Fonts Professionally written websites, such as those by Google and Microsoft, use
More informationPage layout & typography. graphic design
Page layout & typography graphic design first impressions lecture goals To help you better communicate the purpose of your web pages by visually emphasizing the most important features and relationships
More information{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
More informationHierarchy, Space, Placement & Alignment as a primary factors in visual organization.
Typefaces: Baskerville, Caslon, Futura, Garamond, Gill Sans, Helvetica, Minion Pro, Myriad Pro or Sabon. Don t mix the typefaces unless the instructions tell you to! warning Beware of floating text! A
More informationPMS 342 PMS 425 Black White
Section Eleven College Design Elements All college trademarks, including the college name, are federally registered trademarks. In order to protect the college s licensing agreements and graphic identity
More informationChapter 2 Review Questions and Answers
Chapter 2 Review Questions and Answers 1. What is a word processor? A word processor is a computer application used to create, modify, print, and e-mail documents. 2. a) What is the insertion point? The
More informationGuidelines for Creating Accessible Printed Posters. Stephen F. Gilson, Ph.D. Robert M. Kitchin Jr., MSW
Guidelines for Creating Accessible Printed Posters Stephen F. Gilson, Ph.D. Robert M. Kitchin Jr., MSW Creating accessible posters provides all session participants with greater access to poster information.
More informationWord Processing programs and their uses
Word Processing programs and their uses An application that provides extensive tools for creating all kinds of text based programs. They are not limited to working with text and enable you to add images
More informationThe Point Cloud Library Logo
Identity Guidelines Point Cloud Library Identity Guidelines 1 The Point Cloud Library Logo The Logo The Point Cloud Library logo is a combination of the pointcloudlibrary or pcl wordmark and the cloud
More informationweb identity application
section eleven 99 contents elements of webpage design... 100-101 web development and design considerations...102 website examples... 103-106 elements of webpage design For purposes of identity and usability,
More informationIdentity guidelines. Edition 2 October 2015
Identity guidelines Edition 2 October 2015 Contents: Message from Bishop Stephen 3 Introduction 4 The logo 5 Positioning and sizing 7 Fonts and typography 8 Logo colour and colour palette 10 Templates
More informationGUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
More informationMaking it clear. Guidelines to producing printed material for people who are blind or partially sighted.
Making it clear Guidelines to producing printed material for people who are blind or partially sighted. Contents 4 Did you know? 4 Clear print 5 Fonts 5 Typeface 6 Design and layout 7 Colour and contrast
More informationMCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative
More informationAudience Perceptions of Fonts in Projected PowerPoint Text Slides
Audience Perceptions of Fonts in Projected PowerPoint Text Slides Jo Mackiewicz Illinois Institute of Technology mackiewicz@iit.edu Abstract This study examined 10 common and popular fonts displayed in
More informationStanford University Department of Athletics, Physical Education, and Recreation STYLE GUIDE
Stanford University Department of Athletics, Physical Education, and Recreation STYLE GUIDE October 2008 ! Stanford University Department of Athletics, Physical Education, and Recreation (DAPER) Style
More informationYour Success Is MTD s Success!
Your Success Is MTD s Success! These guides and requirements have been created by MTD to help ensure greater success in your email campaigns. Please have all team members read their relevant section below:
More informationCOLLEGE OF ARTS AND SCIENCES GUIDELINES FOR THE PREPARATION OF MASTER S THESIS
COLLEGE OF ARTS AND SCIENCES GUIDELINES FOR THE PREPARATION OF MASTER S THESIS Master s Thesis Checklist for Graduation 1. Application for Degree (submitted to the Registrar s Office) 2. Completed, approved
More informationDeveloping Academic Posters Using a Single PowerPoint Slide
Developing Academic Posters Using a Single PowerPoint Slide Autumn Schumacher, PhD, RN Associate Professor Georgia Regents University College of Nursing Part 1 Part 2 Today s Presentation Definition of
More informationJoomla! Class Suffix Guides
Joomla! Class Suffix Guides By Muhammad Syafiq 29 January 2008 Acknowledgements & License License This document is released under the Joomla! Electronic Documentation License Acknowledgements I would like
More informationweb identity standards
section ten 86 contents introduction...87 official vs. non-official sites...88 banner... 89-90 tagline and the web...91 tagline and the web: improper use...92 typography for the web: live text...93 typography
More informationMagento 1.4 Themes Design
Magento 1.4 Themes Design Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine Richard Carter [ PUBLISHING 1 open source I community experience distilled
More informationICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
More informationEMAIL MARKETING BEST PRACTICES. www.agillic.com contact@agillic.com
EMAIL MARKETING BEST PRACTICES www.agillic.com contact@agillic.com SUBJECTS AND PREHEADERS Subject Preheader Tell it don t sell it Your subjects and preheaders can make all the difference to your email.
More informationDr. Lisa White lwhite@sfsu.edu
Dr. Lisa White lwhite@sfsu.edu edu Associate Dean College of Science and Engineering San Francisco State University Purpose of a Poster To communicate/publicize to others your research/experiment results
More informationCHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
More informationWeb Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
More informationSECURETRAY ADVERTISING COPY. g u i d e l i n e s & b e s t p r ac t i c e s
SECURETRAY ADVERTISING COPY g u i d e l i n e s & b e s t p r ac t i c e s SecureTray Advertising Copy Guidelines & Best Practices Simplicity is the fundamental guideline for creating effective, engaging
More informationSMU Student Affairs Style Guide
SMU Student Affairs Style Guide 1 Strengthening Our Visual Communications 1 SMU Student Affairs is dedicated to creating a cohesive learning environment for SMU students. To do this, we must ensure that
More informationWeb Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
More informationWeb Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
More informationBetter Homes and Gardens Real Estate LLC Franchisee Identity Standards Manual
Better Homes and Gardens Real Estate LLC Franchisee Identity Standards Manual Draft 05.22.09 Better Homes and Gardens Real Estate LLC Table of Contents 1 Table of Contents Introduction to our brand 03
More informationWeb Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
More informationThe AA Style Guide VC501 Historical and Contextual Studies Tyrone Duke
The AA Style Guide VC501 Historical and Contextual Studies Tyrone Duke For the road ahead Logo The AA logo is one of the most recognised logos in the UK. Modern style requirements have updated it, but
More informationCoding HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
More informationCommercial and Promotional uses of Washington Campus Compact s Marks and Verbiage
Graphic Identity Guidelines The Washington Campus Compact Identity Guidelines in this Style Guide are central to our communication and marketing strategies. They provide a road map for presenting the organization
More informationADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
More informationMicrosoft Publisher 2010 What s New!
Microsoft Publisher 2010 What s New! INTRODUCTION Microsoft Publisher 2010 is a desktop publishing program used to create professional looking publications and communication materials for print. A new
More informationTypography in Human-Computer Interaction
Typography in Human-Computer Interaction Cognitive and aesthetic implications of typeface selection and presentation Shaun Kelly and Tyler Gregory Iowa State University HCI 521 Fall 2011 Group XE15 2 Typography
More informationCreate Accessible PowerPoint Presentations Presented by: Cryssel Vera
Create Accessible PowerPoint Presentations Presented by: Cryssel Vera PowerPoint Accessibility 1 Objectives To learn the elements and process involved in creating an accessible presentation. To understand
More informationBrock University Content Management System Training Guide
Brock University Content Management System Training Guide Table of Contents Brock University Content Management System Training Guide...1 Logging In...2 User Permissions...3 Content Editors...3 Section
More informationBrand Standard Guide
Brand Standard Guide Contents 03 Strategic Brand Strategy 04 itravel2000 identity - The logo 05 Clear Spacing 06 Correct Usage of Logo 07 Corporate Colours 08 Typeface Online & Print 09 Imagery & Visual
More informationInteractive Data Visualization for the Web Scott Murray
Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding
More informationWeb Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6
Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration
More information1UNIVERSITY, The Logo STANDARD 2.1
Basic Standards 2.1 The Logo 2.2 Logo Versions 2.3 Adding Color 2.4 Reverse 2.5 Unacceptable Logo Versions 2.6 University Seal 2.7 University Typography 2.8 Brand Consistency The Logo The elements of the
More informationHTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
More informationdesigned and prepared for california safe routes to school by circle design circledesign.net Graphic Standards
Graphic Standards Table of Contents introduction...2 General Usage...2 Logo lockups: color...3 LOGO LOCKUPS: GRAYSCALE...4 Minimum Staging Area...5 Minimum Logo Size...6 Type Family...7 Color Palettes...8
More informationLEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES
Updated 3/15/2013 4:07 PM LEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES The League of Women Voters logo, like our name, is our identity. It conveys the full collective power of the LWV mission to the public,
More informationASSOCIATE COLLEGE PARTNERSHIP Brand and messaging guidelines. Version 1.1 September 2015
ASSOCIATE COLLEGE PARTNERSHIP Brand and messaging guidelines Version 1.1 September 2015 CONTENTS 1 INTRODUCTION 2 POSITIONING OUR PARTNERSHIP 2.1 THE PARTNERSHIP MARKETING MESSAGE AND PROPOSITION 2.2 HOW
More informationVirtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
More informationstandards graphic standards manual
standards graphic standards manual 1 introduction To understand the function and value of the Fifth Third Bank identity, it is important to recognize that every organization has a specific public identity
More information4.2 Understand Microsoft ASP.NET Web Application Development
L E S S O N 4 4.1 Understand Web Page Development 4.2 Understand Microsoft ASP.NET Web Application Development 4.3 Understand Web Hosting 4.4 Understand Web Services MTA Software Fundamentals 4 Test L
More informationPartners. In Health. Visual Identity Guidelines 08.13
Partners Visual Identity Guidelines 08.13 Welcome Our identity guidelines visually represent who we are and what we strive for: accompaniment, innovation, transformation, and commitment. They are not meant
More informationContents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
More informationDIY RESOURCE KIT. creating a. brand
DIY RESOURCE KIT creating a brand Contents CREATING A LOGO 4 CREATING A LOGO 5 USE OF YOUR LOGO 6 EXAMPLES OF GOOD LOGOS 7 EXAMPLES OF BAD LOGOS 8 COLOUR MODELS 9 FONTS/TYPEFACES 10 CHOOSING BRAND IMAGES
More informationUsing this Brand Guide
Using this Brand Guide This brand and style guide is designed to illustrate the basic requirements for appropriate usage of Blue Highway s logo and design elements in a variety of mediums. All client acquisition
More informationMAKE IT PRETTY.» a few web design basics to keep your site looking swell. food allergy blogger conference november 2013
MAKE IT PRETTY» a few web design basics to keep your site looking swell food allergy blogger conference november 2013 HELLO. I M MARY FRAN» i write frannycakes & the chronic positivity project» in real
More informationB R A N D I N G G U I D E L I N E S
B R A N D I N G G U I D E L I N E S At the very core of Hutchens Law Firm is a brand that has emerged after more than thirty years of dedicated legal service to business and individuals throughout North
More informationSetting up and using email in PGdebt 9
Setting up and using email in PGdebt 9 MAIL MERGE AND EMAIL The Mailmerge/Word processor screen is split horizontally by a blue divided, this can be dragged to change the size of the sections. WP is at
More informationEBooks: Expanding the School Library
EBooks: Expanding the School Library Presenter: Dr. Terry Cavanaugh & Dr. Cathy Cavanaugh Email: tcavanau@unf.edu & ccavanau@unf.edu Web: http://drscavanaugh.org/ebooks/ As of 2004 the Million Book Project
More informationDivide your material into sections, for example: Abstract, Introduction, Methods, Results, Conclusions
Creating a Research Poster in PowerPoint Adapted by Libertad Flores from guidelines by the Department of Medical Graphics and Photography, Memorial Sloan-Kettering Cancer Center, July 2011 1) Planning
More informationWEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
More informationPittOnline. Style Guide. Version 1.1
PittOnline Style Guide Version 1.1 Purpose Statement The purpose of the Pitt Online Style Guide is a way of keeping documents and stylistic choices consistent and user friendly and to minimize confusion.
More informationBLACKBOARD 9.1: Text Editor
BLACKBOARD 9.1: Text Editor The text editor in Blackboard is a feature that appears in many different areas, but generally has the same look and feel no matter where it appears. The text editor has changed
More informationLevels 1 and 2 Desktop Publishing (8983)
Levels 1 and 2 Desktop Publishing (8983) Examination Support Guide 100/4890/X Level 1 100/4891/1 Level 2 www.cityandguilds.com December 2007 Version 2.0 About City & Guilds City & Guilds is the UK s leading
More informationBRAND GUIDELINES AND STANDARDS
EMS SOFTWARE BRAND GUIDELINES AND STANDARDS WE HELP PEOPLE CREATE GREAT MEETINGS EMS SOFTWARE BRAND GUIDELINES 2 WHY IS BRAND SO IMPORTANT? This brand guidelines and standards book is a tool designed to
More information1.1. Design elements
1.1 Design elements 1 The fundamental design elements, color, typography, structure and imagery contribute to an optimal user experience. The following section details the specifics of these elements.
More information