DOCSLIB.ORG

Mysuccess Website Designer Associate Version 2.0

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Mysuccess Website Designer Associate Version 2.0 MySuccess Website Designer Associate Version 2.0 Topic 6 – Getting Started with CSS In this Lesson • Introduction • Separating content from presentation. • Placing CSS. • CSS Selectors • Selectors. • Practical CSS • Styling headings. • Styling lists. • Styling links. • Styling tables. • Styling DIVs. • Styling images and videos. • Styling forms. MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 2 Introduction Placing CSS • CSS consists of creating a block of rules. • Each block applies to one or more elements in a page. • The blocks then consist of rules which modify the appearance of the element. • The elements can be selected by their element type, their id or their class name. • CSS can be added inline with an element, it can be embedded in an HTML file or it can be placed in an external file. MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 4 Example CSS Placement • With inline placement, you specify the rules for an element in a style attribute of that element: <h4 style="color: red">Redundant Language</h4> • This will make just this particular <h4> red. • With embedded placement, CSS rules are specified inside a <style> block somewhere on the page. <style> h4 { color: red; } </style> • This will make all <h4> headers on this page red. • The best practice is to have CSS in a separate file, and then link to this file from the pages that need it. This allows the CSS to remain in one place, and changing this CSS will apply changes throughout the whole site. MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 5 Selectors Selectors • A selector is used to choose an element from the page (called the DOM). • Style rules are then applied to the selector. • CSS have several selectors, the basics being: Selector Example Description element p Selects an HTML tag .class .articleHeader Selects an element by its class attribute #id #firstArticle Selects an element by its id <h1>A header</h1> <div class="article"></div> <p id="terms"></p> h1 { .article { #terms { … … … } } } MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 7 Selectors Note • You should use classes when there is more than one item with that class in the page (such as an article in a blog). • You should use IDs when there is only one item with that id in the page (such as the page header). MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 8 CSS 1/2 Selectors Selector Example Example Description element p Selects all <p> elements .class .articleHeader Selects the element with the ‘articleHeader’ class #id #firstArticle Selects the element with the ‘firstArticle’ id * * Selects all elements element, element div, p Selects all <div> and all <p> elements element element div p Selects all <p> elements inside <p> elements element > element div > p Selects all <p> elements where the parent is a <div> element element + element div + p Selects all <p> elements that are placed immediately after <div> elements [attribute] [target] Selects all element with a target attribute [attribute=value] [target=_blank] Selects all element with a target attribute value set to ”_blank” [attribute |= value] [lang |= en] Selects all element with a lang attribute value starting with “en” [attribute ~= value] [title ~= flower] Selects all elements with a title attribute containing the word “flower” :active a:active Selects the active link ::after p::after Insert something after the content of each <p> element ::before p::before Insert something before the content of each <p> element MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 9 CSS 1/2 Selectors Selector Example Example Description :first-child p:first-child Selects every <p> element that is the first child of its parent ::first-letter p::first-letter Selects the first letter of every <p> element ::first-line p::first-line Selects the first line of every <p> element :focus input:focus Selects the input element which has focus :hover a:hover Selects links on mouse over :lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to “it” (Italian) :link a:link Selects all unvisited links :visited a:visited Selects all visited links MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 10 Practical CSS Practical CSS • Let’s create some CSS for Joe’s Blog. • Add a new folder to the site called ‘styles’, and create a ‘styles.css’ file inside. • Before we start using this file, we have to tell the pages of our site to use this styles file – we can easily do this by adding a reference to the file in the site template. • Open normal.dwt and add a link in the <head> section. <head> <meta charset="UTF-8"> <!-- TemplateBeginEditable name="doctitle" --> <title>Home</title> <!-- TemplateEndEditable --> <link rel="stylesheet" href="../styles/styles.css"> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> </head> MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 12 Practical CSS • Let’s start by adding some rules common to all elements. * { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; font-size: 10pt; } • The font-family rule specifies a list of fonts to try and use on the browser. • If the first font is not available, the second one is tried, and so on. • Dreamweaver will suggest suitable fonts for you – the best fonts for web are sans-serif fonts. • The second rule specifies a default font size. MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 13 Styling Headers • Now let’s add some style to the headers. /** Header Styles **/ h1 { font-size: 24pt; } h3 { font-style: italic; font-size: 14pt; margin-left: 40px; text-transform: capitalize; line-height: 0.5; } h4 { font-size: 12pt; } • Looking better already! • Styling headers is very much the same as styling text, with a number of rules available, shown in the next slide. MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 14 Text Styling Properties Property Description color Sets the colour of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration (underline, strike through, overline…) added to text text-shadow Specifies the shadow effect added to text text-transform Controls the capitalisation of text text-overflow Specifies how overflowed content that is not displayed should be signaled to the user (for example: hidden, or with scroll bars). unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document vertical-align Sets the vertical alignment of an element white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in text MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 15 Styling Lists • We want to use different bullets for the lists in our page. • The list-style-type property can be used to change the type of bullet displayed in unordered lists or the type of number displayed in ordered lists. • A full list of supported types can be found here. ul { list-style-type: square; } Property Description list-style Sets all the properties for a list in one rule list-style-image Specifies an image as the list-item marker list-style-position Specifies if the list-item markers should appear inside or outside the content flow list-style-type Specifies the type of list-item marker MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 16 Styling Links • A link has four states: • a:link – a normal, unvisited link. • a:visited – a link that the user has previously visited. • a:hover – a link underneath the mouse cursor. • a:active – a link, the moment it is clicked. • Ok, so let’s style the links. /** Links **/ a:link { text-decoration: none; color: #158ABE; } a:visited { text-decoration: none; color: #158ABE; } a:hover { text-decoration: underline; color: #158ABE; } a:active { text-decoration: underline; color: red; } MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 17 Styling Tables • Next up, the table. • Let’s use some professional styling here to get a really nice table. • Check out codepen for the full example. • The following styles are for the table header: 44: Text colour 43 th { 44 color:#D5DDE5;; 45: Background colour 45 background:#1b1e24; 46 border-bottom:4px solid #9ea7af; 46: Grey bar at the bottom of the header row 47 border-right: 1px solid #343a45; 48 font-size:15px; 47: Border at the right of header bar 49 font-weight: 100; 48: Font size. 50 padding:14px; text-align:left; 51 49: Font weight (specific value). 52 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 53 vertical-align:middle; 50: Cell padding. 54 } 51: Horizontal text alignment. 52: Text shadow (size and colour). 53: Vertical alignment MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 18 Styling Tables • In the previous CSS, we specified the ’padding’ value. The padding is part of the CSS box model. • Content: The text in the cell. • Padding: space between the text and the border. • Border: The border width and colour. • Margin: Space between the border and other elements. MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 19 Styling Tables • The header row is done, now let’s style the other rows. 56 tr { A row 57 border-top: 1px solid #C1C3D1; 58 border-bottom: 1px solid #C1C3D1; 57, 58: Border of a row 59 color:#666B85; 60 font-size:12px; 59: Text colour font-weight:normal; 61 60: Text size 62 text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); 63 } 61: Text weight (normal – not bold).
Load more

Recommended publications
  • Cloud Fonts in Microsoft Office
    APRIL 2019 Guide to Cloud Fonts in Microsoft® Office 365® Cloud fonts are available to Office 365 subscribers on all platforms and devices. Documents that use cloud fonts will render correctly in Office 2019. Embed cloud fonts for use with older versions of Office. Reference article from Microsoft: Cloud fonts in Office DESIGN TO PRESENT Terberg Design, LLC Index MICROSOFT OFFICE CLOUD FONTS A B C D E Legend: Good choice for theme body fonts F G H I J Okay choice for theme body fonts Includes serif typefaces, K L M N O non-lining figures, and those missing italic and/or bold styles P R S T U Present with most older versions of Office, embedding not required V W Symbol fonts Language-specific fonts MICROSOFT OFFICE CLOUD FONTS Abadi NEW ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Abadi Extra Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Note: No italic or bold styles provided. Agency FB MICROSOFT OFFICE CLOUD FONTS ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Agency FB Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Note: No italic style provided Algerian MICROSOFT OFFICE CLOUD FONTS ABCDEFGHIJKLMNOPQRSTUVWXYZ 01234567890 Note: Uppercase only. No other styles provided. Arial MICROSOFT OFFICE CLOUD FONTS ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Arial Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Arial Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Arial Bold Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ
    [Show full text]
  • Lushootseed Unicode Keyboard Help
    Lushootseed Unicode Keyboard 1.1 Overview Design This Keyman keyboard is designed for Lushootseed, a language of the Pacific Northwest spoken in Washington state. The arrangement of Lushootseed letters on this keyboard closely follow the arrangement of keys in a standard English QWERTY keyboard. On Screen Keyboard This keyboard includes an On Screen Keyboard view for easy reference. The On Screen Keyboard works best when associated with a QWERTY US layout. Fonts This is a Unicode keyboard and works with any Unicode font which has support for Lushootseed characters. Common fonts which work with Lushootseed are: Arial Consolas Arial Unicode MS Courier New Calibri Tahoma Cambria Times New Roman This keyboard also includes the following fonts which work well with Lushootseed: Lushootseed Sulad Gentium Plus Lushootseed School Keyboard Layout Lushootseed Unicode: Unshifted ` 1 2 3 4 5 6 7 8 9 0 - = Backspace © 1 2 3 4 5 6 7 8 9 0 - = Tab q w e r t y u i o p [ ] \ q w ə š t y u i ʷ p [ ] \ Caps Lock a s d f g h j k l ; ' Enter a s d ʔ g h ǰ k l ɬ ' Shift z x c v b n m , . / Shift & x c č b n m , . / Ctrl Alt Alt Ctrl Lushootseed Unicode: Shifted ~ ! @ # $ % ^ & * ( ) _ + Backspace © ! @ # $ % ^ & * ( ) _ + Tab Q W E R T Y U I O P { } ¦ ; < ;ʷ = > kʷ ? { } ¦ Caps Lock A S D F G H J K L : " Enter qʷ dᶻ gʷ Aʷ A B C " Shift Z X C V B N M < > ? Shift &ʷ xʷ E F G H I < > ? Ctrl Alt Alt Ctrl Keyboard Details You can find most keys on the Lushootseed keyboard by thinking of a similar letter in English.
    [Show full text]
  • Suitcase Fusion 8 Getting Started
    Copyright © 2014–2018 Celartem, Inc., doing business as Extensis. This document and the software described in it are copyrighted with all rights reserved. This document or the software described may not be copied, in whole or part, without the written consent of Extensis, except in the normal use of the software, or to make a backup copy of the software. This exception does not allow copies to be made for others. Licensed under U.S. patents issued and pending. Celartem, Extensis, LizardTech, MrSID, NetPublish, Portfolio, Portfolio Flow, Portfolio NetPublish, Portfolio Server, Suitcase Fusion, Type Server, TurboSync, TeamSync, and Universal Type Server are registered trademarks of Celartem, Inc. The Celartem logo, Extensis logos, LizardTech logos, Extensis Portfolio, Font Sense, Font Vault, FontLink, QuickComp, QuickFind, QuickMatch, QuickType, Suitcase, Suitcase Attaché, Universal Type, Universal Type Client, and Universal Type Core are trademarks of Celartem, Inc. Adobe, Acrobat, After Effects, Creative Cloud, Creative Suite, Illustrator, InCopy, InDesign, Photoshop, PostScript, Typekit and XMP are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Apache Tika, Apache Tomcat and Tomcat are trademarks of the Apache Software Foundation. Apple, Bonjour, the Bonjour logo, Finder, iBooks, iPhone, Mac, the Mac logo, Mac OS, OS X, Safari, and TrueType are trademarks of Apple Inc., registered in the U.S. and other countries. macOS is a trademark of Apple Inc. App Store is a service mark of Apple Inc. IOS is a trademark or registered trademark of Cisco in the U.S. and other countries and is used under license. Elasticsearch is a trademark of Elasticsearch BV, registered in the U.S.
    [Show full text]
  • Vision Performance Institute
    Vision Performance Institute Technical Report Individual character legibility James E. Sheedy, OD, PhD Yu-Chi Tai, PhD John Hayes, PhD The purpose of this study was to investigate the factors that influence the legibility of individual characters. Previous work in our lab [2], including the first study in this sequence, has studied the relative legibility of fonts with different anti- aliasing techniques or other presentation medias, such as paper. These studies have tested the relative legibility of a set of characters configured with the tested conditions. However the relative legibility of individual characters within the character set has not been studied. While many factors seem to affect the legibility of a character (e.g., character typeface, character size, image contrast, character rendering, the type of presentation media, the amount of text presented, viewing distance, etc.), it is not clear what makes a character more legible when presenting in one way than in another. In addition, the importance of those different factors to the legibility of one character may not be held when the same set of factors was presented in another character. Some characters may be more legible in one typeface and others more legible in another typeface. What are the character features that affect legibility? For example, some characters have wider openings (e.g., the opening of “c” in Calibri is wider than the character “c” in Helvetica); some letter g’s have double bowls while some have single (e.g., “g” in Batang vs. “g” in Verdana); some have longer ascenders or descenders (e.g., “b” in Constantia vs.
    [Show full text]
  • Annual Report
    [Credits] Licensed under Creative Commons Attribution license (CC BY 4.0). All text by John Hsieh and Georgia Young, except the Letter from the Executive Director, which is by John Sullivan. Images (name, license, and page location): Wouter Velhelst: cover image; Kori Feener, CC BY-SA 4.0: inside front cover, 2-4, 8, 14-15, 20-21, 23-25, 27-29, 32-33, 36, 40-41; Michele Kowal: 5; Anonymous, CC BY 3.0: 7, 16, 17; Ruben Rodriguez, CC BY-SA 4.0: 10, 13, 34-35; Anonymous, All rights reserved: 16 (top left); Pablo Marinero & Cecilia e. Camero, CC BY 3.0: 17; Free This report highlights activities Software Foundation, CC BY-SA 4.0: 18-19; Tracey Hughes, CC BY-SA 4.0: 30; Jose Cleto Hernandez Munoz, CC BY-SA 3.0: 31, Pixabay/stevepb, CC0: 37. and detailed financials for Fiscal Year 2016 Fonts: Letter Gothic by Roger Roberson; Orator by John Scheppler; Oswald by (October 1, 2015 - September 30, 2016) Vernon Adams, under the OFL; Seravek by Eric Olson; Jura by Daniel Johnson. Created using Inkscape, GIMP, and PDFsam. Designer: Tammy from Creative Joe. 1] LETTER FROM THE EXECUTIVE DIRECTOR 2] OUR MISSION 3] TECH 4] CAMPAIGNS 5] LIBREPLANET 2016 6] LICENSING & COMPLIANCE 7] CONFERENCES & EVENTS 7 8] LEADERSHIP & STAFF [CONTENTS] 9] FINANCIALS 9 10] OUR DONORS CONTENTS our most important [1] measure of success is support for the ideals of LETTER FROM free software... THE EXECUTIVE we have momentum DIRECTOR on our side. LETTER FROM THE 2016 EXECUTIVE DIRECTOR DEAR SUPPORTERS For almost 32 years, the FSF has inspired people around the Charity Navigator gave the FSF its highest rating — four stars — world to be passionate about computer user freedom as an ethical with an overall score of 99.57/100 and a perfect 100 in the issue, and provided vital tools to make the world a better place.
    [Show full text]
  • Table of Contents
    CentralNET Business User Guide Table of Contents Federal Reserve Holiday Schedules.............................................................................. 3 About CentralNET Business ......................................................................................... 4 First Time Sign-on to CentralNET Business ................................................................. 4 Navigation ..................................................................................................................... 5 Home ............................................................................................................................. 5 Balances ........................................................................................................................ 5 Balance Inquiry Terms and Features ........................................................................ 5 Account & Transaction Inquiries .................................................................................. 6 Performing an Inquiry from the Home Screen ......................................................... 6 Initiating Transfers & Loan Payments .......................................................................... 7 Transfer Verification ................................................................................................. 8 Reporting....................................................................................................................... 8 Setup (User Setup) .......................................................................................................
    [Show full text]
  • Loopagroup - Travel Network Logo and Website
    Loopagroup - Travel Network Logo and Website By Erica Dang Department of Art & Design College of Liberal Arts Cal Poly, San Luis Obispo March 2009 Abstract This report contains information on working with a client and the internet, designing a travel network’s logo and website look and feel. Table of Contents Chapter 1: Introduction . 1 Statement of Problem Purpose or Objective of Study Limitations of the Study Chapter 2: Review of Research . 3 Chapter 3: Procedures and Results . 5 Chapter 4: Summary and Recommendations . 26 Bibliography . 28 i Chapter 1 – Introduction Statement of Problem: Level Studios in San Luis Obispo is looking to create a travel network logo and web site. Purpose or Objective of the Study: When it was time to choose a senior project, I examined my portfolio and looked for areas of graphic design that were missing, such as web design. This project will show that I am a well rounded designer. Many companies are now looking for web designers and knowing how the web works is helpful. Limitations of the Study: Some limitations were lack of time, travel issues, conflicting schedules for meetings and consultations, and limited web font selections. For example, most of the meetings took place Monday nights. However, sometimes the clients had to stay late at work and could not make it to some meetings. When there was a Monday holiday, some members of the group were out of town and could not meet. Regarding typography, the client saw all serif fonts fit for the web appeared the same. Common fonts to all versions of Windows and Mac equivalents are: Arial, Arial Black, Helvetica, Gadget, Comic Sans, Courier New, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Lucida Grande, Monaco, Palatino, Book Antiqua, Tahoma, Trebuchet, Verdana, Symbol, and Webdngs.
    [Show full text]
  • Fonts Installed with Each Windows OS
    FONTS INSTALLED WITH EACH WINDOWS OPERATING SYSTEM WINDOWS95 WINDOWS98 WINDOWS2000 WINDOWSXP WINDOWSVista WINDOWS7 Fonts New Fonts New Fonts New Fonts New Fonts New Fonts Arial Abadi MT Condensed Light Comic Sans MS Estrangelo Edessa Cambria Gabriola Arial Bold Aharoni Bold Comic Sans MS Bold Franklin Gothic Medium Calibri Segoe Print Arial Bold Italic Arial Black Georgia Franklin Gothic Med. Italic Candara Segoe Print Bold Georgia Bold Arial Italic Book Antiqua Gautami Consolas Segoe Script Georgia Bold Italic Courier Calisto MT Kartika Constantina Segoe Script Bold Georgia Italic Courier New Century Gothic Impact Latha Corbel Segoe UI Light Courier New Bold Century Gothic Bold Mangal Lucida Console Nyala Segoe UI Semibold Courier New Bold Italic Century Gothic Bold Italic Microsoft Sans Serif Lucida Sans Demibold Segoe UI Segoe UI Symbol Courier New Italic Century Gothic Italic Palatino Linotype Lucida Sans Demibold Italic Modern Comic San MS Palatino Linotype Bold Lucida Sans Unicode MS Sans Serif Comic San MS Bold Palatino Linotype Bld Italic Modern MS Serif Copperplate Gothic Bold Palatino Linotype Italic Mv Boli Roman Small Fonts Copperplate Gothic Light Plantagenet Cherokee Script Symbol Impact Raavi NOTE: Trebuchet MS The new Vista fonts are the Times New Roman Lucida Console Trebuchet MS Bold Script newer cleartype format Times New Roman Bold Lucida Handwriting Italic Trebuchet MS Bold Italic Shruti designed for the new Vista Times New Roman Italic Lucida Sans Italic Trebuchet MS Italic Sylfaen display technology. Microsoft Times
    [Show full text]
  • Frequently Asked Questions
    AfterThoughts is an occasional publication of After Hours Macintosh Consulting. An inde- pendent Apple Macintosh™ service firm in North Carolina’s Triangle (Raleigh, Durham, Chapel Hill). For subscription information via email: [email protected] http://home.att.net/~afterhoursconsulting/ (919-271-7479 voice, 919-788-0099 fax) ©1999 After Hours, all rights reserved. Volume 1, Number 4, July 1999 Bits & Pieces proved so popular last month that we’ve run a follow-up here. Update news: Iomega has yet another Tools update available on their website for download. • Adobe announced in May that there are several document- ed problems with PageMaker 6.5.2 and Apple’s OS 8.6. Printing seems to be the biggest headache, with Type 1 & 2 errors, PostScript errors and other headaches all too reproduceable with that combination of software. Adobe recommends that users of PageMaker DO NOT update to OS 8.6 until the matter is resolved. There are some workarounds: Printing EPS seems to be a major culprit -- so convert EPS to text prior to printing. Don’t place Illustrator files directly into PM; instead, save the Illustrator file into some other format, then place. Placing ASCII text is a no-go, instead -- cut and paste your text into PM. PDFs will not place (no way around that devil for now). There’s more, so do some homework. Visit our website for links to Adobe’s site. • Netscape has released Communicator 4.6. No major changes, and lots of minor bug fixes make using it less frustrating than ever. We feel Netscape still has a way to go to properly handle file downloads, but they are getting there.
    [Show full text]
  • Standard Fonts List Used for Poster Creation
    Standard Fonts List used for Poster Creation Please use any of the fonts listed below when designing your poster. These are the standard fonts. Failure to comply with using a standard font, will result in your poster not printing correctly. 13 Misa Arial Rounded MT Bold Bodoni MT 2 Tech Arial Unicode MS Bodoni MT Black 39 Smooth Arno Pro Bodoni MT Condensed 4 My Lover Arno Pro Caption Bodoni Poster MT Poster Compressed Abadi Condensed Light Arno Pro Display Book Antiqua ABCTech Bodoni Cactus Arno Pro Light Display Bookman Old Style ABSOLOM Arno Pro Smdb Bookshelf Symbol 7 Adobe Calson Pro Arno Pro Smdb Caption Bradley Hand ITC Adobe Calson Pro Bold Arno Pro Smdb Display Britannic Bold Adobe Fangsong Std R Arno Pro Smdb SmText Broadway Adobe Garamond Pro Arno Pro Smdb Subhead Brush Script MT Adobe Garamond Pro Bold Arno Pro SmTest Brush Script Std Adobe Heiti Std R Arno Pro Subhead Calibri Adobe Kaiti Std R Baskerville Old Face Californian FB Adobe Ming Std L Bauhous 93 Calisto MT Adobe Myungjo Std M Bell Gothic Std Black Cambria Adobe Song Std L Bell Gothic Std Light Cambria Math Agency FB Bell MT Candara Albertus Extra Bold Berlin Sans FB Castellar Albertus Medium Berlin Sans FB Demi Centaur Algerian Bernard MT Condensed Century AlphabetTrain Bickham Script Pro Regular Century Gothic Antique Olive Bickham Script Pro Semibold Century Schoolbook Arial Birch Std CG Omega Arial Black Blackadder ITC CG Times Arial Narrow Blackoak Std 1 Standard Fonts List used for Poster Creation Please use any of the fonts listed below when designing your poster.
    [Show full text]
  • Webtypogrphy Inforgraphic.Graffle
    THE NEW WEB TYPOGRAPHY #1 WHAT IS A WEBFONT? + Although it is estimated that there are more than one hundred fifty thousand different digital fonts, that does not mean you can 150,000 legally use them in your web designs as webfonts. Fonts are small pieces of software subject to End User License Agreements (EULAs) which control what you can and can not legally do with them. Most fonts do not include the right to use the font with ✗ALL DIGITAL FONTS@font-face, so you should not use them. If in doubt, check with the font manufacturer before using as a webfont. f f 10! 182! 40,000@+ ! ✔CORE WEB FONTS ✔WEB SAFE FONTS ✔WEBFONTS Microsoft licensed ten typefaces to be installed on all PCs. Both Mac and Windows computers have a list of fonts that Webfonts are downloadable font file that can be used by a Apple also provided the same fonts, making them the most are always installed. Additionally, commonly installed Web browser to display text. Webfonts come in different commonly available typefaces, and thus the default choice software such as Microsoft Office and Apple iLife include formats which are supported by different browsers, but for most designers. The list originally included 11 typeface, more fonts. From this, we can derive a list of one-hundred virtually all browsers support Webfonts now, including but Microsoft no longer includes Andale Mono. eighty-two additional fonts that are commonly installed on Internet Explorer. Of the 100K digital fonts, around forty most computers. For the full list, visit http://bit.ly/web- thousand have been licensed for @font-face usage and the safe-fonts .
    [Show full text]
  • Proquest Dissertations
    TYPEFACE PERSONALITY TRAITS AND THEIR DESIGN CHARACTERISTICS Ying Li A Thesis In The Department of Computer Science and Software Engineering Presented in Partial Fulfillment of the Requirements For the Degree of Master of Computer Science at Concordia University Montreal, Quebec, Canada November 2009 © Ying Li, 2009 Library and Archives Bibliothèque et 1*1 Canada Archives Canada Published Heritage Direction du Branch Patrimoine de l'édition 395 Wellington Street 395, rue Wellington Ottawa ON K1A 0N4 Ottawa ON K1A 0N4 Canada Canada Your file Votre référence ISBN: 978-0-494-71016-6 Our file Notre référence ISBN: 978-0-494-7 1 0 1 6-6 NOTICE: AVIS: The author has granted a non- L'auteur a accordé une licence non exclusive exclusive license allowing Library and permettant à la Bibliothèque et Archives Archives Canada to reproduce, Canada de reproduire, publier, archiver, publish, archive, preserve, conserve, sauvegarder, conserver, transmettre au public communicate to the public by par télécommunication ou par l'Internet, prêter, telecommunication or on the Internet, distribuer et vendre des thèses partout dans le loan, distribute and sell theses monde, à des fins commerciales ou autres, sur worldwide, for commercial or non- support microforme, papier, électronique et/ou commercial purposes, in microform, autres formats. paper, electronic and/or any other formats. The author retains copyright L'auteur conserve la propriété du droit d'auteur ownership and moral rights in this et des droits moraux qui protège cette thèse. Ni thesis. Neither the thesis nor la thèse ni des extraits substantiels de celle-ci substantial extracts from it may be ne doivent être imprimés ou autrement printed or otherwise reproduced reproduits sans son autorisation.
    [Show full text]