Font relative sizes : font size « CSS « HTML / CSS

Font relative sizes

  

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
p {font-family:arial; font-size:12pt;}

/* relative sizes */
p.smaller{font-size:smaller;}
p.larger {font-size:larger;}
</style>

</head>

<body>
<h1>Relative sizes (relative to 12pt)</h1>
<p class="smaller">This relative font size is smaller</p>
<p class="larger">This relative font size is larger</p>
</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 size: pixel, point, inch, mm and em, ex
43.	Font percentages
44.	font-stretch values
45.	font size settings
46.	font size with minimal values
47.	Set font size to 90% for paragraph
48.	Set font size to 120% for H1
49.	font size percentage smaller
50.	font size percentage larger
51.	font size with relative keyword
52.	font size and relative keyword: larger and large
53.	font-size:20px; assigns a length of 20 pixels to font-size.
54.	Set font size to small
55.	Set font size to 1.2em
56.	Font size with calculation
57.	font-size: xx-small
58.	Two typefaces with different x-heights shown at the same font-size
59.	Set body font size
60.	Nested font size
61.	Paragraph text is black and in 12pt font
62.	Font size by Absolute Sizes
63.	Font size by Pixels
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