Font size by Pixels : font size « CSS « HTML / CSS






Font size by Pixels

  




<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
body {
  font-size: 18px;
}


td {
  padding: 10px;
  width: 210px;
}

p.absoluteone {
  font-size: xx-small;
}

p.absolutetwo {
  font-size: x-small;
}

p.absolutethree {
  font-size: small;
}

p.absolutefour {
  font-size: medium;
}

p.absolutefive {
  font-size: large;
}

p.absolutesix {
  font-size: x-large;
}

p.absoluteseven {
  font-size: xx-large;
}

p.pixelsone {
  font-size: 9px;
}

p.pixelstwo {
  font-size: 12px;
}

p.pixelsthree {
  font-size: 14px;
}

p.pixelsfour {
  font-size: 18px;
}

p.pixelsfive {
  font-size: 24px;
}

p.pixelssix {
  font-size: 36px;
}

p.pixelsseven {
  font-size: 48px;
}

p.picaone {
  font-size: 1pc;
}

p.picatwo {
  font-size: 2pc;
}

p.picathree {
  font-size: 3pc;
}

p.picafour {
  font-size: 4pc;
}

p.pointone {
  font-size: 9pt;
}

p.pointtwo {
  font-size: 12pt;
}

p.pointthree {
  font-size: 14pt;
}

p.pointfour {
  font-size: 18pt;
}

p.pointfive {
  font-size: 24pt;
}

p.pointsix {
  font-size: 36pt;
}

p.pointseven {
  font-size: 48pt;
}

p.relativeone {
  font-size: smaller;
}

p.relativetwo {
  
}

p.relative {
  font-size: larger;
}

p.emone {
  font-size: 1em;
}

p.emtwo {
  font-size: 2em;
}

p.emthree {
  font-size: 3em;
}

p.emfour {
  font-size: 4em;
}

p.exone {
  font-size: 1ex;
}

p.extwo {
  font-size: 2ex;
}

p.exthree {
  font-size: 3ex;
}

p.exfour {
  font-size: 4ex;
}

p.exfive {
  font-size: 5ex;
}

p.exsix {
  font-size: 6ex;
}

p.exseven {
  font-size: 7ex;
}

p.percentone {
  font-size: 50%;
}

p.percenttwo {
  font-size: 75%;
}

p.percentthree {
  font-size: 100%;
}

p.percentfour {
  font-size: 150%;
}

p.percentfive {
  font-size: 200%;
}

p.percentsix {
  font-size: 400%;
}
</style>
</head>

<body>
<h1>Font Sizes</h1>

<table><tr><td valign="top">

<h2>Absolute Sizes</h2>
<p class="absoluteone">xx-small</p>
<p class="absolutetwo">x-small</p>
<p class="absolutethree">small</p>
<p class="absolutefour">medium</p>
<p class="absolutefive">large</p>
<p class="absolutesix">large</p>
<p class="absoluteseven">large</p>

</td><td valign="top">

<h2>Pixels</h2>
<p class="pixelsone">9 px</p>
<p class="pixelstwo">12 px</p>
<p class="pixelsthree">14 px</p>
<p class="pixelsfour">18 px</p>
<p class="pixelsfive">24 px</p>
<p class="pixelssix">36 px</p>
<p class="pixelsseven">48 px</p>

</td><td valign="top">

<h2>Points</h2>
<p class="pointone">9 pt</p>
<p class="pointtwo">12 pt</p>
<p class="pointthree">14 pt</p>
<p class="pointfour">18 pt</p>
<p class="pointfive">24 pt</p>
<p class="pointsix">36 pt</p>
<p class="pointseven">48 pt</p>

</td><td valign="top">

<h2>Picas</h2>
<p class="picaone">1 pc</p>
<p class="picatwo">2 pc</p>
<p class="picathree">3 pc</p>
<p class="picafour">4 pc</p>

</td></tr></table>
<br /><hr /><br />
<table><tr><td valign="top">

<h2>Relative Sizes</h2>
<p class="relativeone">smaller</p>
<p class="relativetwo">no style</p>
<p class="relativethree">larger</p>

</td><td valign="top">

<h2>Ems</h2>
<p class="emone">1em</p>
<p class="emtwo">2em</p>
<p class="emthree">3em</p>
<p class="emfour">4em</p>

</td><td valign="top">

<h2>Exs</h2>
<p class="exone">1ex</p>
<p class="extwo">2ex</p>
<p class="exthree">3ex</p>
<p class="exfour">4ex</p>
<p class="exfive">5ex</p>
<p class="exsix">6ex</p>
<p class="exseven">7ex</p>

</td><td valign="top">

<h2>Percents</h2>
<p class="percentone">50%</p>
<p class="percenttwo">75%</p>
<p class="percentthree">100%</p>
<p class="percentfour">150%</p>
<p class="percentfive">200%</p>
<p class="percentsix">400%</p>

</td></tr></table>
 
</body>
</html>

   
  








Related examples in the same category

1.'font-size' Example
2.font-size: 18px
3.font size: small
4.Set font size to 6em
5.Percentange larger
6.Percentange smaller
7.Font size relative selector
8.font-size larger is incremental
9.font-size smaller is incremental
10.font-size: from 24pt to 7pt
11.font-size percent
12.font-size: smaller
13.font-size: larger
14.The larger and smaller keywords of the font-size property function using the scaling factor of 1.2.
15.This font is 1.2 times the default font, or 20 pixels
16.Percentage font sizes apply a font size relative to the parent element's font size.
17.Make font sizes smaller by percentage.
18.font-size: xx-small;
19.font-size: x-small;
20.font-size: small;
21.font-size: medium;
22.font-size: large;
23.font-size: x-large;
24.font-size: xx-large;
25.font-size: larger;
26.font-size: smaller;
27.font-size: 150%; (50% larger)
28.font-size: 75%; (25% smaller)
29.font-size: 1.5em; (50% larger)
30.font-size: 0.75em; (25% smaller)
31.font-size: 100px;
32.font-size: 20px;
33.font size relative length unit
34.font size relative larger
35.font size relative smaller
36.font size absolute keywords
37.font is 150% of the size of the user's font size preferences.
38.Font minimal value
39.This font is 90% of the 18 pixel size specified
40.font relative size
41.Font absolute measurements
42.Font relative sizes
43.font size: pixel, point, inch, mm and em, ex
44.Font percentages
45.font-stretch values
46.font size settings
47.font size with minimal values
48.Set font size to 90% for paragraph
49.Set font size to 120% for H1
50.font size percentage smaller
51.font size percentage larger
52.font size with relative keyword
53.font size and relative keyword: larger and large
54.font-size:20px; assigns a length of 20 pixels to font-size.
55.Set font size to small
56.Set font size to 1.2em
57.Font size with calculation
58.font-size: xx-small
59.Two typefaces with different x-heights shown at the same font-size
60.Set body font size
61.Nested font size
62.Paragraph text is black and in 12pt font
63.Font size by Absolute Sizes
64.Font size by Points
65.Relative Font Sizes
66.Font size by Ems
67.Font size by Ex
68.Font size by percentage
69.Relative font size
70.This font is 24 pixels tall and this div is 3 ems tall