Hexadecimal (hexa, 16 based) values may be shortened if all values are "pairs" for root em (rem) = the font size of the root element, the html element, therefore rem units are not supported in older Internet Explorer web browsers (support

HTML tag is deprecated in version 4 0 onwards and now all fonts are Following is the list of fonts supported by Macintosh System 7 and higher versions

[PDF] HTML1, Week 7 & 8 – CSS Font and Text Properties

Last week you learned how to use CSS together with an HTML file We used a few rule – use only normal or bold for best results, browsers don't support the other choices well font-style: value choices not all fonts have a small-caps variant

[PDF] CSS - Cascading Style Sheets

[PDF] Cascading Style Sheets/Fonts and Text - Amazon S3

Since there isn't a standard set of fonts that is available in all web browsers and statements that the page is valid HTML, conforms to WCAG Double-AA, etc and required to support decreasing the letter spacing or may only allow a limited

[PDF] Fonts

As in all design choices, you should consider the sustainability of a font Although Google Fonts are widely supported and accessible now, you should consider

[PDF] HTML Typography in Email - Knak

WHY EVEN BOTHER? HTML Typography My client wants and they want it in all caps (just like that ) Majority of clients that support web fonts also happen to

[PDF] OpenHTMLToPDF Template Guide - Open HTML to PDF Landing

Fonts Notes on Fonts Font Example RTL Support Notes on RTL Support This example shows using all four of the Noto Serif (by Google) font types:

[PDF] Fonts Reference - Oracle Help Center

1 jan 2015 · be the licensee's responsibility to take all appropriate fail-safe, Pacific regions: Visit- http://www oracle com/us/support/contact/index html

[PDF] Basic Font Attributes - Font Weight

This test contains examples of different font weights It is conceived as an exhaustive test of all ways of expressing font weight in XSL Helvetica: Default is normal

[PDF] Web Open Font Format (WOFF)

Some browsers introduced support for raw fonts • Creation of the Everyone agrees and we are all happy Same-origin restriction is satisfied if both HTML

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 1

CSS and text styles

Specifying Colors in CSS

Colors can be expressed in any of the following forms with CSS: hexadecimal RGB values - #FFFFFF or #FFF (shortened)

RGB values - rgb(255,255,255)

RGB values as percentages - rgb(100%,100%,100%)

HSL values, CSS3 support - hsl(0,0%,100%

RGB - Red Green Blue channel values, HSL - Hue Saturation Lightness values -> equivalent precision!

The 16+1 basic color names (CSS2.1) are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,

oil, purple, red, silver, teal, white, and yellow + orange. orange = #FFA500 - CSS2.1

140 named colors altogether in CSS3

CSS3 color module: http://www.w3.org/TR/2011/REC-css3-color-20110607/

Colors in computers are expressed with the

RGB color system. RGB represents the red,

green, blue color channel components with values ranging from 0 to 255.

RGB 0, 0, 0 = black

RGB 255,255,255 = white

The hexadecimal RGB values are calculated

form RGB values and are equivalent: #RRGGBB -> a pair for each channel #000000 = black #FFFFFF = white

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 2

Hexadecimal (hexa, 16 based) values may be shortened if all values are "pairs" for all 3 channels: #CCCCCC = #CCC, #22DDFF = #2DF, #000000 = #000 #134dff = #134dff (cannot be shortened!) You can use Adobe Photoshop or other image editors e.g. Pixlr online image editor (www.pixlr.com) to pick and define a color and see the hexadecimal or RGB values for the color. http://color.adobe.com http://www.colourlovers.com/palettes/add http://www.colorpicker.com/

You can also quickly test and copy color codes in the Chrome's Deǀeloper tool. Select an element with

a defined color. Check the color in the style tab. There is a small square to preview the color, click it to

access the color picker.

Newer versions of Chrome enable you to add text color in the browser to test it, as the styles of the

selected element appear in the styles tab, move the mouse pointer to the right bottom corner and click the small ͞A" for the color picker.

The color property controls the text color of text elements. Text color is an inherited property. Colors

can be added to other properties like element background, element border in various elements. Hexadecimal values express the same colors as the RGB values or HSL values. Hexadecimal values are somewhat shorter to write. In the developer tool, just click the two-headed arrow to switch between color definition types easily.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 3

You can also use the color picker tool (next to the selected color disk) to pick a color from the viewport of the web browser. After defining the color, you can copy and paste the color values from the Developer tool. Either copy from the styles tab or click the color disk to copy the selected color value (right of the color picker). Hexadecimal values always start with a # mark -> #123456! RGB -> rgb(0,0,0) values range 0-255 or a less typical 0-100% HSL -> 360 degree for hue selection, 0-100% for saturation,

0-100% for lightness

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 4

CSS3 color and alpha transparency

CSS3 introduced the HSL color definitions and it can be used in modern browsers without problems, though support in older web browser was lacking. p { color: hsl(240,100%,50%) } = blue with 100% saturation and 50% lightness - hue 360 (degrees, red to red), saturation, lightness values are percentages 0-100%.

Transparent (translucent) colors - RGBa and HSLa

A colors are opaque with the previous color values, but can be also translucent and completely transparent by adding an extra alpha channel to RGB and HSL colors -> RGBA & HSLA

a = alpha transparency - 0 is full transparent - 1 full opaque -> 0.1 = 10%, 0.75 = 75% transparent etc.

h1 { color: rgba(0, 0, 0, .1) } h2 { color: rgba(0, 0, 0, .5) } h3 { color: rgba(0, 0, 0, 1) } h1 { color: hsla(0, 0%, 0%, .1) } h2 { color: hsla(0, 0%, 0%, .5) } h3 { color: hsla(0, 0%, 0%, 1) } You can also define the transparency values in the developer tool as above (second slider). The checked background means transparency.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 5

Length units and values

Some CSS properties require values with specific units assigned. There is a need for length units when

font-sizes are determined, you need space between or around elements, or you need to define the

Length unit values can be:

positive or negative - (e.g. margins can be negative) must define a unit of measurement, except for 0 (optional) and in a few other cases (ratios) p { width: 200px; } - no space between value and unit (200px)! width: 200 px or plain 200 won't work! but p { width: 0; } is fine, 0 is 0 in any unit

There are relative and absolute units. Absolute units are ͞fiǆed" units that are physically measurable

and have a constant nature in a specific environment (e.g. screen, paper). Relative units are calculated

by the web browser usually based on fixed units or on a ratio. pixel (px) = smallest unit in the viewport to display a color "square" (pixel). In CSS3 the pixel is redefined as an absolute unit, as 1/96 of an inch (matching a certain angle of view that users watch screens).

em (em) = the font size of the text in the element - works like a scaling factor, its size is relative to the

text size of the element or to the text size that is inherited by the element. (NOT to be confused with

the ͞em" element in HTML!) The em unit size is not constant and depend on the context, based on

which the browser calculates the unit size automatically. The em unit is not just for defining text sizes.

It can be used for other purposes as well, e.g. for setting margins, widths and the like, though as a unit

it will be relatiǀe to the element's own teǆt size. Absolute units can be used too, such are millimeter (mm), centimeter (cm), inch (in = 2,54cm), point

(pt 1/72in), pica (pc 12pt). These work best when the physical characteristics of the output device are

well known, for example print paper. Avoid these for screen rendering!

Percentage (%) is also a relative unit, calculated based on element properties like text size or e.g.

dimensions of the element or of its parent. root em (rem) = the font size of the root element, the html element, therefore defining a constant

value for the particular document that can be controlled by changing the text size of that element. In

contrast, em values are always relative to inherited text size or the element's own text size. Note that

rem units are not supported in older Internet Explorer web browsers (support only in IE11 and Edge). There are many other units as well; the above are the essential to start with.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 6

Text and font properties ʹ all inherit

color -> text color of the element (color values as above) font-size -> can be defined in absolute or in relative length and percentage values As in the above example, relative values correspond to absolute values, the web browser calculates

the values automatically. 200% is 2x the size, same as 2em. For a particular element, these will mean

a certain absolute size, here 16px is a starting size. Default font size in most web browsers for normal texts is 16px

The default size (16px) is used, if the text size is not defined for the document. An exception is present

for monospace default font sizes, e.g. in pre or code elements, these typically have a different font

size (smaller). The default text size for the browser can be change in the browser settings by the user.

This freedom should be left intact for accessibility considerations. Font sizes, defined in style sheets

with relative units, will be based on the default browser size (or otherwise inherited font sizes).

Hence, text size is not locked and users have control. Absolute pixel values would lock the font size to

the specified value and user defined sizes are ignored.

Example:

body { font-size: 100%; } - e.g. 100% = 1em - if browser default is 16px - calculated value is 16px

h1 { font-size: 1.5em; } - 16px x 1.5 = 24px - relative size, 1.5 times bigger, scaled the inherited size

from the parent (body) to 1.5 times bigger. Remember 24px is only true if the inherited text size is

16px. If the inherited size is e.g. 12px (body font-size: .75em or 12px), 1.5em size for the h1 element

would give us only 18px (12px x 1.5). Here is the size of H1 elements if the default size is not changed:

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 7

The image above shows Google Chrome's Developer tool. The default browser styles for H1 element are marked as "user agent stylesheet" (mid gray area). H1 -> default 2em size = twice the inherited

size = 2x16px if the inherited size is 16px. If you switch the ͞Styles tab" to the ͞Computed tab", you

can see the actual calculated pixel values, the h1 element gets 32px = 2em (2 x 16). If you change the font size for the document by changing the font size for the BODY element, setting

font size to say 14px. The default H1 size still will be 2em, but the browser will calculate the size as

28px (2x14px) instead of 32px since the H1 element will inherit the 14px size from its parent (body).

Calculating relative sizes

You can use absolute sizes font-size: 14px; to fix the font size to a specific value, but this may be

restrictive and takes more time to update especially if you change multiple elements. Usually it is better to use relative values, changing the parent element will update the child elements because of

inheritance rules for text properties. You can also calculate a relative value to correspond to a specific

absolute size if specific sizes are needed but relative text sizes will be used. To calculate percentage and em values, use the following formula: desired size in px ͬ element's teǆt size in px = em or % value (% = em x 100) So, if we want 14px and the current text size is 16px -> 14 / 16 = 0.875

that is 0.875em or 87,5% (0.875x100) = e.g. body { font-size: .875em; } will be calculated as 14px if the

default inherited size is 16px. body { font-size: 100% } /* 16px */ h1 { font-size: ???em } /* 20px desired */ h2 { font-size: ???em } /* 18px desired */ blockquote { font-size: ???em } /* 14px desired */

20 / 16= 1,25; 18 / 16 = 1,125 ; 14 / 16 = 0,875

so the style rules with em values at default text size (16px) body { font-size: 100% } /* 16px */ h1 { font-size: 1.25em } /* 20px */ h2 { font-size: 1.125em } /* 18px */ blockquote { font-size: 0.875em } /* 14px */ The em values are always calculated. They are relative to inherited font sizes or in some cases the element's own font size (e.g. relatiǀe units for defining element margins). Remember that if an element has a child element, the child inherits the parent element's font size! body { font-size: .875em; } -> calculated as 87.5% of browser default (if 16px) = 14px h1 { font-size: 1.5em; } -> calculated as 150% of inherited size -> 14px x 150% = 21px The heading's size is NOT 0.875em x 1.5 (=1.3125)! It is the calculated as 14px inherited size times 1.5! Just calculate: 14 x 1.3125 = 18,375px would be incorrect -> 14 x 1.5 = 21px is correct.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 8

CSS body { font-size: 100%; } (or 1em) div { font-size: 75%; } (or 0.75em) HTML

H1 in BODY

Text in a paragraph...

H1 in DIV

Text in a paragraph...

In the above example, the H1 and P text sizes are smaller in the DIV element (second heading and

paragraph) since they inherit the smaller font-size of the DIV element. The proportion of the text sizes

stays the same between the H1 and P elements. Their size is just smaller in the div by 25%.

Other text size values

There are also special absolute values, browser references to describe a range of sizes from smallest

to largest (no exact reference to a particular size, rather size is consistently scaled, browser dependent interpretation): xx-small, x-small, small, medium, large, x-large, xx-large Relative values: smaller, larger (relative to parent object sizes)

To check or change

browser defaults, go to the browser settings (vertical dots at the top right) and open settings and scroll to Appearance.

A quick shortcut for

Chrome, type the

following to the address field chrome://settings/fonts to open the font settings straight away.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 9

Chrome browser settings (chrome://settings/fonts)

16 is as in 16px is the typical default font size for texts in the web browsers, the slider above for font

size can adjust the size by the user.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 10

Other text styles ʹ all inherit

font-weight: normal | bold | bolder | lighter strong, b { font-weight: bold; } - bold text h1 { font-weight: normal; } - heading without bolding h1 { font-weight: lighter; } - as the previous span { font-weight: bolder; } - bold text h1 { font-weight: bolder; } - bold text by default, no change Some fonts may use/support certain integers to define boldness

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

400 = normal text weight

Browser and font support varies, many fonts can only be bold or normal (= not bold). font-style: normal | italic | oblique .italic { font-style: italic; }

with italic value the text is rendered in italic style (italic version of the font used), oblique (force tilting

characters) will mimic italic style, if no italic version available (may look rough for certain fonts).

text-transform: none | capitalize | lowercase | uppercase Changes the case of text characters when rendered in the viewport, of course the case only changes on the screen:

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 11

text-decoration: none | overline | underline | line-through a { text-decoration: none; } the none value when applied with hyperlinks turns the default underlining off font-family - defines the font-face of the text element There are browser specific default fonts that are applied for the text elements of the document. The user may change the default fonts in the browser settings (as above, chrome://settings/fonts). Fonts specified in author style definitions override the default fonts.

h1 { font-family: Arial; } changes the default font to a font by the name Arial (a very common font).

In general, web browsers will look for fonts that are available on the user's computer. You can refer to

a font by its name in your style sheet. In order to display texts using a specified font, unless it is

missing from the user's computer. Modern browsers allow you to use online fonts and downloadable fonts (see web fonts), this means that as a separate online resource the font does not have to be installed in the system. It is advised to list more than one font for your texts. This is useful when you want to keep the

appearance of your text constant, whether your preferred font is available or just the second or third

option. By providing multiple fonts with similar characteristics, it is easier to retain the desired

typographical aspects of the text. Listing multiple font options for your text is called a font stack. Font

stacks allow you to set a first choice font and more options in order with a comma separated list. If

the first specified font is not available in the user's system, the browser tries to use the next font in

the list, and so forth. Instead of just defining one option: h1 { font-family: Arial; } a font stack could be better: h1 { font-family: Arial, Helvetica, sans-serif; } Note! Font names that include character spaces like in ͞Times New Roman" should be placed within more uppercase letters in their names. p {font-family: "Times New Roman", Times, serif} -> is a typical font-stack or Use generic font names as last options. Generic fonts are standard font types with certain style characteristics, browsers have default fonts assigned for generic font types: serif, sans-serif, monospace (also: cursive, fantasy).

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 12

example font stacks and generic font families:

Serif:

body { font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif } body { font-family: 'Times New Roman', Times, serif } sans-serif: body { font-family: Verdana, Geneva, sans-serif }quotesdbs_dbs17.pdfusesText_23

[PDF] [PDF] CSS - Cascading Style Sheets

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 1

CSS and text styles

Specifying Colors in CSS

 RGB values - rgb(255,255,255)

 HSL values, CSS3 support - hsl(0,0%,100%

140 named colors altogether in CSS3

Colors in computers are expressed with the

RGB color system. RGB represents the red,

RGB 0, 0, 0 = black

RGB 255,255,255 = white

The hexadecimal RGB values are calculated

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 2

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 3

0-100% for lightness

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 4

CSS3 color and alpha transparency

Transparent (translucent) colors - RGBa and HSLa

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 5

Length units and values

Length unit values can be:

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 6

Text and font properties ʹ all inherit

Example:

16px. If the inherited size is e.g. 12px (body font-size: .75em or 12px), 1.5em size for the h1 element

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 7

28px (2x14px) instead of 32px since the H1 element will inherit the 14px size from its parent (body).

Calculating relative sizes

20 / 16= 1,25; 18 / 16 = 1,125 ; 14 / 16 = 0,875

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 8

H1 in BODY

H1 in DIV

Other text size values

To check or change

A quick shortcut for

Chrome, type the

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 9

Chrome browser settings (chrome://settings/fonts)

16 is as in 16px is the typical default font size for texts in the web browsers, the slider above for font

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 10

Other text styles ʹ all inherit

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

400 = normal text weight

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 11

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 12

Serif:

RGB values - rgb(255,255,255)

HSL values, CSS3 support - hsl(0,0%,100%