Ιδιότητα font-size

Η ιδιότητα font-size ορίζει το μέγεθος της γραμματοσειράς του κειμένου. Ως τιμή της ιδιότητας χρησιμοποιούνται οποιεσδήποτε μονάδες μεγέθους (συνήθως, είναι px, em ή rem) ή ειδικές λέξεις-κλειδιά (χρησιμοποιούνται πολύ σπάνια).

Σύνταξη

επιλογέας {
	font-size: τιμή;
}

Τιμές σε μορφή λέξεων-κλειδιών

Τιμή	Περιγραφή
`xx-small`	Το πιο πιο μικρό. Παράδειγμα: Lorem ipsum dolor sit amet.
`x-small`	Το πιο μικρό. Παράδειγμα: Lorem ipsum dolor sit amet.
`small`	Μικρό. Παράδειγμα: Lorem ipsum dolor sit amet.
`medium`	Μεσαίο. Παράδειγμα: Lorem ipsum dolor sit amet.
`large`	Μεγάλο. Παράδειγμα: Lorem ipsum dolor sit amet.
`x-large`	Πολύ μεγάλο. Παράδειγμα: Lorem ipsum dolor sit amet.
`xx-large`	Το πιο μεγάλο. Παράδειγμα: Lorem ipsum dolor sit amet.
`larger`	Μεγαλύτερο από τη γραμματοσειρά του γονέα κατά κάποια τιμή.
`smaller`	Μικρότερο από τη γραμματοσειρά του γονέα κατά κάποια τιμή.

Προεπιλεγμένη τιμή: medium.

Παράδειγμα

Ας ορίσουμε για τις παραγράφους μέγεθος γραμματοσειράς 20px:

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

p {
	font-size: 20px;
}

Παράδειγμα

Σε αυτό το παράδειγμα, για την παράγραφο ορίζεται μέγεθος σε 16px, και για το span μέσα σε αυτή - 150%. Σε αυτή την περίπτωση, το μέγεθος γραμματοσειράς για το span θα είναι 150% από τον γονέα του, δηλαδή την παράγραφο, και το πραγματικό του μέγεθος θα είναι 16px * 150% = 24px:

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

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

Παράδειγμα

Σε αυτό το παράδειγμα, για την παράγραφο ορίζεται μέγεθος σε 16px, και για το span μέσα σε αυτή - larger. Σε αυτή την περίπτωση, το μέγεθος γραμματοσειράς για το span θα είναι μεγαλύτερο από αυτό του γονέα του (παραγράφου):

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

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

Παράδειγμα

Παρατηρήστε ότι γραμματοσειρές με διαφορετική font-family και το ίδιο font-size οπτικά μπορεί να είναι εντελώς διαφορετικού μεγέθους (για την επίλυση αυτού του προβλήματος δείτε την ιδιότητα font-size-adjust).

Στο παρακάτω παράδειγμα, και στις δύο παραγράφους ορίζεται font-size σε 16px, αλλά διαφορετική font-family:

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

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