Својство font-size

Својство font-size поставља величину фонта текста. Вредношћу својства служе било које јединице за величине (углавном, то су px, em или rem) или посебне кључне речи (користе се изузетно ретко).

Синтакса

cssселектор {
  font-size: вредност;
}

Вредности у облику кључних речи

Подразумевана вредност: medium.

Пример

Поставићемо величину фонта за пасусе на 20px:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-size: 20px;
}

Результат:

Пример

У овом примеру за пасус је постављена величина од 16px, а за span унутар њега - 150%. У овом случају величина фонта за span ће бити 150% од свог родитеља, односно пасуса, и његова стварна величина ће бити 16px * 150% = 24px:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

Пример

У овом примеру за пасус је постављена величина од 16px, а за span унутар њега - larger. У овом случају величина фонта за span ће бити већа него код његовог родитеља (пасуса):

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

Пример

Обратите пажњу на то да фонтови са различитим font-family а истим font-size визуелно могу бити сасвим различите величине (за решавање овог погледајте својство font-size-adjust).

У примеру испод оба пасуса имају постављен font-size од 16px, али различите font-family:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: