در CSS براي اندازه گيري، واحدهاي متعددي وجود دارد كه هر كدام براي مقاصد خاص استفاده مي شود. واحد هاي اندازه گيري در CSS عبارتند از:

واحد اندازه گيري Points و Picas:

اگر شما صفحه تان را براي نمايش براي مانيتور طراحي مي كنيد، نبايد از واحدهاي Points و Picas استفاده كنيد. چرا كه اين واحدها براي مقاصد چاپي بوجود آمده اند. هر Point معادل يك هفتادو دوم اينچ مي باشد. (1 Point: 1/72 Inch) و هر Pica معادل يك ششم اينچ مي باشد. (1 Pica = 1/6 Inch) بنابراين هر Pica معادل 12 point خواهد بود. اگر صفحه تان را براي چاپ طراحي مي كنيد (نسخه قابل چاپ) استفاده از واحد هاي نقطه و پيكا، بهترين انتخاب خواهند بود. بنابر اين براي طراحي صفحات وب نبايد از اين واحد ها استفاده شود. چرا كه در platform ها و مرورگر هاي مختلف، متون با ابعاد متفاوتي ظاهر خواهند شد.

واحد اندازه گيري پيكسل:

اغلب طراحان وب از واحد پيكسل براي انداره گيري استفاده مي كنند. چرا كه اين واحد اندازه گيري، در همه سيستمهاي عامل و مرورگر ها به صورت يكساني نمايش داده مي شود. با اين وجود استفاده از واحد اندازه گيري پيكسل، تنظميات پيش فرض مرورگر كاربران براي اندازه فونت را ناديده مي گيرد و كاربران قادر به تغيير اندازه متن صفحه نخواهند بود. بنابراين كاربراني كه مشكل بينايي دارند و تمايل به بزرگتر كردن فونت براي خوانايي بهتر صفحه را دارند، با مشكل مواجه خواهند شد (يك مشل Accessibility). بنابراين از آنجائيكه استفاده از واحد پيكسل انتخاب آساني است، ولي به خاطر مشكلي كه ذكر گرديد بايد از واحد اندازه گيري ديگري استفاده كرد. همچنين استفاده از واحد اندازه گيري پيكسل براي نسخه هاي چاپي متون توصيه نمي شود. همانطوريكه براي نمايش متون بر روي مانيتور نبايد از واحدهاي اندازه گيري پيكا و پوينت استفاده كرد.

واحد اندازه گيري Ems:

واحد em يك واحد اندازه گيري نسبي براي فونت متون صفحه وب مي باشد. يك Em بنابر تعريف، معادل ارتفاع حرف M در فونت پيش فرض مي باشد. در CSS يك em در واقع معادل اندازه فونت پيش فرض كاربر مي باشد. به عبارتي ديگر، كاربر خواهد توانست اندازه فونت بكار رفته در صفحه وب شما را تغيير دهد.
به عنوان طراح وب، اين قابليت تغيير اندازه فونت توسط كاربر، ممكن است زياد خوش آيند نباشد. ولي از ديد كاربران اين امكان سودمند خواهند بود كه بتوانند صفحه وب شما را با فونت بزرگتر مشاهده كنند.

شما با استفاده از واحد EM مي توانيد ابعاد فونت را با اعداد اعشاري نيز تعريف نماييد. مثلا اگر بخواهيد ابعاد فونت متنتان 10%   كوچكتر از مقداري كه توسط كاربر در مرورگرش تنظيم شده است نمايش دهيد، كافيست از قانون زير استفاده كنيد:

font-size:0.9em;

و اگر بخواهيد ابعاد متن شما 10%  بزرگتر از ميزاني كه توسط كاربر در مرورگرش تنظيم شده است، باشد از قانون زير مي توانيد استفاده كنيد:

font-size:1.1em;

 واحد اندازه گيري Exes:

واحد ex يك واحد اندازه گيري نسبي براي فونت متون صفحه وب مي باشد. يك Ex بنابر تعريف، معادل ارتفاع حرف كوچك x در فونت پيش فرض تنظيم شده توسط كاربر مي باشد. متاسفانه مرورگر هاي مدرن هنوز از اين واحد اندازه گيري به طور كامل پشتيباني نمي كنند. لذا استفاده از اين واحد اندازه گيري توصيه نمي شود.

واحد اندازه گيري درصدي – Percentage:

مشابه واحد هاي اندازه گيري Ems و Exes ، واحد درصدي به كاربران اجازه مي دهد كه ابعاد فونت را تغيير دهند. براي نمايش متن با ابعادي كه بطور پيش فرض توسط مرور گر كاربر تنظيم شده است، كافيست ابعاد فونت را برابر با 100%  دهيد. (100%  معادل 1em مي باشد(.  با افزايش و كاهش ميزان درصد، مي توان متن را بزرگتر و كوچكتر نمايش داد:

font-size:100%; 

استفاده از كلمات كليدي رزرو شده:

شما همچنين مي توانيد با استفاده از كلمات كليدي رزرو شده ابعاد فونت را هم بصورت مطلق و هم بصورت نسبي تغيير دهيد.

كلمات كليدي براي تغيير ابعاد فونت بصورت مطلق:
در CSS براي تغيير ابعاد فونت بصورت مطلق از هفت كلمه كليدي استفاده مي شود:

xx-small
x-small
small
medium
large
x-large
xx-large 

اين كلمات نسبت به همديگر تعريف مي شوند و در مرورگر هاي مختلف بطور متفاوت تعبير مي شوند. بيشتر مرورگرها سايز Medium را مشابه متني كه قانوني براي ان تعريف نشده است نمايش مي دهند. و بقيه سايز ها را نسبت به سايز Medium بزرگتر و يا كوچكتر نمايش مي دهند. اينترنت اكسپلورر 5 (و اينترنت اكسپلورر 6 بسته به نوع سند تعريف شده در DOCTYPE ) سايز small را مشابه متني كه استايل براي آن تعريف نشده است نمايش مي دهند و بقيه سايز ها را نسبت به small بزرگتر و يا كوچكتر نمايش مي دهند.

اين واحد ها از آنجائيكه از المان پدر هيچ چيزي را به ارث نمي برند، مطلق خوانده مي شوند ولي بر خلاف واحدهاي پيكسل و پوينت، به كاربر اين امكان را مي دهند كه سايز متن را در مرورگر خود افزايش و يا كاهش دهند. مشكل عمده اي كه در رابطه با استفاده از كلمات كليدي براي واحد هاي اندازه گيري مطلق وجود دارد اينست كه بطور مثال متني كه سايز آن برابر x-small قرار داده شده است ممكن است در يك مرورگر به خوبي قابل مشاهده باشد ولي در مرورگر ديگر قابل خواندن نباشد.

كلمات كليدي براي تغيير ابعاد فونت بصورت نسبي:
كلمات كليدي كه براي اندازه گيري نسبي از آنها استفاده مي شود عبارتند از larger و smaller . كه ابعاد خود را از المان پدر – Parent Element اخذ مي كنند. (مشابه واحد هاي اندازه گيري em و % ). بنابراين اگر شما اندازه متن موجود در برچسب <p> را به small تنظيم كرده باشيدو بخواهيد قسمتي از متن را با تاكيد بيشتري نمايش دهيد، كافيست قوانين زير را تعريف كنيد:

p{ font-size:small;}
em{font-size:larger}

در كد HTML زير متن موجود بين برچسبهاي <em> با فونت بزرگتر نسبت به بقيه متنهاي موجود در پاراگراف نمايش داده مي شوند. (در اين مثال المان <p> در واقع پدر – Parent المان <em> مي باشد)

<p>This is a sample text which shows how <em>relative keywords</em> are used in css</p>  

واحد هاي اندازه گيري نسبي و مسئله وراثت – Inheritance:
هنگامي كه شما از واحد هاي اندازه گيري نسبي استفاده مي كنيد، به اين نكته توجه داشته باشيد كه المان مربوطه سايز خود را از المان پدر به ارث مي برد. (همانگونه كه در مثال فوق مشاهده كرديد) اين موضوع به راحتي در ساختارهاي ساده به راحتي قابل درك است. اما اين وراثت در Layout و چيدمانهاي پيچيده و تو در تو كه در آنها المان پدر براحتي قابل تشخيص نمي ياشد ممكن است كمي مشكل ساز باشد. براي روشن شدن موضوع به ذكر يك مثال اكتفا مي كنيم.

فرض كنيد شما مي خواهيد متني كه درون سلولهاي يك جدول (در HTML براي مشخص كردن يك خانه از برچسب <td> استفاده مي شود) نمايش داده مي شود به اندازه 80% سايز پيش فرض تعيين شده در مرورگر كاربر باشد. براي اين منظور قانون CSS را بصورت زير تعريف مي كنيم.

td{ font-size:100%;} 

در صفحه اي كه از جداول تودرتو خبري نيست، متن كمي كوچكتر از حالت پيش فرض نمايش داده خواهد شد. ولي در ساختاري كه از جداول تودرتو استفاده شده است، موضوع كمي عجيب به نظر مي رسد.

بطور مثال در كد زير، متن رفته رفته كوچكتر نمايش داده مي شود چرا كه هر المان ابعاد فونت المان پدر را به عنوان سايز پايه در نظر مي گيرد. به عبارتي ديگر در ساختر فوق متن اول به اندازه 80%  سايز پيش فرض و متن دوم به اندازه 64%  پيش فرض و متن سوم به اندازه 51.2% سايز پيش فرض نمايش داده مي شود.

<table>
	<tr> 
		<td>جدول اولي
			<table>
				<tr>
					<td>جدول دوم
						<table>
							<tr>
								<td>جدول سوم</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>