Buttons & Menu Colors Create & Check Mailto CSS3 - W3C Recommendation A Pure CSS3 Slideshow Animations Encoding Fonts & Styles Footer Always Bottom Gradient Backgrounds Resizable Videos Horizontal Slide Show Resizable Slideshow JS Background Slideshow JS Slideshow, Vertical Menu JS Slideshow, Horizontal Menu Simple Canvas Code Editor Simple SVG Code Editor Site Pinning Unicode & HTML Code Universal Page Template jQuery Slide Show


Fonts & Fonts Styles

The Difference Between px, pt, em and %

 - Pixels refer to the individual units that make up your screen.
 - Points are typically used in printed media.
 - Ems are based on the documents size and relative to their parent element.
 - Percent is based on document size for accessability and mobile devices.

Recommendations For Browser And Monitor Screen Resolution Compatibility:

 - Use % to place objects on the page or set sizes on the page.
 - Use em for sizes and distances related to the text size rendered.
 - Use the relative text size names, or use a percentage of the base font, to set font sizes.

Which one? em, pt, px, % ?

Simple Formulas For Font Size Computing:

px = (pt * 4)/3
pt  = (px * 3)/4
em = pt/12
percent = (pt * 100)/12

CSS Font Size Values Based On A 16px (Default) Body Font Size

Name Pixels Points Ems Percent
  8 px 6 pt 0.5 em 50%
xx-smal 9 px 7 pt 0.55 em 55%
x-small 10 px 7.5 pt 0.625 em 62.5%
  11 px 8 pt 0.7 em 70%
  12 px 9 pt 0.75 em 75%
small 13 px 10 pt 0.8 em 80%
  14 px 10.5 pt 0.875 em 87.5%
  15 px 11 pt 0.95 em 95%
medium 16 px 12 pt 1 em 100%
  17 px 13 pt 1.05 em 105%
  18 px 13.5 pt 1.125 em 112.5%
large 19 px 14 pt 1.2 em 120%
  20 px 14.5 pt 1.25 em 125%
  21 px 15 pt 1.3 em 130%
  22 px 16 pt 1.4 em 140%
  23 px 17 pt 1.45 em 145%
x-large 24 px 18 pt 1.5 em 150%
  26 px 20 pt 1.6 em 160%
  29 px 22 pt 1.8 em 180%
  32 px 24 pt 2 em 200%
  35 px 26 pt 2.2 em 220%
  36 px 27 pt 2.25 em 225%
  37 px 28 pt 2.3 em 230%
  38 px 29 pt 2.35 em 235%
  40 px 30 pt 2.45 em 245%
xx-large 42 px 32 pt 2.55 em 255%
  45 px 34 pt 2.75 em 275%
  48 px 32 pt? 3 em 300%


Headline Font Size Values

  Pixels Points Ems Percent Name
H6 11 px 8 pt 0.7 em 70%  
H5 13 px10 pt 0.8 em 80% small
H4 16 px12 pt 1 em 100% medium
H3 19 px14 pt 1.2 em 120% large
H2 24 px 18 pt 1.5 em 150% x-large
H1 32 px 24 pt 2 em 200%  


Which One Is The Best To Use?

CSS Fonts - px, pt, em and % W3C Recommendations W3C All About Fonts



Select Styles And Click On Font Family:


Font Family

Agency FB
Algerian
Arial Narrow
Arial Rounded MT Bold
Arial Unicode MS
Arial
Baskerville Old Face
Berlin Sans FB Demi
Berlin Sans FB
Blackadder ITC
Bodoni MT Black
Bodoni MT Condensed
Bodoni MT Poster Compressed
Bodoni MT
Book Antiqua
Bookman Old Style
Britannic Bold
Broadway
Brush Script MT
Calibri
Californian FB
Calisto MT
Cambria
Candara
Castellar
Centaur
Century Gothic
Century Schoolbook
Chiller
Colonna MT
Comic Sans MS
Consolas
Constantia
Copperplate Gothic Bold
Corbel
Courier New
Courier
Curlz MT
Eras Medium ITC
ErasBold ITC
Footlight MT Light
Forte
Garamond
Georgia
Gigi
Gill Sans MT Condensed
Gill Sans MT Ext Condensed Bold
Gill Sans MT
Gill Sans Ultra Bold Condensed
Gill Sans Ultra Bold
Gloucester MT Extra Condensed
Goudy Old Style
Goudy Stout
Haettenschweiler
Harlow Solid Italic
Harrington
Helvetica
Impact
Imprint MT Shadow
Informal Roman
Jokerman
Kartika
Kunstler Script
Lucida Fax
Lucida Handwriting
Lucida Sans Typewriter
Lucida Sans Unicode
LucidaCalligraphy
Magneto
Matisse ITC
Matura MT Script Capitals
Microsoft Sans Serif
Mistral
Monotype Corsiva
Niagara Engraved
Niagara Solid
Onyx
Palace Script MT
Papyrus
Pepita MT
Perpetua Titling MT
Perpetua
Playbill
Pristina
Rage Italic
Ravie
Rockwell Condensed
Rockwell
Script MT Bold
Segoe UI
Showcard Gothic
Snap ITC
Stencil
Sylfaen
Tahoma
Terminal
Times New Roman
Trebuchet MS
Tw Cen MT Condensed Extra Bold
Tw Cen MT Condensed
Tw Cen MT
Verdana
Viner Hand ITC
Vivaldi
Vladimir Script
Vrinda
Wide Latin
Font Family

Note 1: Difference Between Serif and Sans-serif Fonts:

Serif vs. Sans-serif

On computer screens, Sans-serif fonts are considered easier to read than Serif fonts. 5 special words in font-family definition to specify a generic font family: serif, sans-serif, cursive, fantasy, and monospace. Generic font families are basically just "types" of fonts (fonts which have certain characteristics). They are not actual names of fonts, they simply give a special instruction to the web browser. Most web browsers used Sans-serif fonts. You can Download over 150,000 fonts from Adobe, Linotype, Monotype, ITC and hundreds of other font providers: Full Font List

Note 2: Google Font API and the Google Font Directory:
The Google Font Directory (showing 184 font families) provides high-quality web fonts that you can include in your pages using the Google Font API. The fonts in the Directory are all released under Open Source Licenses; you can use them on any non-commercial or commercial project.






Convert Integer Number in Words:

Maximum Number is: 2,147,483,646