Συνδυασμός γραμματοσειρών (Font Pairing)

Πώς να χρησιμοποιήσετε την προεπισκόπηση συνδυασμού γραμματοσειρών

1. Ξεκινήστε από ένα από τα Προτεινόμενα ζεύγη (Εκδοτικό, Σύγχρονο blog, Σελίδα προσγείωσης, Ειδήσεις, Κομψό, Τεχνολογικό περιοδικό, Βιβλίο, Κλασικό, Τεκμηρίωση, Παιχνιδιάρικο). Κάθε κουμπί δείχνει τη γραμματοσειρά τίτλου και τη γραμματοσειρά κειμένου που εφαρμόζει.
2. Ή επιλέξτε τη δική σας Γραμματοσειρά τίτλου και Γραμματοσειρά κειμένου. Οι λίστες είναι ομαδοποιημένες σε γραμματοσειρές χωρίς πατούρες (sans-serif), με πατούρες (serif), display, σταθερού πλάτους και χειρόγραφες. Το Εναλλαγή γραμματοσειρών ανταλλάσσει τις δύο.
3. Ρυθμίστε το Μέγεθος τίτλου, το Μέγεθος κειμένου και το Διάστιχο και επιλέξτε το Πάχος τίτλου (Έντονο (700) ή Κανονικό (400)). Επιλέξτε Σκούρο φόντο για να ελέγξετε το ζεύγος σε σκούρα λειτουργία.
4. Αντικαταστήστε το Κείμενο τίτλου και το Κείμενο σώματος με δικά σας λόγια: ένας πραγματικός τίτλος και μια πραγματική παράγραφος σας λένε πολύ περισσότερα από ένα παντόγραμμα. Αφήστε μια κενή γραμμή ανάμεσα στις παραγράφους.
5. Αντιγράψτε τον Κώδικας CSS και μετά ακολουθήστε το Αυτοφιλοξενία με Fontsource για να προσθέσετε τις γραμματοσειρές στο έργο σας.

Οι γραμματοσειρές φορτώνονται την πρώτη φορά που τις επιλέγετε (περίπου 12 έως 50 KB ανά πάχος). Σερβίρονται από αυτόν τον ιστότοπο, ποτέ από CDN γραμματοσειρών.

Ελληνικά και άλλα σύνολα χαρακτήρων

Το εργαλείο φορτώνει το σύνολο χαρακτήρων που χρειάζεται το κείμενό σας. Για ελληνικό κείμενο, ελληνικούς χαρακτήρες έχουν μόνο οι γραμματοσειρές Inter, Roboto, Open Sans, Source Serif 4 και Fira Code. Οι υπόλοιπες γραμματοσειρές εμφανίζουν τα ελληνικά γράμματα με την εφεδρική γραμματοσειρά του συστήματος, οπότε η προεπισκόπηση δεν δείχνει τον πραγματικό τους χαρακτήρα. Στις ελληνικές σελίδες, το πλαίσιο εγκατάστασης και ο κώδικας περιλαμβάνουν και το ελληνικό σύνολο χαρακτήρων όπου η γραμματοσειρά το διαθέτει. Καμία από τις 20 γραμματοσειρές δεν έχει αραβικά γράμματα.

Τι κάνει έναν καλό συνδυασμό γραμματοσειρών

• Αντίθεση, όχι σύγκρουση. Η κλασική συνταγή είναι μια serif για τον έναν ρόλο και μια sans-serif για τον άλλο: Playfair Display πάνω από Lato ή Montserrat πάνω από Merriweather. Δύο γραμματοσειρές που μοιάζουν αλλά δεν είναι ίδιες (για παράδειγμα δύο γεωμετρικές sans-serif) συχνά φαίνονται λάθος.
• Μια ήρεμη γραμματοσειρά κειμένου. Στο κείμενο οι άνθρωποι περνούν τον περισσότερο χρόνο. Διαλέξτε γραμματοσειρά με ανοιχτά σχήματα γραμμάτων και γενναιόδωρο ύψος x (Inter, Lato, Open Sans, Source Serif 4, Merriweather) και κρατήστε γραμματοσειρές display όπως οι Playfair Display, DM Serif Display, Oswald ή Caveat για σύντομους τίτλους.
• Αντίστοιχες αναλογίες. Γραμματοσειρές με παρόμοιο ύψος x ταιριάζουν καλά μαζί στην ίδια γραμμή και στην ίδια στήλη.
• Δύο γραμματοσειρές αρκούν. Δημιουργήστε ιεραρχία με μέγεθος, πάχος και διαστήματα αντί για τρίτη γραμματοσειρά.

Για ευανάγνωστο κείμενο, 16 έως 20 px με διάστιχο ανάμεσα στο 1,4 και στο 1,7 είναι καλό αρχικό εύρος, με περίπου 60 έως 75 χαρακτήρες ανά γραμμή. Οι τίτλοι χρειάζονται συνήθως πιο σφιχτό διάστιχο (1,1 έως 1,3), το οποίο ορίζει για εσάς ο κώδικας CSS.

Ο κώδικας CSS

Ο κώδικας δηλώνει δύο προσαρμοσμένες ιδιότητες, --font-heading και --font-body, καθεμία με εφεδρική στοίβα: αν η γραμματοσειρά ιστού δεν έχει φορτωθεί ακόμη, το πρόγραμμα περιήγησης δείχνει μια παρόμοια γραμματοσειρά του συστήματος (Georgia για τις serif, τη γραμματοσειρά διεπαφής του συστήματος για τις sans-serif). Τα μεγέθη γράφονται σε rem (16 px = 1rem), ώστε να ακολουθούν τη ρύθμιση μεγέθους γραμματοσειράς του προγράμματος περιήγησης του αναγνώστη.

Αυτοφιλοξενία και άδειες

Και οι 20 γραμματοσειρές προέρχονται από το Fontsource, που πακετάρει γραμματοσειρές ανοιχτού κώδικα για το npm. Το πλαίσιο εγκατάστασης δίνει την εντολή npm install και τις γραμμές import για το λατινικό σύνολο και μόνο τα πάχη που χρησιμοποιείτε· ο bundler σας αντιγράφει στη συνέχεια τα αρχεία woff2 στο build σας. Η προσφορά γραμματοσειρών από τον δικό σας τομέα είναι ταχύτερη (καμία πρόσθετη σύνδεση), λειτουργεί εκτός σύνδεσης και αποφεύγει την αποστολή των διευθύνσεων IP των επισκεπτών σας σε υπηρεσία γραμματοσειρών τρίτου, γνωστό ζήτημα GDPR στην ΕΕ.

Κάθε γραμματοσειρά εδώ έχει την άδεια SIL Open Font License 1.1, σύμφωνα με τα μεταδεδομένα του πακέτου της: μπορείτε να τη χρησιμοποιήσετε σε ιστότοπους, σε εφαρμογές και σε εκτυπώσεις, εμπορικά ή μη, και να την ενσωματώσετε. Δεν μπορείτε να πουλήσετε τα ίδια τα αρχεία γραμματοσειράς. Αν τροποποιήσετε μια γραμματοσειρά, πρέπει να διατηρεί την OFL και να μην χρησιμοποιεί το αρχικό δεσμευμένο όνομα. Το αρχείο άδειας περιλαμβάνεται σε κάθε πακέτο.