This font is 1.2 times the default font, or 20 pixels.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>font-size</title>
<style type='text/css'>
body {
font-size: medium;
}
p#larger {
font-size: larger;
}
p#larger span {
font-size: 20px;
}
p#smaller {
font-size: smaller;
}
p#smaller span {
font-size: 12px;
}
span {
background: mistyrose;
}
</style>
</head>
<body>
<p>
The larger and smaller keywords of the font-size property
function using the scaling factor of 1.2.
</p>
<p id='larger'>
This font is 1.2 times the default font, or 20 pixels.<br />
<span>Evidenced by this point-of-reference.</span>
</p>
<p id='smaller'>
This font is 1.2 smaller than the default size, or pixels.<br />
<span>Evidenced by this point-of-reference.</span>
</p>
</body>
</html>
Related examples in the same category
| 1. | Font Property and Purpose | | |
| 2. | 'font' Example | | |
| 3. | font shortcut | | |
| 4. | Font shortcut: font: bold italic 2em Georgia, Times, "Times New Roman", serif; | | |
| 5. | font: 1em/1.5 Georgia, serif | | |
| 6. | font: bold 1em/1.5 Verdana, sans-serif | | |
| 7. | font: italic 1em/1.5 Georgia, serif; | | |
| 8. | Font color | | |
| 9. | font: status-bar | | |
| 10. | font: small-caption | | |
| 11. | font: message-box | | |
| 12. | font: menu | | |
| 13. | font: caption; | | |
| 14. | font: icon; | | |
| 15. | font: menu; | | |
| 16. | font: message-box; | | |
| 17. | font: small-caption; | | |
| 18. | font: status-bar; | | |
| 19. | font: italic small-caps bold 1.5em/3em sans-serif; | | |
| 20. | font: 32px "Monotype Corsiva"; | | |
| 21. | font: 16px sans-serif; | | |
| 22. | font: bold 24px sans-serif; | | |
| 23. | font: italic bold small-caps 24px sans-serif; | | |
| 24. | font: 16px monospace; | | |
| 25. | font-size is inheritable | | |
| 26. | Making font size smaller and smaller | | |
| 27. | This font size is 50% bigger | | |
| 28. | This font size is 25% smaller | | |
| 29. | font style | | |
| 30. | font style no italic no oblique | | |
| 31. | font style oblique italic | | |
| 32. | Generic font | | |
| 33. | Multiple fonts | | |
| 34. | Using system font | | |
| 35. | Font properties | | |
| 36. | HTML code for displaying generic font families | | |
| 37. | HTML source code for displaying font size values | | |
| 38. | Using font sizes in pixels for alignment | | |
| 39. | Using keyword font property values | | |
| 40. | Change font size with inline style | | |
| 41. | Font inheritance | | |
| 42. | Font size inheritance | | |
| 43. | CSS Built-in Fonts | | |
| 44. | CSS1 Font Properties Example | | |
| 45. | This demonstrates the use of the font-variant: small-caps; effect. | | |
| 46. | Relative font size | | |
| 47. | Test font at 100% | | |
| 48. | font: 12px sans-serif; | | |
| 49. | font-family: monospace; | | |
| 50. | font-variant: small-caps; | | |
| 51. | h4 font-weight: normal; | | |
| 52. | Using inline style to control font size for span | | |
| 53. | first-child font-weight: bold; | | |
| 54. | This font is 1 em in size and sans-serif. | | |
| 55. | Font style shortcut | | |
| 56. | Use font | | |
| 57. | This font is italic, small-caps, bold, 1em in size, with a 1.5 em line height and a sans-serif font. | | |
| 58. | make text that's italic, bold, small-caps,24 pixel sans-serif, which looks like a comic book font | | |
| 59. | Overlay font | | |
| 60. | font color 2 | | |
| 61. | System font: caption | | |
| 62. | System font: icon | | |
| 63. | System font: menu | | |
| 64. | System font: message-box | | |
| 65. | System font: small-caption | | |
| 66. | System font: status-bar | | |