Responsive Typography
|
|
|
- Rolf Chandler
- 6 years ago
- Views:
Transcription
1 Responsive Typography Design for Meaning, Not for Screen Size NEWDcamp 1 November, 2014
2 What We ll Cover + Lies & deceptions about art & science + Understanding the value of hats + What is Responsive Typography + Practicing the Four P s
3 Art & Science: A Historical Romance DaVinci? That guy would code Vermeer: Master or Technician? Tim Jenison Artist or Inventor?
4 Is Tim an artist or is Tim an inventor? I think the problem is not trying to pick one of these things for Tim to be the problem is that we have that distinction -Penn Jillette in Tim s Vermeer
5 Art+Science
6 Design+Development
7
8 Art is inherently tied to the technology we use to create it No matter how much we try to ignore it
9 When is our industry going stop calling it web via twitter
10 We can t. + (Insert Ginger Rogers analogy here) + Encompasses all of what you know about type & its use but + Typography on the web requires additional consideration (art & science) + Our canvas is fluid; constantly expanding & contracting + Reading on screens will only increase
11 Type Is the Voice of Your Words + Words have meaning, but letters have emotion I love you
12 Type Is the Voice of Your Words + Words have meaning, but letters have emotion I love you
13 Type Is the Voice of Your Words + Words must first be read before they can be understood Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
14 Type Is the Voice of Your Words + Words must first be read before they can be understood Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
15 Type Is the Voice of Your Words + Legible means you can read it + Readable means you might actually want to A tale of a curious affliction
16 Type Is the Voice of Your Words + Legible means you can read it + Readable means you might actually want to A tale of a curious affliction
17 Focus on What s Left: Typography
18 Focus on What s Left: Typography
19 Focus on What s Left: Typography
20 Focus on What s Left: Typography
21 Responsive Typography: Four Simple Steps + Performance: select fonts with care, load what you need & don t block the page draw + Progressive: plan for failure, tune up the loading process & fallback fonts to minimize FOUT + Proportion: small screens demand subtle scale + Polish: Design IS the details: OpenType & then some
22 Performance
23 Performance Matters + Great typography isn t I used all of them + Load only what you need Trade Gothic Next LT Pro Bold this is a typeface this is a font +Each font has a performance cost, so budget wisely
24 Performance Matters
25 Performance Matters
26 Progressive Performance
27 Progressive Enhancement
28 FOUT is OUR fault
29 FOUT is OUR fault
30 FOUT is OUR fault + Use these:.wf-inactive /.wf-active + This CSS results in a blank screen during load: body { font-family: Trade Gothic, helvetica, arial; } + Add this & give them content, then fonts:.wf-inactive body { font-family: helvetica, arial; } + Adjust font-size, line-height, letter-spacing to avoid jumpiness + Making it easy since 2010
31 Progressively Enhance Web fonts loaded
32 Progressively Enhance No web fonts, uncorrected
33 Progressively Enhance No web fonts, corrected
34 Progressively Enhance Web fonts loaded
35 Progressively Enhance body { font-family:"roboto", Helvetica, "Lucida Sans", sans-serif; font-size: 1em; letter-spacing: normal; line-height: 1.4em; }.wf-inactive body { font-family: Helvetica, "Lucida Sans", sans-serif; font-size: 1em; letter-spacing: em; line-height: 1.4em; }
36 Proportion
37 Proportion: one size won t do
38 Desktop geese & handheld gander + Small canvas requires subtle proportions + What works in print works in print + Robert Bringhurst matters, but scale must adapt
39 For example
40 For example
41 For example h1 { font-size: 2em; line-height: 1.25; margin-top: em; margin-bottom: em; (min-width: 43.75em) { h1 { font-size: 2.5em; letter-spacing: normal; line-height: 1.125; margin-top: em; margin-bottom: em; } (min-width: 56.25em) { h1 { font-size: 3em; letter-spacing: normal; line-height: 1.05; margin-top: em; margin-bottom: em; } }
42 Polish
43 Polish: Don t Forget Fit & Finish
44 Polish: Don t Forget Fit & Finish
45 Polish: Don t Forget Fit & Finish h1 { font-family: Playfair Display", Georgia, serif; font-feature-settings:"clig" 1,"dlig" 1,"frac" 1,"liga" 1; }
46 Polish: Don t Forget Fit & Finish
47 Polish: Don t Forget Fit & Finish
48 Polish: Don t Forget Fit & Finish #main-content p:first-of-type:first-letter,.lt-ie9 #main-content h1 + p:first-letter { font-size: 3em; font-family: "Playfair Display", Georgia, "Times New Roman"; font-weight: bold; line-height: 0.9; display: block; float: left; padding-right: 0.15em; padding-top: 0; }
49 Polish: Don t Leave Orphans Behind + Typogrify FTW:
50 Polish: Don t Leave Orphans Behind + Typogrify FTW: Also try Widowtamer for JS drop-in solution:
51 Polish: Don t Leave Orphans Behind + Typogrify FTW: Also try Widowtamer for JS drop-in solution: + Seems small, but has oversized impact to user & editor
52 A Little in Abundance is a Lot + Use max-width on elements to keep text (min-width: 58em) { p { max-width: 38em; } } + CSS3 brings character counts, but not universal (vw & vh, ch & cx) + EMs or REMs, but no PX + Don t forget: use real content! Because Lorem Ipsum is a poseur
53 New Tricks + Emerging attributes: font-size-adjust & font-smoothing + The future is here; it s just not evenly distributed + Try text-rendering engine detection combined w/font-smoothing adjustments ( courtesy
54 True Life Story
55 True Life Story -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
56 A Perfect Page or at least a far better start
57 Inspiration + Oversize 2-level header + Stylized subhead + Byline + Large initial cap + Inset photo + Pull-quote
58 Frustration
59 Realization + Oversize 2-level header + Stylized subhead + Byline + Large initial cap + Inset photo + Pull-quote + Virtually no extra markup necessary + Fully responsive
60 Realization
61 Responsive Web Typography + Yes, it s a thing + It s about adapting to screen size, network speed & device capabilities + It s about designing for what s next Last Winter Olympics: there was no ipad The one before? No iphone either
62 Responsive Web Typography + Performance Stats, Platforms & Screen Tests + Progression (It s the web. Stuff breaks) If the font fails, does your design hold up? + Proportion It s about composition (think: small paintings) + Polish Great typography is greater than the sum of its parts
63 Just out!
64 Coming Up:
65 DrupalPVD + 2nd Wednesday every month + Brief presentations, mentoring and mixing + Sign up:
66 Thank You Jason Pamental Slides: Code:
Responsive Typography
Responsive Typography Designing for Readability & Meaning on Any Screen CSS Summit #CSSSUMMIT 15th July, 2014 Jason Pamental @jpamental http://hwdesignco.com Who Am I? Who Am I? Jason Pamental (@jpamental)
Type, Responsively. Design for Readability & Meaning on Any Screen. DrupalCon Austin #DrupalCon 23rd May, 2014
Type, Responsively Design for Readability & Meaning on Any Screen DrupalCon Austin #DrupalCon 23rd May, 2014 Jason Pamental @jpamental http://hwdesignco.com Who Am I? + Co-founder of + Co-founder of +
WEB 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
Styling Web Applications Presented by Roel Fermont
Styling Web Applications Presented by Roel Fermont As Graphic Designer at Data Access, I have helped many developers making wellrunning applications look great. I ll show you what great results can be
Font, 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
Introduction 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!
Typography. 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 &
Putting Arial Out To Pasture
Web Typography & Drupal Putting Arial Out To Pasture DrupalCon London 23 August 2011 Jason Pamental (@jpamental) thinkinginpencil What We ll Cover Design & Typography: what & why Web Fonts: How they work
Web Application Styling
1 PRESENTED BY ORYX Web Application Styling Presented by Roel Fermont & Harm Wibier 2 Todays goals is to learn how to make your highly functional applications look great! We ll show you where to start
> 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? 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]](/thumbs/88/117283063.jpg "> 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
EPUB in the Wild. Liz
EPUB in the Wild Liz Castro @lizcastro http://pigsgourdsandwikis.com http://www.elizabethcastro.com/epub Specifications Specifications Specifications Specifications Specifications Specifications Specifications
limelightplatform.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.
BRAND ASSETS AND GUIDELINES
BRAND ASSETS AND GUIDELINES PAS Brand Guidelines 2 The PAS Brand The PAS visual style uses a bold, energetic aesthetic. The focus is on personality and good vibes allowing for a deeper connection with
Document 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
Let 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
CSS. 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
CMPT 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
A 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.
Lab Introduction to Cascading Style Sheets
Lab Introduction to Cascading Style Sheets For this laboratory you will need a basic text editor and a browser. In the labs, winedt or Notepad++ is recommended along with Firefox/Chrome For this activity,
ACSC 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
CSS 1: Introduction. Chapter 3
CSS 1: Introduction Chapter 3 Textbook to be published by Pearson Ed 2015 in early Pearson 2014 Fundamentals of Web http://www.funwebdev.com Development What is CSS? You be styling soon CSS is a W3C standard
Module 2 (VII): CSS [Part 4]
![Module 2 (VII): CSS [Part 4]](/thumbs/93/113838411.jpg "Module 2 (VII): CSS [Part 4]")
INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals
CSC309 Programming on the Web week 3: css, rwd
CSC309 Programming on the Web week 3: css, rwd Amir H. Chinaei, Spring 2017 Office Hours: M 3:45-5:45 BA4222 ahchinaei@cs.toronto.edu http://www.cs.toronto.edu/~ahchinaei/ survey 1 in survey 1, you provide
DESIGNING THE PAGE FOUNDATIONS OF DIGITAL DESIGN. Layout composition, the grid and typography. Prof. Eva Machauf
DESIGNING THE PAGE Layout composition, the grid and typography FOUNDATIONS OF DIGITAL DESIGN Prof. Eva Machauf prof.machauf@gmail.com THE GRID The grid is the foundation of all design. Creating and working
CSS. https://developer.mozilla.org/en-us/docs/web/css
CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties
Publishing Conventions
Publishing Conventions Monica Johnstone, PhD Dir. of CLAS Communications & Advancement Better Newsletters Have Approved GVSU logo Masthead and Table of Contents Page Numbers and End Signs Appropriate Fonts
Type on the Web: Dos, Don ts and Maybes Ilene Strizver
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
HTML & CSS November 19, 2014
University of Nebraska - Lincoln DigitalCommons@University of Nebraska - Lincoln Digital Humanities Workshop Series Center for Digital Research in the Humanities 11-19-2014 HTML & CSS November 19, 2014
OUR 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
Typesetting 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
BRAND. 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
font pairing FONT PAIRINGS GCEF
font pairing As the saying goes, type is a beautiful group of letters, not a group of beautiful letters. ~Matthew Carter image as a designer ASSETS and type Two Functions of Type In order for your type
Typographic. 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...
CSS. Shan-Hung Wu CS, NTHU
CSS Shan-Hung Wu CS, NTHU CSS Zen Garden 2 Outline The Basics Selectors Layout Stacking Order 3 Outline The Basics Selectors Layout Stacking Order 4 Grammar selector { property: value; 5 Example /* for
ASMP Website Design Specifications
Page 1 ASMP Website Design Specifications Page 2 All Pages 130 pixels (background = #ffffff) 100 pixels (background = #000000) Header Bar Use logo provided in PSD file. Match size and placement. AMERICAN
Media Types & Media Features
Media Types & Media Features Same HTML, Different CSS R. Scott Granneman r Jans Carton 1.6 2008 R. Scott Granneman Last updated 2018-08-21 You are free to use this work, with certain restrictions. For
Logo 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.
Creating Large Format Posters Using PowerPoint TIP SHEET. Before you begin working in PowerPoint, sketch out your poster on paper.
Creating Large Format Posters Using PowerPoint TIP SHEET INTRODUCTION The ideal poster is designed to: o Tell a story o Provide a brief overview of your work o Initiate discussion o Stand alone when you
Media-Specific Styles
Media-Specific Styles Same HTML, Different CSS R. Scott Granneman r Jans Carton 1.5 2008 R. Scott Granneman Last updated 2017-06-13 You are free to use this work, with certain restrictions. For full licensing
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
Knightswood Secondary School. Graphic Communication. Desktop Publishing otes. Auto Tracing
Auto Tracing The process of converting a bit mapped image into a vector image. In a bit-mapped image, each object is represented by a pattern of dots, while in a vector image every object is defined geometrically.
ABOUT 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
BETTER LOOKING S
BETTER LOOKING EMAILS First impressions matter. So if you want a positive response to your email campaign you need to make a positive first impression. Here are some simple design strategies to help you
Accessible 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
BBN 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
Web Style Guide. May 15, 2010
2667 N. 2667 Washington N Washington Blvd. Blvd. North Ogden, Odgen, Utah 84654 84414 801-416-2136 801-782-3920 www.castlecreekpd.com email: info@castlecreekpd.com Web Style Guide May 15, 2010 This is
Part 01: Logo, Typography & Colours. Brand Identity Guidelines 2015
Part 01: Logo, Typography & Colours Brand Identity Guidelines 2015 At a glance Logo Typography ITC Caslon No. 224 Univers Georgia Arial The core elements of the Arts Council identity makes our brand instantly
PLANNING. CAEL Networked Worlds WEEK 2
PLANNING CAEL5045 - Networked Worlds WEEK 2 WEEK 2 CHOOSING COLOURS CHOOSING FONTS COLLECTING CONTENT PLANNING STRUCTURE WIREFRAMES + MOCKUPS Every colour, including black and white, has implications for
CSS: Responsive Design, CSS3 and Fallbacks
CSS: Responsive Design, CSS3 and Fallbacks CISC 282 October 4, 2017 What is a Mobile Browser? Browser designed for a not-desktop display Phones/PDAs, tablets, anything handheld Challenges and constraints
F 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
Chapter 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
Design that Enhances Readability
Working to ensure that all Americans get enrolled and stay enrolled in our nation s health care system Design that Enhances Readability By Eva Anderson Nicole Donnelly Joan Winchester Penny Lane MAXIMUS
Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
Developing successful posters using Microsoft PowerPoint
Developing successful posters using Microsoft PowerPoint PRESENTED BY ACADEMIC TECHNOLOGY SERVICES University of San Diego Goals of a successful poster A poster is a visual presentation of your research,
HIERARCHICAL ORGANIZATION
A clearly defined home page Navigation links to major site sections HIERARCHICAL ORGANIZATION Often used for commercial and corporate websites 1 Repetition DESIGN PRINCIPLES Repeat visual elements throughout
Creating Charts and Graphs to Visualize and Trend Your Business Metrics. Richard Iriye, RPh Kathy Costello, RN Kelly Britt, RPh
Creating Charts and Graphs to Visualize and Trend Your Business Metrics Richard Iriye, RPh Kathy Costello, RN Kelly Britt, RPh Learning to Build an Impressive Business Report using Content, Design, Format,
.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in; } .tube {
.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in;.tube { color: #996600; height: 3in; width: 12in; position: fixed; What is CSS? Cascading Style Sheets CSS is responsible
Introduction to Computer Science Web Development
Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 9 Lecture Outline Text Styling Some useful CSS properties The Box Model essential to
Creating Charts and Graphs to Visualize and Trend Your Business Metrics
Creating Charts and Graphs to Visualize and Trend Your Business Metrics Richard Iriye, RPh Kathy Costello, RN Kelly Britt, RPh Learning to Build an Impressive Business Report using Content, Design, Format,
The Benefits of CSS. Less work: Change look of the whole site with one edit
11 INTRODUCING CSS OVERVIEW The benefits of CSS Inheritance Understanding document structure Writing style rules Attaching styles to the HTML document The cascade The box model CSS units of measurement
Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo
Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Note: We skipped Study Guide 1. If you d like to review it, I place a copy here: https:// people.rit.edu/~nbbigm/studyguides/sg-1.docx
Getting your work online. behance.net cargo collective krop coroflot
Getting your work online behance.net cargo collective krop coroflot behance online presence behance.net has a free and pro version. The free version is fine for getting internships. Free Version Pros networked
BASIC ABOUT TYPE TYPO GRAPHY
BASIC ABOUT TYPE TYPO GRAPHY TYPOGRAPHY BASIC DESIGN Relative & Absolute measurements Absolute measurements Inche : Millimetres : Points : Pica 3 Inches 76.2 mm 216 Points 18 Picas 1 Inches = 3 Picas A
TYPOGRAPHY. 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
Designing 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"
Floats, Grids, and Fonts
Floats, Grids, and Fonts Computer Science and Engineering College of Engineering The Ohio State University Lecture 17 Recall: Blocks, Inline, and Flow flow body inline paragraph heading horz rule blocks
InDesign. 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.
HTML and CSS: An Introduction
JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction
Web 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
PUBLISHER SPECIFIC CSS RULES
PUBLISHER SPECIFIC CSS RULES Solita Oy Helsinki Tampere Oulu 26.1.2016 2 (24) Document History Version Date Author Description 0.1 August 17, 2015 J. Similä First draft 0.2 January 26, 2015 A. Autio Fixed
Style Guide & Specifications
Style Guide & Specifications Introduction This style guide has been developed to assist you in the production and maintenance of the new MultiChannel Merchant website and newsletters. The recommendations
Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.
Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.
Reading 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
COSC 2206 Internet Tools. CSS Cascading Style Sheets
COSC 2206 Internet Tools CSS Cascading Style Sheets 1 W3C CSS Reference The official reference is here www.w3.org/style/css/ 2 W3C CSS Validator You can upload a CSS file and the validator will check it
Multimedia Elements Text and Graphics
Multimedia Elements Text and Graphics OBJECTIVES Use text in multimedia applications Use text on the Web Understand software for working with text Use graphics in multimedia applications Understand graphic
CMPT 165 Advanced XHTML & CSS Part 3
CMPT 165 Advanced XHTML & CSS Part 3 Oct 15 th, 2015 Today s Agenda Quick Recap of last week: Tree diagram Contextual selectors CSS: Inheritance & Specificity Review 1 exam question Q/A for Assignment
Modifying 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
Reading and Typography. Contributions from Bill Cowan, Byron Weber Becker, Michael Terry, and Designing with the Mind in Mind.
Reading and Typography Contributions from Bill Cowan, Byron Weber Becker, Michael Terry, and Designing with the Mind in Mind. Reading 2 We re Wired for Language; not Reading Children exposed to spoken
Appendix D CSS Properties and Values
HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by
Web Designer s Reference
Web Designer s Reference An Integrated Approach to Web Design with XHTML and CSS Craig Grannell Graphical navigation with rollovers The final exercise in this chapter concerns navigation with graphical
IDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 5 IDM 221: Web Authoring I 2 Working With Text IDM 221: Web Authoring I 3 Special Characters IDM 221: Web Authoring I 4 > < & IDM 221: Web Authoring
CSS WHAT IS IT? HOW DOES IT WORK? (LOOK N GOOD)
CSS (LOOK N GOOD) CSS is short for Cascading Style Sheets. This is the stuff that allows you to add formatting and styling your web pages. WHAT IS IT? Let me show you HOW DOES IT WORK? If you have a headline
Knowing how to use white space can be an effective tool in your design arsenal.
Knowing how to use white space can be an effective tool in your design arsenal. Let s start by addressing the elephant in the room white space (also known as negative space) isn t actually white. Don t
Chapter 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
ITSE 1401 Web Design Tools Lab Project 4 (Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14
(Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14 Directions: Perform the tasks below on your personal computer or a lab computer. Professor Smith shows the score points for each activity in parentheses.
Responsive Grid. Grid Variations. Built with responsive 12 column grid, layouts and components. LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER
WEB STYLE GUIDE School of Medicine Styleguide LAYOUT Responsive Grid Built with responsive 12 column grid, layouts and components. Grid Variations One Column LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER
CSS Module in 2 Parts
CSS Module in 2 Parts So as to familiarize yourself with the basics of CSS before moving onto Dreamweaver, I d like you to do the 2 following Modules. It is important for you to AT LEAST do Part 1. Part
Content First! Jeffrey Zeldman
Content First! Jeffrey Zeldman Think about what your users want and the content they need before thinking about tools and features. Remember content is often separated from your design so it shouldn t
User-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,
INTRODUCTION 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
Session 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
Back in the good old days type was set by hand using printing presses.
CSS LINE-HEIGHT What is leading? Back in the good old days type was set by hand using printing presses. Printed material was created by setting out letters in rows. Each letter was created on an individual
8/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
CSS gives great power. But requires great responsibility.
CSS gives great power. But requires great responsibility. You can do almost anything with CSS. You can do almost anything with CSS. Change colors You can do almost anything with CSS. Change colors, opacity
Introduction to WEB PROGRAMMING
Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
CSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
Visual Identity Guidelines. Abbreviated for Constituent Leagues
Visual Identity Guidelines Abbreviated for Constituent Leagues 1 Constituent League Logo The logo is available in a horizontal and vertical format. Either can be used depending on the best fit for a particular
Getting Started with Eric Meyer's CSS Sculptor 1.0
Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly
Typography 2! HCC 710 2/1 /13. Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County
Typography 2! HCC 710 2/1 /13 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Letterform Critiques! 25-30 minutes 2, Wordpress Questions / " Graphic Design Inspirations! 3, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County
Typography/ Layout and Design
Typography/ Layout and Design What is typography? It s the study and science of fonts. Using typography is almost an art, and it takes practice to learn to use it correctly. Type is not just text that