Πώς να διαλέξετε γραμματοσειρές για το website σας: αναγνωσιμότητα, χαρακτήρας και ταχύτητα

Μια καλή γραμματοσειρά για website είναι πρώτα ευανάγνωστη, δεύτερον ταιριαστή στο brand σας και τρίτον ελαφριά για την ταχύτητα της σελίδας. Οι γραμματοσειρές έχουν χαρακτήρα — τα γράμματα με πατούρες συχνά διαβάζονται ως παραδοσιακά και τα στρογγυλεμένα χωρίς πατούρες ως φιλικά — αλλά αυτές οι εντυπώσεις είναι πιο ήπιες απ' ό,τι ακούγονται, και η αναγνωσιμότητα κερδίζει πάντα. Δύο γραμματοσειρές, μέγεθος κειμένου τουλάχιστον 16 pixels και λίγα αρχεία γραμματοσειράς καλύπτουν τα περισσότερα επαγγελματικά sites.

Βασικά σημεία

• Η αναγνωσιμότητα νικά τον χαρακτήρα: διαλέξτε μια καθαρή γραμματοσειρά για το κείμενο και βάλτε τον χαρακτήρα στους τίτλους.
• Χρησιμοποιήστε το πολύ δύο οικογένειες γραμματοσειρών, και λίγα πάχη, για πιο ήρεμη εικόνα και πιο γρήγορη σελίδα.
• Το κυρίως κείμενο πρέπει να είναι τουλάχιστον 16 pixels με άνετο διάστιχο.
• Οι γραμματοσειρές είναι αρχεία που κατεβάζει κάθε επισκέπτης, οπότε επηρεάζουν την ταχύτητα και τη σταθερότητα της διάταξης.
• Οι ίδιες γραμματοσειρές πρέπει να εμφανίζονται στο website, στα έγγραφα και στις παρουσιάσεις σας.

Τι επικοινωνούν οι γραμματοσειρές

Οι γραμματοσειρές με πατούρες (serif), με μικρές γραμμές στις άκρες των γραμμάτων, τείνουν να δείχνουν καθιερωμένες και εκδοτικές. Οι γραμματοσειρές χωρίς πατούρες (sans-serif) δείχνουν σύγχρονες και άμεσες. Τα στρογγυλεμένα σχήματα δείχνουν φιλικά, και τα στενά έντονα γράμματα δείχνουν δυνατά. Τα δικηγορικά γραφεία και οι εταιρείες συμβούλων συχνά προτιμούν τίτλους με πατούρες, ενώ οι εταιρείες λογισμικού και τα design studios συχνά διαλέγουν γεωμετρικές χωρίς πατούρες.

Αυτές είναι τάσεις, και ένας ικανός σχεδιαστής μπορεί να τις σπάσει σκόπιμα. Δείτε τον χαρακτήρα ως λόγο να διαλέξετε ανάμεσα σε δύο ευανάγνωστες γραμματοσειρές, και όχι ως λόγο να δεχτείτε μία που διαβάζεται δύσκολα.

Η αναγνωσιμότητα αποφασίζει

Οι επισκέπτες σαρώνουν πριν διαβάσουν, και κάθε μικρό εμπόδιο κοστίζει προσοχή. Για το κυρίως κείμενο, διαλέξτε μια γραμματοσειρά με καθαρά σχήματα, ανοιχτές αποστάσεις και ευδιάκριτους χαρακτήρες, ώστε ένα κεφαλαίο I και ένα μικρό l να μη μοιάζουν. Ορίστε μέγεθος τουλάχιστον 16 pixels, διάστιχο περίπου 1,5 και κρατήστε τις γραμμές σε άνετο μήκος, περίπου 50 έως 75 χαρακτήρες.

Και εδώ μετράει η αντίθεση. Το άρθρο μας για την ψυχολογία του χρώματος καλύπτει τον λόγο 4,5 προς 1 για κανονικό κείμενο. Κρατήστε επίσης το κείμενο στοιχισμένο αριστερά, γιατί η πλήρης στοίχιση δημιουργεί άνισα κενά που δυσκολεύουν την ανάγνωση.

Συνδυασμοί: μείνετε στις δύο

Μια συνηθισμένη προσέγγιση είναι μία γραμματοσειρά για τους τίτλους και μία για το κείμενο, επιλεγμένες ώστε να έχουν αντίθεση. Τίτλος με πατούρες και κείμενο χωρίς πατούρες είναι κλασικός συνδυασμός, όπως και το αντίστροφο. Χρησιμοποιήστε μία οικογένεια με πολλά πάχη αν θέλετε την πιο ασφαλή επιλογή. Περισσότερες από δύο οικογένειες κάνουν ένα site να δείχνει ασχεδίαστο και προσθέτουν βάρος στη λήψη.

Χρησιμοποιήστε μέγεθος, πάχος και αποστάσεις για να δημιουργήσετε ιεραρχία, και όχι επιπλέον γραμματοσειρές.

Γραμματοσειρές και ταχύτητα

Κάθε αρχείο γραμματοσειράς που κατεβάζει ένας επισκέπτης κοστίζει χρόνο. Κάθε πάχος και στυλ είναι ξεχωριστό αρχείο, οπότε μια οικογένεια σε έξι πάχη σημαίνει έξι λήψεις. Φορτώστε μόνο τα πάχη που χρησιμοποιείτε, προτιμήστε σύγχρονες μορφές όπως το WOFF2 και φιλοξενήστε τα αρχεία στο δικό σας domain όπου το επιτρέπει η άδεια, κάτι που αποφεύγει μια επιπλέον σύνδεση με τρίτους.

Η φόρτωση γραμματοσειρών επηρεάζει επίσης τη σταθερότητα της διάταξης. Αν μια εφεδρική γραμματοσειρά αντικατασταθεί από την πραγματική αφού εμφανιστεί η σελίδα, το κείμενο μπορεί να πεταχτεί, κάτι που μετράει αρνητικά στο Cumulative Layout Shift. Το όριο της Google για καλή βαθμολογία είναι 0,1 ή λιγότερο. Αν ρυθμίσετε τη γραμματοσειρά ώστε να δείχνει γρήγορα μια εφεδρική και διαλέξετε εφεδρική με παρόμοιες αναλογίες, το τίναγμα μειώνεται. Ο οδηγός μας για την ταχύτητα του website εξηγεί αυτές τις μετρήσεις.

Άδειες χρήσης και συνέπεια

Ελέγξτε την άδεια πριν χρησιμοποιήσετε μια γραμματοσειρά. Πολλές γραμματοσειρές είναι δωρεάν για χρήση στο web με ανοιχτή άδεια, ενώ άλλες απαιτούν πληρωμένη άδεια που καλύπτει websites. Κρατήστε τα στοιχεία της άδειας μαζί με τα αρχεία του brand σας.

Μετά χρησιμοποιήστε τις ίδιες γραμματοσειρές στο website, στα έγγραφα, στις προτάσεις και στις παρουσιάσεις σας. Αν ένα πρόγραμμα δεν έχει τη γραμματοσειρά σας, ορίστε μια παρόμοια εφεδρική στον οδηγό του brand σας. Το άρθρο μας για τα συστήματα brand εξηγεί γιατί αυτή η συνέπεια χτίζει αναγνωρισιμότητα.

Μια απλή συνταγή

Διαλέξτε μία ευανάγνωστη γραμματοσειρά για το κείμενο και μία για τους τίτλους, ή μία οικογένεια και για τα δύο. Ορίστε το κείμενο στα 16 pixels ή περισσότερα με διάστιχο 1,5, φορτώστε μόνο τα πάχη που χρειάζεστε και δοκιμάστε το αποτέλεσμα σε κινητό. Αν θέλετε μια δεύτερη γνώμη, ο δωρεάν έλεγχος website ελέγχει ταχύτητα και διάταξη, και μια δωρεάν γνωριμία 30 λεπτών είναι η ευκαιρία να μιλήσουμε για μια ανανέωση του brand. Δείτε τις υπηρεσίες μας για το πώς φτιάχνουμε brand και website μαζί.