Lecture 3: Typography, layout, and design..  What we’ll be designing.  Layout  Navigation  Content on a grid.  Examples of how sites are commonly.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets
Advertisements

Tutorial 4: Creating page layout with css
More Information on Graphic Design & Color: A few pointers for your websites & other e- publications Dr. Jennifer Bowie.
Principles of Typography
Week 7 Web Typography. 2 Understanding Type Design Principles.
Chapter Concepts Discuss Fonts Understand Fonts
Meaningful Jargon Or, All You Need to Know to Speak Like a Geek Design and Typography 3/3/98.
The Use of Typography in Print and Electronically. [typography] “exists to honour content” Robert Bringhurst, The Elements of Typographical Style.
Visual Organization and Website Design Unit 5 (no CSS) September 19.
Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)
1.01A – What typefaces should be used for various displays?????
1.01 Investigate typefaces and fonts.
Typography and Space for Web Design Important Issues From Web Style Guide.
Web Design – Sec 4-6 and 4-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Typography is the strategic use of type to create texture, hierarchy, organization, and clear communication.
Elements of Visual Interface Design. Overview Layout Grid Systems Visual Flow Typography Typefaces Typographic Guidelines Colour Basics Materials & shape.
Unit 4 – Multimedia Element: Text
Typography 2.01 Investigate typefaces and fonts..
Chapter 9 Text. So, chapter 10 is about Photography, now Chapter 9 is about text What should it look like, how big should it be, how do colors contrast,
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
INTRO TO TYPOGRAPHY BASICS Graphic Design II. What is Typography? the art or process of printing with type. In every piece of type you see, somebody has.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.
Chapter 7. Designing Documents and Web Sites © 2013 by Bedford/St. Martin's1 Document and Web design has five goals: to make a good impression on readers.
Page Layout with CSS Learning Web Design: Chapter 16.
Web Page Design Principles
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
Lesson 05 // Web Design, Layout & Structure 1.Web Design/Designer-Coder Relationship 2.Fixed vs Fluid Website Layouts 3.Screen Resolutions.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts.
Fonts and Typography Section 7.3. Typography Typography: the style, arrangement, and appearance of text Well designed text makes your page more readable.
Web Site Design: Layout Fall Basic Concepts Basic Web Design Concepts – Proximity – Alignment – Repetition – Contrast
Typography Graphic Design Fundamentals
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Subject Name: Graphic Design Subject Code: 9642 Md. Ataur Rahman Instructor (Design & Printing) M.CSE, B.CSE.
Typography 1.01 Investigate typefaces and fonts. (Rev. 2011)
TYPOGRAPHY What is Typography?
Color Aesthetics Weinman, chapter 2 Terms, color themes and relationships, type, layout Aesthetics a guiding principle in matters of artistic beauty and.
Typography A Key Element in Design A. Definition of Typography Typography is the appearance and arrangement of the characters that make up text on a page.
Words are communication. What do they say? The meaning should come before the look of the type is considered. Choose typographic styles and sizes that.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)
Principles of Typography
Cascading Style Sheets for layout
CS3220 Web and Internet Programming CSS Basics
Understanding and Applying Typography in CSS
Typography Typography is the art and technique of creating and composing type in order to convey a message. Words are communication. What do they say?
Basic Desktop Terminology
Applying Typography in CSS
Chapter 9 Layout and Design
Cascading Style Sheets for layout
Understanding and Applying Typography in CSS
2.01 Investigate typefaces and fonts.
Creating a Baseline Grid
Layout Terms Visual Hierarchy
Microsoft Word Illustrated
2.01 Investigate typefaces and fonts.
Fixed Positioning.
Principles of Typography
CMPE 280 Web UI Design and Development September 4 Class Meeting
Typography is the strategic use of type to create texture, hierarchy, organization, and clear communication.
Desktop Publishing Terminology
Module 6.
CS3220 Web and Internet Programming CSS Basics
CMPE 280 Web UI Design and Development February 7 Class Meeting
CS3220 Web and Internet Programming CSS Basics
Digital Media Notes Your Name.
Laying out Elements with CSS
Layout Terms Visual Hierarchy
Session IV Chapter 15 - How Work with Fonts and Printing
Various mobile devices
Presentation transcript:

Lecture 3: Typography, layout, and design.

 What we’ll be designing.  Layout  Navigation  Content on a grid.  Examples of how sites are commonly laid out.  Typography:  Choosing fonts.  Serif  Old-style  Transitional  Modern  Sans-serif  Grotesque  Neo-grotesque  Geometric  Humanist  Alignment  Line spacing.  Kerning, tracking, and leading.  Width  “Fixed width”  “Fluid width”

(The finished files are at and second.css).

 Websites typically have several standard features:  A heading, emphasizing a name/logo.  A navigation bar. ▪ Usually on the top or left, sometimes on the right or bottom.  Content ▪ The text and graphics the viewer has come to your site to see (and what you want search engines to look at most).

Navigation Content Heading Content Good for text-heavy sites with few pages; combines navigation + name. Good for text-heavy sites with more pages; prevents the navigation from increasing the width of the page. Heading Content Commonly used on interactive sites with advertisements (e.g. Facebook) Heading Content Footer Good when users may wish to perform an action on any page of a site.

 Fixed-width designs have a set width, beyond which no content will be shown.  This width is often given in a unit such as px or em.  Typically, the content is centered on the page so as not to leave a large amount of whitespace in one direction.  Primary advantages: more consistent appearance across screen resolutions.  Primary disadvantages: poor use of available screen space, may require horizontal scrolling on smaller resolutions than the one the site is designed for.  Fluid layouts size themselves to the browser window.  Typically, the content flows from one end of the screen to the other.  Widths are often given in the % unit (100% is the width of the browser).  Primary advantage: makes maximum possible use of screen space, no matter how large or small the resolution is.  Primary disadvantages: images and other elements have fixed widths anyway, so a min-width may still need to be imposed. In this case, horizontal scrolling may still take place. Sites may also look “strange” on very large or very small resolutions.  Fluid designs are good for text-heavy sites.

The content fits nicely within a 1071x1015 window. The content does not change size as the page grows; it is merely centered. body { width: 1024px; }

The content sizes itself to the browser window, regardless of its size. #WelcomeSection { width: 50%; }

 An element that floats will jump to the left or right of the page, and text and other content will wrap around and under it.  An element is floated left or right using the CSS rules “float: left;” and “float: right;”, respectively.  This is an effect used often in newspaper articles. (Floating right) (Floating left)

 Floating is also used as the basis for two and three-column layouts.  Note that content wraps around a float.  So give the float a height equal to the rest of the content and it will all wrap around the float. First column content. (float: left; height: 2.75in; width: 1.92in) The rest of the content on the page. (float: none; height: 2.75in)

 It’s possible to specify that content be positioned below a float rather than next to one.  Such content will not wrap around the float; it will instead begin below the level of the float.  This is referred to as “clearing” the float.  Content can clear floats left of itself, right of itself, or both.  This is done using clear: left, clear: right, or clear: both. (Floating right) The next paragraph clears, so this space is skipped. clear: right

 We’ll be using the “em” unit often in the next section.  Reminder: 1em is always the point size of the current font.  em is a relative unit in the sense that it depends on the font size. ▪ Enlarge the text and 1em will become larger as well. ▪ Reduce the font size and 1em becomes smaller.

 Laying out text in a manner that conveys a message and is pleasing to the eye.  Has been around since the printing press.  Consists not only of font size and selection, but:  Style and weight of characters.  Spacing of lines (e.g., single, double-spaced). ▪ Also called “leading” (rhymes with “heading”)  Space between pairs of characters (kerning).  Space between each character (tracking).  And more!

 Leading refers to “line spacing”.  A single-spaced document is said to have a leading of 1.0.  A double-spaced document is 2.0.  Triple spaced is 3.0, etc.  It can also be specified in pixels or %:  100% -> single spaced, 200% -> double, etc.  Or 24px between lines, 48px between, etc. ▪ The % spacing is then the leading / the font size.  CSS allows for any of these; the rule is called “line-height”:  e.g., “line-height: 2.0”, “line-height: 200%”, “line-height: 48px”  Set line-height on the element and everything in the document will change spacing.  Or you can set it on individual paragraphs and other elements.  Large line-heights produce a (true) impression of additional “space” between lines and may make documents feel less formal and more inviting.  On the other hand, they waste a lot of vertical space.  Certain documents, such as academic papers and legal correspondence, benefit from a greater impression of formality and are usually single-spaced.

 A small single-spaced paragraph with multiple lines (and a line-height of 1.0, 100%, or 32px).  A similar paragraph, now double spaced to illustrate the difference in line-height: it’s now 2.0, 200%, or 64px).

 Tracking refers to the horizontal space between characters.  It is often overlooked, but plays a vital role in the appearance of the document.  Larger tracking is often used for headings, or to give the text more “room”.  To a degree, wider tracking lends an air of increased professionalism in headings.  Too much and it just looks odd.  Be very careful about increasing the tracking in body text. There’s probably a lot of it, and if you space it too much (or too little), it will be more difficult to read.  Tracking is changed in CSS using the “letter-spacing” rule.  Values can be positive or negative (negative values will tighten the spacing).  This takes ems as units; e.g., 0.35em or -1.2em.  If you ever see tracking specified in terms of a number such as “350” (for example, in Adobe Photoshop), the unit is thousandths of an em. Therefore, “350” = 0.35em. ▪ You can’t use numbers such as “350” in CSS, only ems or other CSS-defined units.

 When working with light text on a dark background (“inverting”), certain precautions should be taken to avoid eyestrain.  Use “normal” or “lighter” font-weights because bold text jumps out too much.  Use slightly larger font sizes to avoid squinting at small bright text.  Increase the line-height and tracking slightly to avoid crowding a large block of white text.  Light text with a high line-height and tracking, such as this, will be easier for most users to read on dark backgrounds.

 Text can be:  Aligned left.  Aligned right.  Centered  Or justified, which expands the spacing on every line but the last to make it hit the end of the line (overriding the tracking). ▪ Justification eliminates the “ragged edges” of large paragraphs of left- aligned text, but can lead to “rivers of whitespace”, which look unpleasant.  Alignment is set using the “text-align” CSS rule. Valid values are “left”, “center”, “right”, and “justify”. (“River”) (“Ragged” edges.)

 “Old style” serif fonts, such as Garamond, Goudy Old Style, and Caslon were the earliest typefaces developed.  Slanted parts of characters are thinnest, leading to a “formal”, “necked” look.  They are very easy to read in print.  But they aren’t as easy to read on-screen.  When used in headings, they may suggest austerity, age, stability, and experience.

 “Transitional” serif fonts, such as Times New Roman and Georgia, are among the most commonly used.  Lines are straighter and more weight is given to thicker lines than in old-style typefaces.  They are fairly balanced and readable on both print and screen.  They suggest professionalism, reliability, and familiarity (because Times New Roman is used everywhere).  Both Times New Roman and Georgia are considered “web- safe” fonts, installed on the majority of computers.

 “Modern” serif fonts, such as Century Schoolbook and Rockwell, are not often used now; this style was popular in the early 20 th century.  These are highly “geometric” fonts, with a “blocky” appearance.  They suggest rationality, reliability, discipline, and the late 19 th and early 20 th centuries.  Century Schoolbook and Rockwell are not web-safe, but are among the more common fonts.

 In general, less formal and easier to read on-screen than serif fonts.  Used in the user interface of Windows, Mac OS X, and other operating systems.  “Grotesque” sans-serif fonts include Helvetica and Franklin Gothic, both common.  Neo-Grotesque fonts mimic grotesque fonts, but have less variation in weight.  Arial is the most popular of these and is web-safe.  Geometric fonts have simple, geometric shapes, lending them a highly “modern” feel.  Century Gothic is likely the most popular font in this family.  Humanist sans-serif fonts are considered the most easily readable on screen.  These have more contrast in width and weight than other sans-serif fonts and generally feature “smooth”, “open”, “curving” shapes.  They may denote openness and potential.  They’re my own favorite font family.  Humanist fonts include Segoe UI, Verdana, Myriad, Trebuchet MS, Tahoma, Gill Sans, and Calibri. ▪ All of these are common, but Verdana, Trebuchet MS, Tahoma, and Segoe UI can be considered web-safe.

 From single pages to sites.  Effective navigation.  Lists and tables in HTML.

A Nonprofit Organization of New Jersey, USA