w3 contents   w3properties   w3index  text
15
Fonts
www.w3.org/TR/CSS2/fonts.html
2011 W3 totally rewrote!.
Hacked by DGerman.

This document begins with <body style=font-family:sans-serif>

serif Safari uses Times
III ABCDEFGHIJKLMNOPQRSTUVWXYZ
WWW abcdefghijklmnopqrstuvwxyz 1234567890
variable width
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
sans-serif Safari uses Helvetica
III ABCDEFGHIJKLMNOPQRSTUVWXYZ
WWW abcdefghijklmnopqrstuvwxyz 1234567890
variable width
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
cursive Safari uses Apple Chancery !
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
fantasy Safari uses Zapfino !
III ABCDEFGHIJKLMNOPQRSTUVWXYZ
WWW abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
monospace Safari uses Menlo !
III ABCDEFGHIJKLMNOPQRSTUVWXYZ
WWW abcdefghijklmnopqrstuvwxyz 1234567890 note slashed zero
fixed width aka mono spaced . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>

Some font style elements include variations of fonts. Shown in size order.

These use fixed width (monospace) by default!
<blockquote> bold; margin:40px;
             padding-top&bottom:2em; appears to add blank line before block
                 does NOT inherit background-color
III ABCDEFGHIJKLMNOPQRSTUVWXYZ
WWW abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
<samp>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
<kbd>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
<pre>no <br> at end of any lines   inserted blank line before and after
ABCDEFGHIJKLMNOPQRSTUVWXYZ 
abcdefghijklmnopqrstuvwxyz 1234567890 
. , -   = [ ] ' ; / ! @  # $ % ^ & * () _ + | {} " : ? ¿ <> 
     ^^-- note 2 spaces are preserved.
<tt>
ABCDEFGHIJKLMNOPQRSTUVWXYZ 120%
abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
<q> added quotes ; inherited sans-serif from body ; silver <q>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
<code> 120% ; bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>

Characters J M Q Z can sometimes be used to determine which font is being used.

"Times New Roman"
abcd efgh ijkl mnop qrst uvwx yz
ABCD EFGH IJKL MNOP QRST UVWX YZ
12345 67890 -=[]\;',./
!@#$% ^&*() _+{}|:"<>? ♠♣♥♦
J
M
Q
Z
courier
abcd efgh ijkl mnop qrst uvwx yz
ABCD EFGH IJKL MNOP QRST UVWX YZ
12345 67890 -=[]\;',./
!@#$% ^&*() _+{}|:"<>? ♠♣♥♦
J
M
Q
Z
verdana
abcd efgh ijkl mnop qrst uvwx yz
ABCD EFGH IJKL MNOP QRST UVWX YZ
12345 67890 -=[]\;',./
!@#$% ^&*() _+{}|:"<>? ♠♣♥♦
J
M
Q
Z
tahoma
abcd efgh ijkl mnop qrst uvwx yz
ABCD EFGH IJKL MNOP QRST UVWX YZ
12345 67890 -=[]\;',./
!@#$% ^&*() _+{}|:"<>? ♠♣♥♦
J
M
Q
Z
arial
abcd efgh ijkl mnop qrst uvwx yz
ABCD EFGH IJKL MNOP QRST UVWX YZ
12345 67890 -=[]\;',./
!@#$% ^&*() _+{}|:"<>? ♠♣♥♦
J
M
Q
Z
cursive
abcd efgh ijkl mnop qrst uvwx yz
ABCD EFGH IJKL MNOP QRST UVWX YZ
12345 67890-=[]\;',./
!@#$% ^&*()_+{}|:"<>? ♠♣♥♦
J
M
Q
Z
Monaco (not available by default on MS windows)
abcd efgh ijkl mnop qrst uvwx yz
ABCD EFGH IJKL MNOP QRST UVWX YZ
12345 67890-=[]\;',./    zero is slashed!
!@#$% ^&*()_+{}|:"<>?
♠♣♥♦
J
M
Q
Z
Inconsolata (not available by default on mac OS )
abcd efgh ijkl mnop qrst uvwx yz
ABCD EFGH IJKL MNOP QRST UVWX YZ
12345 67890-=[]\;',./    zero is slashed!
!@#$% ^&*()_+{}|:"<>?
♠♣♥♦
J
M
Q
Z

Fonts I have known :

Image

Font name

As displayed in this browser

If the rendering in this column is not like the graphic in the first column then this browser does not have access to that font.

The character is coded as:
<sup style=color:darkBlue;font-size:150%>&#x241B;</sup>
Increaseing size just lowers it!

Some fonts have been loaded from this site using for example:
<style>
@font-face {font-family:"Courier Prime"; src:url("http://www.Real-World-systems.com/fonts/Courier Prime.ttf");}
@font-face {font-family:"SF Mono"; src:url("http://www.Real-World-systems.com/fonts/SFNSMono.ttf");}
</style>
image of font



image of fonts

system-uisystem-ui 1234  5678     90 verses ␛
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
"ALS Script"ALS Script 1234   5678     90 verses ␛
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
ArialArial      <td style=font-family:Arial>
1234   5678     90
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
"Arial Black""Arial Black" 1234   5678     90 verses ␛
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
"Arial Narrow""Arial Narrow" 1234   5678     90
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
"Bookman Old style" Bookman Old Style 1234   5678     90
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
"Comic Sans Ms" "Comic Sans Ms" 1234   5678     90
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
Courier

note: no weight is specified for this.
"screen font" that is not scalable

Courier 1234   5678     90
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
"Courier New" "Courier New" 1234   5678     90
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> Docs.MicroSoft.com/en-us/typography/font-list/courier-new
"Courier Prime"
For screenwriters' scripts
monospace font, looks best with two spaces after the period.
notice the lowercase y, $ , @
"Courier Prime" 1234   5678     90
III ABCDEFGHIJKLMNOPQRSTUVWXYZ
WWW abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
Garamond Garamond 1234   5678     90
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>

image of fonts
Georgia Georgia 1234   5678     90 verses ␛
Haettenschweiler Haettenschweiler 1234   5678     90 verses ␛
Impact Impact 1234   5678     90 verses ␛
"Lucida Grande"
Intended to be extremely legible when printed at small size or displayed on a low-resolution display
hence the name, from 'lucid' (clear or easy to understand).
Other Lucidas are not available by defautl on mac os
("Grande" seems a contridiction!)
yet a smaller font-size
Lucida Grande 1234   5678     90
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>
E verses ␛ verses <small>E <big>E

<small><small><small><small>
ABCDEFGHIJKLMNOPQRSTUVWXYZ (may present large verticle spacing)
abcdefghijklmnopqrstuvwxyz 1234567890
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>

"Lucida Sans Unicode"
not available by defautl on mac os
Lucida Sans Unicode 1234   5678     90
Marlett characters used in cell below
A-Z
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
A-Z
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
Microsoft Sans Serif Microsoft Sans Serif 1234   5678     90
MS Outlookcharacters used below
ABCD EFGH IJ MN
ABCD EFGH IJ MN
Palatino Palatino 1234   5678     90
Symbol Symbol 1234   5678     90
Tahoma Tahoma 1234   5678     90
"Palace Script MT" "Palace Script MT" abcd efgh ijkl mnop qrst uvwx yz
ABCD EFGH IJKL MNOP QRST UVWX YZ
12345 67890-=[]\;',./    zero is NOT slashed!
iiii
WWWW
TTTT

!@#$% ^&*()_+{}|:"<>?
♠♣♥♦ ␛
1234   5678     90
Monaco
(not available by default on MS windows)

(monospaced)
notice slashed zero

Monaco 1234   5678     90
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><
iiii
WWWW
TTTT
Menlo

(monospaced)
notice slashed zero

Menlo 1234   5678     90
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><
"SF Mono"
(Apple's San Francisco)
(monospaced)
Similar to "Helvetica Neue"
notice slashed zero
larger x-height
"text" & "display" versions, "display" automatically at 20pts and higher
"nicer" in particular:96Rae:cfy't
"SF Mono" 1234   5678     90
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><

∃ a version where 9 and 6 are more curved

Terminal
Microsoft WIndows
Terminal 1234   5678     90
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿>< verses ␛not ␛

image of fonts
"Times New Roman" Times New Roman 1234   5678     90
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><
"Trebucket MS" Trebucket MS 1234   5678     90
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><
Verdana Verdana 1234   5678     90
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><
Webdings characters used below
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><
Wingdings characters used below
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><
ABCD EFGH IJKL MNOP QRST UVWX YZ
abcd efgh ijkl mnop qrst uvwx yz
1234   5678     90
.,-   =[]'   ;/!@   #$%^
&*()_+|{}":?¿><
6809chargen

from DaFont

6809chargen 1234   5678     90 verses ␛
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890 verses ␛
. , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <>

src: url("http://Real-World-systems.com/fonts/6809char.ttf");}"

for slashed zero see Wikipedia. Try: Monaco <span style=font-family:Monaco>0</span>

Unicode fonts Letterlike Symbols additional font definitions are at grsites.com/fonts/, www.webpagepublicity.com/free-fonts.html#Free Fonts

webfonts.ffonts.net

Discussion about monospaced fonts for programming including anti-aliasing.

Programming fonts

input.djr.com/info/ input with 168 separate styles custommize download monospaced and proportional. , Inspired by Verdana, Input Sans font package was originally designed to replace the Helvetica-based system font on Mac OS X 10.10 Yosemite. Like Input, it is available free of charge for private and unpublished use.
Fira Mono font. It’s developed by Mozilla, https://github.com/tonsky/FiraCode
MicroSoft windows Consolas
Source Code Pro google
. Monoid
Ubuntu Mono
Sudo numbers and letters are different heights +
Droid Sans google
Roboto
Press Start 2P NO /

15.1 Introduction

A font is a set of glyphs, all observing the same basic motif according to design, size, appearance, and other attributes

To display a character with a particular font, the user agent identifies the font in the database that "best fits" (according to the font matching algorithm)

15.2 Font specification

Specify fonts name, for example "BT Swiss 721 Heavy Italic".

15.2.1 Font-family

15.2.2 font-family properties

[<family-name> |<generic-family> ],]* [<family-name> |<generic-family>]

Initial value depends on user agent; Applies to all elements; Inherited

Prioritized list of font-family names and/or generic family names is a font set (of the same style and size) that are searched in sequence to locate a glyph for a certain character.

Example of a font set for text that is expected to contain text with Latin characters and mathematical symbols with a fall back of serif family.
BODY { font-family: Baskerville, Symbol, serif }

    Types of font family names:
  1. <generic-family> : serif, sans-serif, cursive, fantasy, and monospace are the generic font families. They are keywords and must not be quoted.
  2. <family-name>: Baskerville, "Heisi Mincho W3" and "Symbol". provide a generic font incase the font family cannot be found. Names containing whitespace must be quoted.

For example use the verdana but if it's not available use a serif font.

  <style>
  body { font-family: verdana,serif; } 
  </style>
  </head>
  <body bgcolor=linen>
   <H1 style=font-family: MyOwnFont, impact>Test</H1>
   What's up, Doc?

Test

What's up, Doc?

Example(s):

The richer selector syntax of CSS2 may be used to create language-sensitive typography. For example, some Chinese and Japanese characters are unified to have the same Unicode codepoint, although the abstract glyphs are not the same in the two languages.

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }

This selects any element that has the given language - Japanese or Traditional Chinese - and requests the appropriate font.

15.2.3 Font styling: font-style, font-variant, font-weight and font-stretch properties

Faces within a font family.

  • font-style:normal | italic | oblique | inherit
    Initial:normal; Applies to all elements; Inherted

    normal font classified normal in the UA's font database. sometimes referred to as "roman" or "upright"
    oblique may have been generated by electronically slanting a normal font.
    Typically include Oblique, Slanted, or Incline in their names.
    italic in the UA's font database, or, if that is not available, one labeled oblique.
    Typically include Italic, Cursive, or Kursiv in their names.

  • font-variant: normal | small-caps | inherit
    Initial:normal; Applies to all elements; Inherted
    In a small-caps font, the glyphs for lowercase letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The font-variant property requests such a font for bicameral (having two cases, as with Latin script), has no visible effect for scripts that are unicameral (having only one case).
    normal font that is not labeled as a small-caps font.
    small-caps font that is labeled as a small-caps font. If a not available, user agents simulates a small-caps font, by taking a normal font and replacing the lowercase letters by scaled uppercase characters.
    The author considers using <span style=font-variant:small-caps;color:red> small-caps <span>
     <span style=font-style:oblique> very <span> <span style=font-style:italic> poor <span> style. 
    The author considers using small-caps very poor style.

    Causes text to be transformed to uppercase, the same considerations as for text-transform apply.

  • font-weight:lighter | 100 | 200 | 300 | normal aka 400 | 500 | 600 | bold aka 700 | 800 | 900 | bolder | inherit

  • ( These are shown in the font-weight they indicate using <span style=font-weight:vvv>vvv</span>)
    (although most font-familys don't support this many variations)

    Initial: normal, Applies to: all elements ; Inherted

    Example(s):

        P      { font-weight: normal }   
        H1     { font-weight: 700 }     
        BODY   { font-weight: 400 }
        STRONG { font-weight: bolder } 

    examples:

    arial normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter

    serif normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter

    serif <big> normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter

    sans-serif normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter

    fantasy normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter

    cursive normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter

    monospace normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter

    monospace normal, <big> lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter

    monospace 150% normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter

    Child elements inherit the computed value of the weight.

    font-stretch selects a normal, condensed, or extended face from a font family.

    The relative keywords wider & narrower set the value to the next value.

    15.2.4 font-size and font-size-adjust

    font-size: <absolute-size> *  | <relative-size> | <length> | <percentage> | inherit

    Initial: medium ; Applies to: all elements ; Inherited; Percentages: refer to parent element's font size ;

    font-size describes the size of the font when set solid.

    <absolute-size> refers to an entry in a table of font sizes computed and kept by the user agent:
    xx-small | x-small | small | medium | large | x-large | xx-large

    *Editor's note: Absolute is based on the user agent (i.e. brower)'s setting of text-size.
    This is VERY different then specifing the size using the nnpt, nnem, nn% or nnpx format. You can see the difference by clicking on View; Text size; larger menu option in Internet explorer.

    Notice that text specified by the absolute property value CHANGES whereas text specified by the numeric property does not. Permitting the user to change the presentation of the text in the browser is a very important feature and (IMHO) numeric specifications should be avoided.

    <relative-size> relative to the table of font sizes and the font size of the parent element.

    [ larger | smaller ]

    For example, if the parent element has a font size of medium, a value of larger will make the font size of the current element be large. If the parent element's size is not close to a table entry, the user agent interpolates between table entries or round off to the closest one. The user agent may have to extrapolate table values if the numerical value goes beyond the keywords.

    <length> A length value specifies an absolute font size (independent of the user agent's font table). Negative lengths are illegal.

    <percentage> A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in ems leads to more robust and cascadable style sheets.

    The actual value of this property may differ from the computed value due a numerical value on font-size-adjust and the unavailability of certain font sizes.

    Child elements inherit the computed font-size value otherwise, the effect of font-size-adjust would compound.
    editor's note:following examples are written with second string prefixed with <span style=font-size:xxxx; (opera and safari did em only with ; . opera and firefox didn't like a space before the pt form) with no other elements(no div or samp or blockquote) and no don't seem to be honored by all browsers!

           P { font-size: 16pt; } xXwW xXwW
          BLOCKQUOTE { font-size: larger } xXwW xXwW 1st level,
    and again xXwW xXwW 14pt 2nd level
    and again xXwW xXwW 16pt 3rd level
    xXwW
          EM { font-size: 150% } xXwW xXwW
          EM { font-size: 1.5em } xXwW xXwW

    In bicameral scripts, the subjective apparent size and legibility of a font are less dependent on their
    font-size value than on the value of their x-height, or,more usefully, on the ratio of these two values, called the aspect value (font size divided by x-height). The higher the aspect value, the more likely it is that a font at smaller sizes will be legible. Inversely, faces with a lower aspect value will become illegible more rapidly below a given threshold size than faces with a higher aspect value. Straightforward font substitution that relies on font size alone may lead to illegible characters.

    For example, the popular font Verdana has an aspect value of 0.58; when Verdana's font size 100 units, its x-height is 58 units.
    For comparison, Times New Roman has an aspect value of 0.46.
    Verdana tends to remain legible at smaller sizes than Times New Roman.
    Conversely, Verdana will often look too big if substituted for Times New Roman at a chosen size.

    This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in the substitute font.
    Values have the following meanings: none Do not preserve the font's x-height. <number> Specifies the aspect value. The number refers to the aspect value of the first choice font. The scaling factor for available fonts is computed according to the following formula:

      y(a/a') = c
    

    where:

    y = 'font-size' of first-choice font
    a' = aspect value of available font
    c = 'font-size' to apply to available font
    

    Example(s):

    For example, if 14px Verdana (with an aspect value of 0.58) was unavailable and an available font had an aspect value of 0.46, the font-size of the substitute would be 14 * (0.58/0.46) = 17.65px.

    Font size adjustments take place when computing the actual value of font-size. Since inheritance is based on the computed value, child elements will inherit unadjusted values.

    This image shows several typefaces rasterized at a common font size (11pt. at 72 ppi), together with their aspect values. Note that faces with higher aspect values appear larger than those with lower. Faces with very low aspect values are illegible at the size shown.
    This image shows the results of font-size-adjust where Verdana has been taken as the"first choice", together with the scaling factor applied. As adjusted, the apparent sizes are nearly linear across faces, though the actual (em) sizes vary by more than 100%. Note that font-size-adjust tends to stabilize the horizontal metrics of lines, as well.
    Comparison of 12 point fonts
    Comparison of font-adjusted fonts


    15.2.5 Shorthand font

    font:[ [ font-style || font-variant || font-weight ] ?
    font-size [ / line-height ]? font-family ]|
    caption | icon | menu | message-box | small-caption | status-bar | inherit

    Initial: see individual properties ; Applies to all elements ; Inherited ;
    Percentages allowed on font-size and line-height;

    The font property is, except as described , a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family, at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.

    All font-related properties are first reset to their initial values, including those listed in the preceding paragraph plus font-stretch and font-size-adjust. Then, those properties that are given explicit values in the font shorthand are set to those values. For a definition of allowed and initial values, see the previously defined properties. For reasons of backwards compatibility, it is not possible to set font-stretch and font-size-adjust to other than their initial values using the font shorthand property; instead, set the individual properties.

    Example(s):

    1. P { font: 12pt/14pt sans-serif }
    2. P { font: 80% sans-serif }
    3. P { font: x-large/110% "new century schoolbook", serif }
    4. P { font: bold italic large Palatino, serif }
    5. P { font: normal small-caps 120%/120% fantasy }
    6. P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

    In the second rule, the font size percentage (80%) refers to the font size of the parent element.
    In the third rule, the line height percentage (110%) refers to the font size of the element itself.

    The first three rules do not specify the font-variant and font-weight explicitly, so these properties receive their initial values (normal).
    Notice that the font family name "new century schoolbook", which contains spaces, is enclosed in quotes.

    The fourth rule sets the font-weight to 'bold', the font-style to 'italic', and implicitly sets font-variant to 'normal'.

    The fifth rule sets the font-variant ('small-caps'), the font-size (120% of the parent's font size), the line-height (120% of the font size) and the font-family ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: font-style and font-weight.

    The sixth rule sets the font-style, font-size, and class=propinst-font-family>font-family, the other font properties being set to their initial values.
    It then sets font-stretch to condensed since that cannot be set to that value using the font shorthand.

    The following values refer to system fonts:

    caption buttons, drop-downs, etc.
    icon
    menu dropdown menus and menu lists.
    message-box used in dialog boxes.
    small-caption for labeling small controls.
    status-bar used in window status bars.

    System fonts may only be set as a whole; that is, font-family, size, weight, style, etc. are set at the same time.
    These values may then be altered individually. This property is "almost" a shorthand property: system fonts can only be specified with this property, not with font-family itself, so font allows authors to do more than the sum of its subproperties. The individual properties such as font-weight are still given values taken from the system font, which can be independently varied.

    Example(s):

    BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
    BUTTON P { font: menu }
    BUTTON P EM { font-weight: bolder }
    

    If the font used for dropdown menus on a particular system happened to be, for example, 9-point Charcoal, with a weight of 600, then P elements that were descendants of BUTTON would be displayed as if this rule were in effect:

    BUTTON P { font: 600 9pt Charcoal }
    

    Because the font shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration:

    BUTTON P {
      font-style: normal;
      font-variant: normal;
      font-weight: 600;
      font-size: 9pt;
      line-height: normal;
      font-family: Charcoal
    } 
    

    15.2.6 Generic font families

    A fallback mechanism for preserving some of the style when none of the specific font famlies can be found.

    The five generic font families do not necessarily map to five distinct fonts, they may vary from browser to browser and may be specied by the browser user with a configuration or preferences option.

    serif

    Glyphs of serif fonts, have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs),
    typically proportionately-spaced, often display a greater variation between thick and thin strokes than fonts from the 'sans-serif' generic font family.

    Examples

    Latin "Times New Roman", Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit , Roman, ParkAvenue,
    Greek Bitstream Cyberbit
    Cyrillic Adobe Minion Cyrillic, Excelcior Cyrillic Upright, MonotypeAlbion 70, Bitstream Cyberbit, ER Bukinst
    Hebrew New Peninim, Raanana, Bitstream Cyberbit
    Japanese Ryumin Light-KL, Kyokasho ICA, Futo Min A101
    Arabic Bitstream Cyberbit
    Cherokee Lo Cicero Cherokee

    sans-serif

    Glyphs in sans-serif fonts,have stroke endings that are plain -- without any flaring, cross stroke, or other ornamentation.
    Typically proportionately-spaced, often have little variation between thick and thin strokes, compared to 'serif'.

    Examples

    Latin MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Arial, Univers, Futura, Helvetica , ITC Stone Sans, Gill Sans, Akzidenz Grotesk,
    Greek Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
    Cyrillic Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
    Hebrew
    Japanese Shin Go, Heisei Kaku Gothic W5
    Arabic MS Tahoma

    cursive

    Glyphs in cursive fonts, generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork. Fonts for some scripts, such as Arabic, are almost always cursive.The term 'cursive' applies to a font for any script, although other names such as Chancery, Brush, Swing and Script are also used in font names.

    Examples of fonts that fit this description include:

    Latin fonts Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery Script,
    Cyrillic fonts ER Architekt
    Hebrew fonts Corsiva
    Arabic fonts DecoType Naskh, Monotype Urdu 507

    fantasy

    Fantasy fonts, are primarily decorative while still containing representations of characters (as opposed to Pi or Picture fonts, which do not represent characters). Examples include:

    Latin fonts Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz, Space Toaster, Symbol , Vinta, Wingdings , Webdings

    monospace

    The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts, such as Arabic, look most peculiar.) The effect is similar to a manual typewriter, and is often used to set samples of computer code.

    Examples of fonts which fit this description include:

    Latin Courier, MS Courier New, Courier, Lucida Console , Prestige , Everson Mono Curlz MT
    Greek MS Courier New, Everson Mono
    Cyrillic ER Kurier, Everson Mono
    Japanese Osaka Monospaced
    Cherokee Everson Mono


    Many available fonts at www.google.com/fonts

    Discussion about top-10-programming-fonts/>monospaced fonts for programming including anti-aliasing.

    as well as fedora

    A open source font for coding including design discussion source code pro. downloadfont squirrel

    next: 15.3 Font Selection