Μεταβλητές γραμματοσειρές με άξονα οπτικού μεγέθους
Μεταβλητές οικογένειες που ξανασχεδιάζονται ανάλογα με το μέγεθος στο οποίο γράφονται: πιο γερές και πιο χαλαρές όταν είναι μικρές, πιο λεπτές και πιο σφιχτές όταν είναι μεγάλες.
Small print, big type
Στη μεταλλική τυπογραφία κάθε μέγεθος σμιλευόταν χωριστά, και οι σμιλευτές προσάρμοζαν τον σχεδιασμό καθώς προχωρούσαν. Τα μικρά μεγέθη γίνονταν πιο πλατιά και πιο γερά, με πιο χαλαρή απόσταση, ώστε να αντέχουν στη σελίδα· τα μεγάλα εκλεπτύνονταν, με λεπτότερες γραμμές και πιο σφιχτή εφαρμογή. Οι ψηφιακές γραμματοσειρές το έχασαν αυτό όταν ένα περίγραμμα άρχισε να κλιμακώνεται σε κάθε μέγεθος. Ο άξονας οπτικού μεγέθους, με ετικέτα opsz, το επαναφέρει.
Σε μια γραμματοσειρά με αυτόν τον άξονα, η τιμή αντιστοιχεί κανονικά στο μέγεθος σε σημεία. Σε χαμηλή τιμή τα γράμματα έχουν μεγαλύτερο ύψος x, παχύτερες λεπτές γραμμές και περισσότερο χώρο ανάμεσά τους. Σε υψηλή τιμή η αντίθεση οξύνεται και οι λεπτομέρειες γίνονται λεπτεπίλεπτες. Το πρακτικό αποτέλεσμα είναι ότι μία οικογένεια μπορεί να υπηρετεί και ως γραμματοσειρά κειμένου και ως display, και μια λεζάντα μένει ευανάγνωστη χωρίς να φαίνεται βαριά.
Τα προγράμματα περιήγησης εφαρμόζουν τον άξονα αυτόματα: το font-optical-sizing είναι από προεπιλογή auto, οπότε μια γραμματοσειρά με τον άξονα προσαρμόζεται στο μέγεθος γραμματοσειράς χωρίς επιπλέον κώδικα. Μπορείτε και να τον ορίσετε με το χέρι, για να χρησιμοποιήσετε εσκεμμένα τον σχεδιασμό display σε μικρό μέγεθος ή τον σχεδιασμό κειμένου σε μεγάλο. Τα εύρη διαφέρουν πολύ ανάμεσα στις οικογένειες, από προσαρμογή λίγων σημείων μόνο για κείμενο ώς εύρος άνω των χιλίων, και οι σημειώσεις δίνουν το καθένα όπως καταγράφηκε.
-
Inter
Οπτικό μέγεθος από 14 ώς 32, που ρυθμίζει μια sans οθόνης για μικρές ετικέτες και μεγαλύτερους τίτλους, δίπλα σε εννέα βάρη με πλάγια.
-
DM Sans
Οπτικό μέγεθος από 9 ώς 40 σε μια γεωμετρική sans χαμηλής αντίθεσης.
-
Merriweather
Serif κειμένου με οπτικό μέγεθος από 18 ώς 144, με άξονες βάρους και πλάτους.
-
Bricolage Grotesque
Οπτικό μέγεθος από 12 ώς 96, με υπερβολικές εγκοπές μελάνης στο μικρό άκρο, δίπλα σε βάρος και πλάτος.
-
Nunito Sans
Εύρος οπτικού μεγέθους για μικρά μεγέθη, 6 ώς 12, ανάμεσα σε τέσσερις άξονες με βάρος, πλάτος και ύψος πεζών.
-
Source Serif 4
Οπτικό μέγεθος από 8 ώς 60 σε μια μεταβατική serif, με οκτώ βάρη και πλάγια.
-
Newsreader
Άξονας οπτικού μεγέθους από 6 ώς 72, με βάρη από 200 ώς 800.
-
Literata
A reading serif with optical size from 7 to 72, eight weights and italics.
-
Playfair
The widest optical range here, 5 to 1200, in a serif that also varies in weight and width.
-
Fraunces
Οπτικό μέγεθος από 9 ώς 144 δίπλα σε άξονες βάρους, Softness και Wonky.
-
Bodoni Moda
Serif υψηλής αντίθεσης με οπτικό μέγεθος από 6 ώς 96.
-
Roboto Serif
Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles.
-
Roboto Flex
Οπτικό μέγεθος από 8 ώς 144, ένας από τους 13 άξονες σε ένα αρχείο.
-
Pathway Extreme
Optical size from 8 to 144 in a grotesque sans, beside weight and width axes.
-
TikTok Sans
Optical size from 12 to 36 with weight, width and slant, four axes in a single file.
-
Hedvig Letters Serif
A single-weight brand serif whose only axis is optical size, from 12 to 24.
Τα δείγματα φορτώνουν ένα βασικό λατινικό υποσύνολο κάθε οικογένειας. Κάθε οικογένεια εδώ έχει ανοιχτή άδεια· η σελίδα της περιγράφει τους όρους και προσφέρει τα πρωτότυπα αρχεία.
Ερωτήσεις για: Μεταβλητές γραμματοσειρές με άξονα οπτικού μεγέθους
Τι αλλάζει το οπτικό μέγεθος σε μια γραμματοσειρά;
Την αντίθεση των γραμμών, την απόσταση, το ύψος x και τις λεπτές λεπτομέρειες. Τα μικρά οπτικά μεγέθη είναι πιο γερά και πιο ανοιχτά· τα μεγάλα είναι πιο ακριβή και με πιο σφιχτή εφαρμογή.
Χρειάζεται να γράψω CSS για να χρησιμοποιήσω το οπτικό μέγεθος;
Συνήθως όχι. Τα προγράμματα περιήγησης ταιριάζουν τον άξονα με το μέγεθος γραμματοσειράς αυτόματα. Για να το παρακάμψετε, ορίστε font-variation-settings: "opsz" ακολουθούμενο από μια τιμή μέσα στο εύρος της γραμματοσειράς.
Τι είναι καλύτερο, ένας άξονας οπτικού μεγέθους ή ξεχωριστές γραμματοσειρές κειμένου και display;
Πετυχαίνουν το ίδιο πράγμα. Ο άξονας είναι πιο βολικός, καλύπτει τα ενδιάμεσα μεγέθη και θέλει μόνο ένα αρχείο.