Download presentation
Presentation is loading. Please wait.
Published bySara Chambers Modified over 8 years ago
1
Styling Fonts & Text CHAPTER 4 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)
2
Fonts Most of the content of a web page is text, so typography (fonts) are very important There are three sources of fonts: Fonts loaded on the user’s computer Fonts retrieved dynamically from dedicated font sites Fonts that are downloaded with the page These guarantee that a user will see the exact typography you had in mind Fonts are organized in: Collections, containing fonts with similar graphic characteristics (serif, monospace, etc.) Collections are made up of several Families (Helvetica, Times Roman, Calibry, etc.) Family members are distinguished by their typeface (graphic characteristics that offer a variance on the base family type, like Bold, Oblique, Narrow, Condensed, etc.) 2 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)
3
Font Properties Fonts have six styling properties: font-family: sets the family of fonts to be used font-size: sets the size of the font to be used font-style: sets the font style as normal (default), oblique, or italic font-weight: sets the font to various levels of bold font-variant: sets the font to small-caps or normal (default) font: as usual, is for shorthand CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 3
4
font-family Property Specifies one or more font families in order of precedence Multiple values can be specified, to cover cases where a specific font is not installed on the user’s computer. Font family names with two or more words must be enclosed in quotes {font-family :"trebuchet ms“;} Usually, a very generic font family, is specified last, just in case… There are five generic font families: serif, sans-serif, monospace, cursive, fantasy Other commonly used font families are: verdana, arial, helvetica, tahoma CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 4
5
What fonts are typically installed There is no standard, but most computers (Mac & PC) will have these font families: CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 5
6
Relative Font Sizing Font sizes can be set using relative values E.g., {font-size: 50%;} - the targeted element’s fonts will be half the size of their nearest sized ancestor E.g., {font-size: 2em;} - the targeted element’s font size will be twice the size of the current font’s baseline The font-size property is inherited, so relative sizing has a cascading effect Default paragraph size is 1em = 16px; therefore class p1 paragraphs will be.75x16px = 12px and strong will be.75x12px = 9px CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 6 Relative font sizes p.p1 {font-size:.75em;} strong {font-size:.75em;} Default size text This is very important!
7
Absolute Font Sizing Font sizes can be set using absolute values i.e., numeric sizes with units such as pixels (px), picas (pc) or inches (in) (px is the most common) Another size setting considered absolute is using words: x-small, small, medium, large, x-large (medium is the same as the baseline size of the current font) These are not widely used Font size rules Default font sizes are set in the browser stylesheet in relative units The font-size property is inherited Therefore: Any element with an absolute font size will take the size specified All other elements will we sized proportionally to the ones with an absolute size E.g., if you set the rule body {font-size: 20px;} h1 headings will be 40px (because they are sized by default to 2em, and no other rule applies) h2 headings will be 30px (because they are sized by default to 1.5em, and no other rule applies) CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 7
8
Absolute or Relative? Relative sizing makes it easy to maintain the proportional relationship of fonts when you make a change, because it affects all descendants That’s why default font sizes in the browser stylesheet are relative Can create unexpected consequences Absolute sizing is simple and direct, but you then need to specify sizes for every descendant There is a new way, not widely supported yet, which is the best of both worlds: Specify sizes in rem (from root em) Same as em, but it is relative only to and directly to the size set for the html element (which is the root element of the DOM) Set an absolute size for the root, using html {font-size: 20px;} (for example) Then set element level sizes like this: p {font-size:.8rem;} Careful… only IE 9 or newer support rem; other browsers do support it CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 8
9
font-style and font-weight Property The font-style property has three values: italic, oblique, and normal The first two are equivalent, and further have the same effect as the basic HTML tag Of course, note that the tag is very different from the unit of measure em The font-weight property has many values, but only two are widely supported: bold and normal The first has the same effect as the basic HTML tag The most common way of use is to: apply the or tag to make a text italic or bold If you want some normal text inside an italicized or bold paragraph, bracket the desired text with the tags and then style span {font-style:normal;} or span {font-weight:normal;} The tag has no visual effect; it is used simply to group together some content, likely for the purpose of styling it differently as in the example above CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 9
10
font-variant Property The font-variant property has two values: small-caps and normal The style {font-variant:small-caps;} makes the text appear in all capital letters, but with smaller letters that if all text would be capitalized in the normal way CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 10 Small Caps p.p1 {font-variant: small-caps;} THIS IS DEFAULT STYLE TEXT CAPITALIZED This is small caps text
11
font Property Like many other properties before, font related properties can be specified in a shorthand form using the font property. However, because in this case the same values can apply to several properties, shorthand follows these rules: Values for font-size and font-family must always be declared The sequence for the values is as follows: font-weight, font-style and font-variant in any order Then font-size Then font-family CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 11
12
Text Properties While font properties style each and every individual character in text, we also need to style the appearance of entire blocks of text The most commonly used text properties are: text-indent: sets the start position of the text block in relation to the containing element letter-spacing: increases or decreases the space between letters word-spacing: increases or decreases the space between words text-decoration: sets visual distinctions to text (underline, overline, blink, etc) text-align: sets the alignment style (left, right, center, or justify) line-height: increases or decreases the space between lines of text text-transform: changes capitalization vertical-align: moves text up or down with respect to baseline (like subscripts or superscripts) CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 12
13
text-indent Property By default, text starts at the top left corner of its box (accounting of course for padding) You can change that by setting the text- indent property to any value Positive values move the beginning of the text to the right Negative values move the beginning of the text to the left (and outside its box) So, you better make sure you have enough space on the page at the left of the box, or text will be chopped Only the first line of text is affected This property is inherited Set it at,, or even level CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 13
14
letter-spacing Property Positive values increase the space between letters, negative values decrease it It is better to use em as a unit, to maintain proportionality CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 14 Stylin' with CSS - Figure 4.7 Letter-Spacing Property body {font-family:helvetica, arial, sans-serif; font-size:1em;}.tight {letter-spacing:-.05em}.loose {letter-spacing:.5em} h1 {font-size:1.8em} This paragraph has normal spacing. Positive letter-spacing values increase the space between every character. Negative letter-spacing values bring the characters closer together. Here is a regular headline Here is a headline tightened
15
word-spacing Property Pretty obvious: same as letter-spacing, but for words Rarely used (perhaps when letter spacing was increased, some word spacing should too) CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 15 Stylin' with CSS - Figure 4.8 Word-Spacing Property body {font-family:helvetica, arial, sans-serif; font-size:1em;}.tight {word-spacing:-.2em}.loose {word-spacing:.7em} h1 {font-size:1.8em} This paragraph has normal spacing. Negative word spacing values bring the words closer together and can reduce readability. Positive word spacing values increase the space between every word. Here is a regular headline This headline has negative word spacing This headline has positive word spacing
16
text-decoration Property Five values: underline: same as underline in Word, places a line marking the baseline of the text Baseline is the line where regular characters sit; some characters (depending on the font, of course) extend below the baseline overline: same as underline, but line goes above the text (including taller letters) Using together can “band” a text line-through: places a line through the middle point of the band used by the letters of the font Same as strikethrough in Word; typically used to show a text that is being replaced, like in: Low Sales Price $9.99 $7.99 blink: sets the text to blinking; avoid, it is very distracting none: used to reset text to no decoration in the middle of an otherwise decorated text CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 16
17
text-align Property Pretty much self explanatory: left: text lines up on the left of the box right: text lines up on the right of the box center: text centers symmetrically off the central axis of the box justify: text lines up on both sides of the box Spacing out words as necessary to create alignment on both sides CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 17
18
line-height Property Use this property to specify a ratio between the height of text and the total height occupied by a line of text No units are typically used, as in {line-height:1.5;} making the total space taken by a line 50% more than the height of the text The additional space is distributed equally above and below the text Think of it as margin for a line of text Default value is 1.2; here is the effect of a 0.8 and 1.5 settings: CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 18
19
text-transform Property Changes capitalization using four values: none, uppercase, lowercase, and capitalize CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 19 Stylin' with CSS - Figure 4.12 Text-Transform Property body {font-family:helvetica, arial, sans-serif; font-size:100%;}.capitalized {text-transform:capitalize;}.uppercased {text-transform:uppercase;}.lowercased {text-transform:lowercase;} This is regular text that has not been transformed. capitalized using the tranform capitalize value. there are no capital (uppercase) letters in the markup. there are no uppercase letters in this markup. THERE ARE ONLY UPPERCASE LETTERS IN THIS MARKUP.
20
vertical-align Property This property allows the repositioning of text lower or higher than normal text It uses any regular numeric value and many keywords When the value is a length (in any unit) the text is raised or lowered by that amount When the value is a %, the text is raised or lowered by that percentage of the line-height property’s current value Applies only to elements with {display:block;} You must change the display property on inline elements if you wish to align them vertically Most commonly used to subscript or superscript HTML tags are also available, and I recommend using them instead for subscripts for superscripts CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 20
21
Web Fonts Every computer has fonts installed, but the set of fonts available depends on many circumstances Certain programs install fonts (i.e., Microsoft Office) Fonts can be installed (or deleted) by the user, etc. What if you want to achieve a specific look, using a specific font? Three options: Web hosted fonts Pre-packaged font kits Make your own font kit CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 21
22
Web Hosted Fonts You can include fonts hosted on the web, by providers like Google or Adobe Because these sites are there specifically for the purpose of providing fonts, the fonts are likely to be found at the site for quite a while; the font(s) are downloaded when your page is rendered To use a web hosted font, follow these steps: In your browser go to https://www.google.com/fontshttps://www.google.com/fonts Find a font you like Click the Add To Collection button The font gets listed to the bottom of the screen Click the Use button on the right, fill out the parameters, and scroll down until you see the link statement (see example below) Cut and paste the link statement into your section Use as described before (by setting the font property) CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 22
23
Packaged Font Kits Fonts can be packaged in standardized packages using the @font-face rule in the Such a font package must be available from a web server (on your own site, or some other site) The package is downloaded when the first page using the font is encountered and is then located in the browser cache, and can be used Fonts are licensed, so make sure you either buy it, or use a designated royalty free font Different browsers use different formats for font packages, so you have to include in the rule references to all formats, so that your page can be loaded in any browser The font package is a file; like with images, you should likely keep fonts in a subdirectory You can download font packages from www.fontsquirrel.comwww.fontsquirrel.com CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 23
24
@font-face Rule Here is an example of using the @font-face rule CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 24 Make sure you add generic fonts to your font property, for the situations when a font is not downloaded correctly, or the browser does not support what you specified.
25
Make Your Own Font Package Usually needed in commercial situations (say a client has a corporate standard font) You can create a font package (for use with the @font-face rule) by using the free package generator at: http://www.fontsquirrel.com/tools/webfont-generatorhttp://www.fontsquirrel.com/tools/webfont-generator Keep in mind that you have to del with the multiple formats (or limit the styling effect to certain browsers) Here is the list of formats: OTF (OpenType) or TTF (TrueType) used by Firefox, Chrome and Safari EOT (Embedded OpenType) used by Microsoft IE SVG (Scalable Vector Graphics) used by mobile Safari pre iOS 4.1 WOFF (Web Open Font Format) used by many of the browsers in more recent version Probably your best choice for a single file CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 25
26
Typography Example Style is of course a matter of preference and personal esthetics Let’s follow an example through several stylistic changes Here is a page with: One h1 heading Two h2 headings Two paragraphs Two bulleted lists One blockquote Here is the default rendering: CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 26
27
Changes – Set 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 27
28
Changes – Set 2 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 28
29
Changes – Set 3 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 29
30
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 30
31
Another Example Follow the details in the textbook to see how this change was achieved: CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 31
32
How Can I Find the Syntax I Need? The best source is the W3School at http://www.w3schools.com/default.asphttp://www.w3schools.com/default.asp Three tabs help you navigate to: Tutorials References Examples You can find pretty much anything you need on this website CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 32
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.