Pixel, στιγμές και DPI
Η στιγμή (point, pt) είναι φυσική μονάδα: 1 pt = 1/72 της ίντσας, σταθερό πάνω στο τζάμι. Το CSS pixel δεν είναι, το μέγεθός του εξαρτάται από την οθόνη. Η γέφυρα χρειάζεται δύο πράγματα: το DPI (τα φυσικά pixel του panel ανά ίντσα, το δίνεις εσύ) και το DPR (πόσα φυσικά pixel αντιστοιχούν σε 1 CSS pixel, το διαβάζει ο browser).
Ο τύπος: 1 CSS px = (72 × DPR) / DPI στιγμές. Στη δική σου οθόνη: DPI —, DPR —, άρα CSS ppi — (= DPI/DPR, πόσα CSS px χωράνε σε μία φυσική ίντσα). Από εκεί: 1 px = — pt, 1 pt = — px. Το «καθαρό» φυσικό: 1 pixel του ίδιου του panel = — pt.
Το μιλιμετρέ χαρτί (cm / pt)
Το φόντο πίσω από κάθε κείμενο είναι πραγματικό μιλιμετρέ, σχεδιασμένο με βάση το DPI που έδωσες. Σε cm: μικρό τετράγωνο = 1 mm, χοντρή γραμμή = 1 cm. Σε pt: μικρό τετράγωνο = 1 pt, χοντρή γραμμή = 12 pt (μία πίκα). Ο αριθμημένος χάρακας από πάνω δίνει την κλίμακα. Αν το DPI είναι λάθος, τα τετράγωνα δεν θα είναι πραγματικά cm/pt, γι' αυτό αξίζει να το βαθμονομήσεις πρώτα.
ch, και ο λόγος ch ÷ χαρακτήρες
Το ch είναι το πλάτος του χαρακτήρα «0» στη συγκεκριμένη γραμματοσειρά και μέγεθος. «Το κείμενο είναι ≈ N ch» σημαίνει ότι απλώνεται σε όσο χώρο N μηδενικά. Χρήσιμο για στήλες/πλάτη σε ch στο CSS.
Ο λόγος ch ÷ πλήθος χαρακτήρων = το μέσο πλάτος χαρακτήρα, μετρημένο σε ch. Σε monospace είναι ακριβώς 1.00 (κάθε χαρακτήρας = ένα «0»). Σε αναλογικές είναι < 1 όταν οι χαρακτήρες κατά μέσο όρο είναι στενότεροι από το «0» (πυκνότερο κείμενο), ή > 1 αν είναι πλατύτεροι. Ζωντανά, για τις επιλεγμένες:
| Γραμματοσειρά | ch | χαρακτ. | ch÷χαρ. |
|---|
Ύψος: em, cap-height, x-height
Το «μέγεθος» που ορίζεις (π.χ. — px = — pt = — mm) είναι το ύψος του em (το νοητό τετράγωνο της γραμματοσειράς), όχι το ύψος των ίδιων των γραμμάτων. Τα πραγματικά μαύρα γράμματα είναι πιο κοντά: το cap-height = ύψος των κεφαλαίων (π.χ. «Η»), το x-height = ύψος των πεζών χωρίς ουρές (π.χ. «x»). Δύο γραμματοσειρές στο ίδιο μέγεθος px μπορεί να δείχνουν πολύ διαφορετικές, ακριβώς λόγω διαφορετικού x-height. Ζωντανά (σε στιγμές):
| Γραμματοσειρά | em (pt) | cap (pt) | x (pt) |
|---|
«Εγκατεστημένη» vs «υποκατάστατο»
Ο browser δείχνει μια γραμματοσειρά μόνο αν υπάρχει στο σύστημα· αλλιώς βάζει άλλη στη θέση της. «Εγκατεστημένη» εδώ σημαίνει ότι αποδίδεται ως ξεχωριστή γραμματοσειρά, «υποκατάστατο» ότι πέφτει σε άλλη (οπότε οι μετρήσεις αφορούν την άλλη). Προσοχή στο Linux: το fontconfig κάνει aliasing (π.χ. «Arial» → Liberation Sans), οπότε «εγκατεστημένη» μπορεί να σημαίνει «αποδίδεται ως ξεχωριστό σχέδιο», όχι απαραίτητα ότι υπάρχει αρχείο με αυτό ακριβώς το όνομα.