CSS sayfadaki metinlerin büyüklüğünü biçimlendirmek için birkaç birim sunar. Birimlerin kullanımı arasında herhangi bir kısıtlama olmadan hepsi kullanılabilir.
| Ölçü Birimi | Piksel Karşılığı (px) | En İyi Kullanım Alanı |
|---|---|---|
| px | 1 px | Web tasarımında sık kullanılır, |
| pt | 1 pt ≈ 1.33 px | Baskı tasarımlarında kullanılır. |
| pc | 1 pc ≈ 16 px | Baskı tasarımlarında (büyük ölçekli baskılar) kullanılır. |
| em | 1 em = Üst font büyüklüğü 2 em = Üst font büyüklüğü x 2 | Esnek tasarımlar için kullanılır, bir üst öğeye bağlıdır. |
| rem | 1 rem = Sayfanın font büyüklüğü 2 rem = Sayfanın font büyüklüğü x 2 | Oranlı tasarımlar için kullanılır, sayfanın (html) font büyüklüğüne bağlıdır. |
| in | 1 in = 96 px | Fiziksel baskıda kullanılır. |
| cm | 1 cm ≈ 37.8 px | Fiziksel baskıda kullanılır. |
| mm | 1 mm ≈ 3.78 px | Fiziksel baskıda kullanılır. |
px, pt, pc, in, cm, mm gibi fiziksel birimler sabit değerlerdir. Ancak, em ve rem değişken olup, bağlı oldukları öğenin font büyüklüğüne göre değişir.
Tarayıcıların varsayılan font büyüklüğü 16px olduğu için 1em ve 1rem genellikle 16px kabul edilir. Ancak, eğer <html> öğesinde font-size: 20px; olarak ayarlanırsa, 1rem = 20px olur.
Baskı ortamında (print) ölçümler fiziksel olarak değişebilir, çünkü ekran çözünürlüğü ve DPI (dots per inch) farklılık gösterebilir.
Ekrandaki bir fiziksel piksele denk gelir, sabit bir değerdir.
p {
font-size: 18px;
}Kullanım şekli:
Lorem ipsum dolor sit amet
Baskıya yönelik tasarımlarda, genellikle yazıcı çıktıları için kullanılır.
p {
font-size: 12pt;
}Kullanım şekli:
Lorem ipsum.
Baskı ve tipografi için kullanılır, özellikle büyük ölçekli baskı tasarımlarında tercih edilir.
p {
font-size: 2pc;
}Kullanım şekli:
Lorem ipsum.
Ebeveyn elemanın büyüklüğüne bağlı olarak CSS özelliği eklenen elemanın büyüklüğü değişebilir.
div {
font-size: 16px;
}
p {
font-size: 1.5em;
}Kullanım Şekli:
Lorem ipsum.
Sayfanın root (html) font büyüklüğüne göre göre ayarlanır.
html {
font-size: 16px;
}
p {
font-size: 1.25rem; /* 16px * 1.25 = 20px */
}Kullanım şekli:
Lorem ipsum dolor sit amet
Baskıya yönelik tasarımlarda fiziksel boyutları belirtmek kullanılır.
p {
font-size: 1in;
}Kullanım şekli:
Lorem ipsum dolor sit amet
Cm (santimetre) ve mm (milimetre) de baskı için kullanılan fiziksel ölçü birimlerindendir.
.cm {
font-size: 2cm;
}
.mm {
font-size: 10mm;
}Kullanım şekli:
cm: Lorem ipsum dolor sit amet
mm: Lorem ipsum dolor sit amet