Οκτώ κανόνες για τυπογραφία στο λογισμικό

Η τυπογραφία στο λογισμικό κάθεται σε μια άβολη θέση — πιο περιορισμένη από την έντυπη, πιο επιτρεπτική από το web του 2008. Οι κανόνες είναι παλιοί, αλλά ξανασπάνε κάθε χρόνο. Οκτώ που χρησιμοποιούμε εμείς, κανένας τους νέος, όλοι τους παραβιάζονται σε production αυτή τη στιγμή κάπου σε ένα dashboard που θα αναγνώριζες.

1. 01Σταμάτα να χρησιμοποιείς system fonts σε 14px — σχεδιάστηκαν για επικεφαλίδες.
2. 02Το default line-height είναι λάθος. Τα bodies θέλουν 1.5–1.7· το UI θέλει 1.2–1.35.
3. 03Αν χρησιμοποιείς πάνω από δύο μεγέθη γραμματοσειράς, μάλλον χρησιμοποιείς πάρα πολλά.
4. 04Το "Bold" είναι rendering οδηγία, όχι vibe — μην το πιάνεις μέσα σε παράγραφο.

5. 05Το letter-spacing είναι για ΚΕΦΑΛΑΙΑ και small caps. Όχι για body text. Όχι για επικεφαλίδες, ποτέ.
6. 06Τα πλάγια δουλεύουν ακόμα το 2026· θα συνεχίσουν να δουλεύουν. Χρησιμοποίησέ τα για παρενθέσεις, παραθέσεις, ονόματα πλοίων — τα ίδια πράγματα για τα οποία χρησιμοποιούνται από την εποχή του Manutius.
7. 07Τα νούμερα θέλουν δική τους γραμματοσειρά, ή τουλάχιστον tabular figures. Πίνακες με νομισματικά ποσά χωρίς αυτά μοιάζουν πιωμένα.
8. 08Όρισε τα μήκη γραμμών σε χαρακτήρες, όχι σε pixels. Το 65ch είναι η μόνη σωστή απάντηση μέχρι να αποδειχθεί το αντίθετο.

Τίποτα από αυτά δεν είναι άποψη. Όλα παραβιάζονται σε production αυτή τη στιγμή. Πρόσεξέ το μία φορά και δεν μπορείς να το ξε-προσέξεις. Δεν προσποιούμαστε ότι κάτι από αυτά είναι ανταγωνιστικό πλεονέκτημα· προσποιούμαστε ότι το να μην το έχεις είναι φόρος.

Οι δύο στήλες παραπάνω είναι οι ίδιες πέντε προτάσεις. Η αριστερή στήλη είναι αυτό που βγάζεις by default αν αφήσεις το CSS reset και τις system fonts να αποφασίσουν. Η δεξιά είναι αυτό που βγάζεις αν ξοδέψεις ένα engineer-απόγευμα διαλέγοντας typeface, ορίζοντας line-height και δεσμευόμενος σε ένα measure. Η διαφορά δεν είναι αισθητική — η δεξιά πλευρά διαβάζεται περίπου τριάντα τοις εκατό πιο γρήγορα στα εσωτερικά μας τεστ με χρονόμετρο, και αυτό είναι όλο το προϊόν.

Αυτό που διαφωνούμε εσωτερικά τελευταία: ένα UI που πετυχαίνει την τυπογραφία στο 75% των υπολοίπων είναι καλύτερο από ένα UI που πετυχαίνει όλα τα άλλα στο 95% με κακή τυπογραφία. Το body copy είναι αυτό που οι χρήστες κάνουν περισσότερο. Κάνε λάθος το body copy και φορολογείς κάθε άλλο interaction. Κάνε το σωστά και ακόμα και οι λάθος αποφάσεις σου νιώθουν σκόπιμες.

Μια σημείωση για τα νούμερα. Οι περισσότερες UI γραμματοσειρές έρχονται με proportional figures by default. Σε οποιονδήποτε πίνακα όπου οι χρήστες συγκρίνουν δύο αριθμούς στοιβαγμένους τον έναν πάνω στον άλλον — pricing, dashboards, financial summaries — ενεργοποίησε tabular figures. Μία γραμμή CSS. Το before/after είναι η διαφορά ανάμεσα σε "αυτό μοιάζει με screenshot από Excel" και "αυτό μοιάζει φτιαγμένο με προσοχή."