web typography
DESCRIPTION
TRANSCRIPT
![Page 1: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/1.jpg)
22-3376 Web Design 2 // Columbia College Chicago
WEB TYPOGRAPHY
![Page 2: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/2.jpg)
QUIZ REVIEW
PrimaryStructure html head body
Head Elements title meta link
BodyElements p br h1 – h6 ul ol a img div
FormattingElements em strong q blockquote
![Page 3: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/3.jpg)
Directories
![Page 4: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/4.jpg)
Room 902
<a href=” ”>
![Page 5: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/5.jpg)
Room 902Room 901 Room 903
9th Floor
9th Floor/Room 902/
![Page 6: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/6.jpg)
Room 902Room 901 Room 903
9th Floor
../Room 902/
Two dots in front of a forward slash means: “step up one directory.” In this example it says:
“step out of room 903 and then back into room 902, talk to “
![Page 7: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/7.jpg)
Room 902Room 901 Room 903
9th Floor8th Floor 10th Floor ++
WabashCampus
Mich AveCampus
Book & Paper Center ++
ColumbiaCollege
Universityof IL SAAIC ++
![Page 8: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/8.jpg)
/Columbia College/Wabash Campus/9th Floor/Room 902/
http://Columbia College/Wabash Campus/9th Floor/Room 902/
Relative link to root A relative link (does not start with “http://”) with a slash at the beginning forces the link to start at the root of the website. This will only work on the server, not when you are working locally.
Absolute links Absolute links are typically used for linking to pages or files outside of your site’s directories.
![Page 9: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/9.jpg)
The index file
When an absolute link is directed to a folder, the browser needs to know which file to open. By default, it looks for a file named “index” (the extension is not important, usually is it index.html, or index.php). This is why the homepage is always named “index”.
So, <a href=”http://www.mysite.com/”> and <a href=”http://www.mysite.com/index.html”> will open the same file.
root directory (www.mysite.com)
index.html
images
logo.png
report.pdf
![Page 10: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/10.jpg)
Tutorial 1 !
![Page 11: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/11.jpg)
ASSIGNMENTS
Upload your assigneents to your server !
Post your site URLs on the survey
![Page 12: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/12.jpg)
QUIZ
Open a plain text document !
Write the markup to recreate the image !
!
http://lms.colum.edu/
![Page 13: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/13.jpg)
CSS Overview
![Page 14: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/14.jpg)
Properties
What are properties? While attributes provide additional information about a specific element’s content, every element type has a set of default properties that define how that element will be shown in the browser.
![Page 15: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/15.jpg)
Element human
Properties name=”Liam”gender=”male”age=”5” !
!
Properties
![Page 16: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/16.jpg)
CSS Syntax
Syntax = the rules for how to write the language
![Page 17: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/17.jpg)
Three terms for describing your styles:
CSS rule CSS selector
CSS declaration
![Page 18: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/18.jpg)
selector {property: value;}
Every style is defined by a selector and a declaration. The declaration contains at least one property/value pair. Together they are called a CSS Rule.
declaration
CSS Rule
![Page 19: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/19.jpg)
body {font-family: Arial, Helvetica}"p {color: #666666}"h1 {font-size: 24px}"a {color: blue}
The selector associates css rules with HTML elements.
CSS Selector
![Page 20: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/20.jpg)
p { color: red }
The selector is typed in front of the declaration, with a space separating it and the opening curly-bracket (aka curly-brace). Typically, extra spaces and returns are added as shown for the sake of readability.
CSS Selector
![Page 21: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/21.jpg)
h1,h2,h3,h4 { font-weight: bold }
You can apply styles to multiple selectors in the same rule by separating the selectors with commas.
CSS Selector
![Page 22: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/22.jpg)
p { property: value }
The declaration is always defined in a property/value pair. The two are separated by a colon. How you define the properties will affect how HTML elements are displayed.
CSS Declaration
![Page 23: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/23.jpg)
p { font-family: Arial, sans-serif; font-size: 14px; color: #666666;
}
You can apply multiple declarations to a selector(s) by separating the delcarations with semi-colons.
CSS Declaration
![Page 24: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/24.jpg)
CSS Selectors
![Page 25: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/25.jpg)
p Type (element)
# ID
. Class
el el Descendant
![Page 26: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/26.jpg)
body {declaration} p {declaration} h1 {declaration} ul {declaration}
The simplest selector is the type selector, which targets an html element by name.
Type (element) Selectors
![Page 27: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/27.jpg)
The essential selector types (elements)
PrimaryStructure html body
BodyElements p br h1 – h6 ul ol a img div
FormattingElements em i strong b q blockquote span
![Page 28: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/28.jpg)
Type selectors vs ID & Class selectors
Type selectors use the tag names that are built into HTML. ID and class selectors use names that you define, and are added to html elements to make them more specific.
![Page 29: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/29.jpg)
CSS .ingredients {declaration}"HTML <ul class=”ingredients”>
A class is an html attribute that is added to your html markup. You reference that ID in your css with a period.
Class Selectors
![Page 30: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/30.jpg)
CSS #logo {declaration}"HTML <img id=”logo” src=”” alt=””>
An ID is an html attribute that is added to your html markup. You reference that ID in your css with a hash.
ID Selectors
![Page 31: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/31.jpg)
IDs vs Classes
The most important difference between IDs and classes is that there can be only one ID on a page, but multiple classes. An ID is more specific than a class. An element can have both an ID and multiple classes.
![Page 32: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/32.jpg)
IDs vs Classes
ID: #344-34-4344 Class: Male Class: Student
ID: #123-54-9877 Class: Female Class: Student
![Page 33: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/33.jpg)
Multiple classes
CSS .ingredients.time {declaration}"HTML
<div class=”ingredients time”> <h1></h1> </div>
Elements can have multiple classes, giving you more control. The are written in the CSS in the exact order they appear in the html, with no spaces.
![Page 34: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/34.jpg)
Combining IDs and classes
CSS #wrapper.ingredients.time {declaration}"HTML
<div id=”wrapper” class=”ingredients time”> <h1></h1> </div>
Elements can have both ids and classes. While an element can have only one id, it can have multiple classes.
![Page 35: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/35.jpg)
Tutorial 2 !
![Page 36: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/36.jpg)
Style Declaration: Text
![Page 37: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/37.jpg)
Tutorial 3 !
![Page 38: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/38.jpg)
Start by setting your base font-stack, font-size, line-height, and color on the body element.
Start global
body { color: #444444; font-family: font-family: Georgia, Times, "Times New Roman", serif; font-size: 14px; line-height: 1.4; }
![Page 39: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/39.jpg)
Next, set your base properties on your paragraphs, headers, lists, and links.
p {margin-bottom: 18px;}
h1, h2, h3, h4, h5, h6 { font-family“Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } h1 {font-size: 40px; margin-bottom: 24px; line-height: 1.2;} h2 {font-size: 32px; margin-bottom: 20px; line-height: 1.2;} a {color:#e69807; text-decoration: none;}
Start global
![Page 40: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/40.jpg)
Font Stack The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
EXAMPLES body { font-family: Helvetica, Arial, sans-serif; }"
h1 { “Lato”, Arial, sans-serif; }"
![Page 41: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/41.jpg)
Units of Type Size
There are three different ways to define type sizes in css. emsEms are a relative unit: 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. pxPixels are a an absolute unit, it sets the text to a specific size instead of a size relative to the browser’s default. Except in special cases, you should define pixels in your css with the number and “px” together, no spaces: “16px”. %Like ems, percentages are also a relative unit. It is very useful for layout, not usually a good idea for type sizes.
![Page 42: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/42.jpg)
Specifying Color
There are three different ways to define color in css. Hex CodesThis is the most common way to identify colors in CSS. The code gives two characters to correspond to RGB values. The number always has 6 characters (#44de42), unless all four characters are the same, and you can shorten it (#444). RGBYou can use a color’s RGB values with this syntax: p {color: rgb(34,123,125);} Color NamesThere are built-in color names that you can use, that will provide generic hues: p {color: rgb(34,123,125);}
![Page 43: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/43.jpg)
Specifying Color
!
Hexidecimal RGB
![Page 44: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/44.jpg)
Color: white, black, grey
White = #ffffff, or #fff
Black = #000000, or #000
Greys = #111111 – #999999
![Page 45: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/45.jpg)
Essential font properties:
color
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-align
text-transform
![Page 46: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/46.jpg)
Essential font properties, with values:
color: #444
font-family: "Times New Roman", Georgia, serif
font-size: 16px (define in px, em, or %)
font-style: italic
font-variant: small-caps
font-weight: bold (or by number, 300, 400, 700, 800)
letter-spacing: .02em
line-height: 1.6; (relative to whatever your type size is)
text-align: left;
text-transform: uppercase;
![Page 47: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/47.jpg)
Styling Lists
![Page 48: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/48.jpg)
List styling Links can be styled just like any text, but have special properties. The most often used is “list-style-type”, which allows you to control whether bullets are used, and how they are styled.
ul { list-style-type: none; padding: 0px; margin: 0px; }"!
!
!
![Page 49: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/49.jpg)
Styling Links
![Page 50: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/50.jpg)
Link states Links can be styled just like any text, but have special pseudo-classes that allow you to define their behavior. a {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */
!
When setting the style for several link states, there are some order rules:
— a:hover MUST come after a:link and a:visited — a:active MUST come after a:hover !
!
![Page 51: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/51.jpg)
Links By default, links are underlined. You can turn this off by changing the “text-decoration” property. In the example below, the link will only have an underline when the cursor is hovering over the element. a { color:#FF0000; text-decoration: none; } "
a:hover { color:#00FF00; text-decoration: underline; } "!
![Page 52: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/52.jpg)
Specifying Fonts
![Page 53: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/53.jpg)
There are 5 basic ways of specify fonts:
Web Safe Fonts(called font-family in your text)
Font-Face Hosted Service
Images sIFR/Cufon
![Page 54: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/54.jpg)
Web-safe Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution defined in the visitor's operating system.
![Page 55: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/55.jpg)
![Page 56: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/56.jpg)
![Page 57: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/57.jpg)
![Page 58: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/58.jpg)
Selecting Type
![Page 59: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/59.jpg)
Typography is a craft by which the meanings of a text can be clarified, honored and shared, or knowingly disguised.
—Robert Bringhurst,
![Page 60: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/60.jpg)
![Page 61: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/61.jpg)
![Page 62: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/62.jpg)
Three factors to consider with every type choice:
Legibilty Readibility
Connotation
![Page 63: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/63.jpg)
Legibility Legibility refers to a reader’s ability to easily recognize letterforms and the word forms built from them. We don’t read by recognizing one letter at a time, but by recognizing the shapes of whole words and phrases.
![Page 64: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/64.jpg)
Legibility = Can you read it?
![Page 65: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/65.jpg)
Type size is the most abused legibility attribute.
Legibility factors: Type Size
![Page 66: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/66.jpg)
Legibility factors: Type Size
![Page 67: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/67.jpg)
Legibility factors: Body vs Display
Text type has a greater need for legibility than display type because text type is smaller, so character and word recognition is made more difficult.
![Page 68: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/68.jpg)
Legibility factors: Background Contrast
![Page 69: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/69.jpg)
Type’s legibility is determined in part by the spaces within and immediately surrounding each character. As type’s size gets smaller, the spaces must be increased.
Legibility factors: Type spacing and proportions
![Page 70: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/70.jpg)
X-height
Aperatures
Ascenders/Descenders
Terminals
Legibility factors: Type spacing and proportions
![Page 71: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/71.jpg)
![Page 72: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/72.jpg)
![Page 73: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/73.jpg)
Hinting
Anti-aliasing
Browser rendering
Legibility factors: Unique to the screen
![Page 74: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/74.jpg)
Readibility Readability refers to the facility and comfort with which text can be comprehended. Text with good readability must also be legible, but more legibility doesn’t make text readable.
![Page 75: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/75.jpg)
Readibility = Do you want to read it?
![Page 76: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/76.jpg)
Q. Is reading on devices
inherently different thanreading print?
![Page 77: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/77.jpg)
Q. When is the text
the interface?
![Page 78: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/78.jpg)
Three types of reading:
Skimming Seeking
Long-form
![Page 79: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/79.jpg)
Reader type: Skimming
![Page 80: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/80.jpg)
![Page 81: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/81.jpg)
![Page 82: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/82.jpg)
Reader type: Seeking
![Page 83: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/83.jpg)
![Page 84: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/84.jpg)
![Page 85: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/85.jpg)
![Page 86: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/86.jpg)
Reader type: Long-form
![Page 87: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/87.jpg)
![Page 88: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/88.jpg)
![Page 89: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/89.jpg)
![Page 90: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/90.jpg)
Optimal text size is 14 to 16px. 1.4 is usually good for line-height.
Minimum display type size is 18px.
Medium weight produces maximum legibility: the relationship of letterforms to counter spaces is balanced.
Be conservative with the use of italic, bold, and uppercase.
Optimal line length is two alphabets (52 characters).
Optimal letterspacing is invisible.
Increase line spacing as text gets smaller and/or lines get longer.
Readibilty Guidelines
![Page 91: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/91.jpg)
Contrast
![Page 92: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/92.jpg)
PROXIMITY COMMON REGION
SIMILARITY
Size Shape Shade Color
CONNECTEDNESS
LARGE TO SMALL IRREGULAR TO REGULAR DARK SHADE TO LIGHTSATURATED TO
UNSATURATED COLOR
Gestalt Principles
![Page 93: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/93.jpg)
Connotation Type always works on at least two levels of communication:
– the semantic meaning of the words themselves (denotation),
– and the aesthetic and emotional meaning conveyed by the visual properties of the typeface design (connotation).
![Page 94: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/94.jpg)
![Page 95: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/95.jpg)
![Page 96: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/96.jpg)
![Page 97: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/97.jpg)
![Page 98: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/98.jpg)
![Page 99: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/99.jpg)
![Page 100: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/100.jpg)
![Page 101: Web Typography](https://reader033.vdocuments.us/reader033/viewer/2022061120/546680b1af79594a1f8b7291/html5/thumbnails/101.jpg)