Μεταβλητές γραμματοσειρές με ασυνήθιστους άξονες
Πειραματικές και εκφραστικές μεταβλητές γραμματοσειρές με προσαρμοσμένους άξονες: απαλότητα, αναπήδηση, ανεπίσημο ύφος, μεταμόρφωση, περιστροφή, grade και άλλα.
Push the slider
Η μορφή των μεταβλητών γραμματοσειρών επιτρέπει σε κάθε ιδιότητα ενός σχεδιασμού να γίνει άξονας. Πέντε είναι καταχωρισμένοι και συνηθισμένοι: βάρος, πλάτος, κλίση, πλάγια και οπτικό μέγεθος. Πέρα από αυτούς, ένας σχεδιαστής μπορεί να εφεύρει άξονα για ό,τι μπορεί να μεταβάλλεται με νόημα στη γραμματοσειρά, και να του δώσει μια ετικέτα τεσσάρων κεφαλαίων γραμμάτων. Αυτή η ελευθερία έχει δώσει τα τελευταία χρόνια αρκετή εφευρετική τυπογραφία.
Οι προσαρμοσμένοι άξονες χωρίζονται σε λίγες ομάδες. Οι παραμετρικοί άξονες ελέγχουν ένα μετρήσιμο χαρακτηριστικό, όπως το πάχος των λεπτών γραμμών ή το ύψος των πεζών, και είναι εργαλεία για λεπτή τυπογραφική προσαρμογή. Το grade αλλάζει πόσο βαρύ φαίνεται το κείμενο χωρίς να αλλάζει το πλάτος του, ώστε οι γραμμές να μην αναδιατάσσονται, κάτι χρήσιμο για τη σκοτεινή λειτουργία. Οι εκφραστικοί άξονες αλλάζουν την προσωπικότητα των γραμμάτων: πιο απαλές γωνίες, ένα ανεπίσημο κούνημα, μια αναπήδηση πάνω στη γραμμή βάσης, απολήξεις που θυμίζουν πατούρες. Και κάποιοι άξονες είναι καθαρή ιδέα, δένοντας το σχήμα των γραμμάτων με δεδομένα ή περιστρέφοντάς τα στον χώρο.
Στο CSS κάθε προσαρμοσμένος άξονας ορίζεται με font-variation-settings, με την ετικέτα και έναν αριθμό. Επειδή είναι συνεχείς, οι άξονες μπορούν να κινούνται ή να συνδέονται με την κύλιση και την είσοδο του χρήστη. Οι σημειώσεις παρακάτω ονομάζουν τους δικούς της άξονες κάθε γραμματοσειράς όπως καταγράφηκαν.
-
Recursive
Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
-
Fraunces
Άξονες Softness και Wonky δίπλα σε βάρος και οπτικό μέγεθος.
-
Roboto Flex
13 άξονες, μαζί με παραμετρικούς ελέγχους για το πάχος των γραμμών και τα ύψη των γραμμάτων.
-
Google Sans Flex
Έξι άξονες: βάρος, πλάτος, οπτικό μέγεθος, grade, στρογγυλότητα και κλίση.
-
Commissioner
Flare and Volume axes grow serif-like endings on a humanist sans.
-
Geologica
Cursive and Sharpness axes beside weight and slant.
-
Shantell Sans
Bounce, Informality and Spacing axes on a marker-style handwriting font.
-
Nunito Sans
Άξονας ύψους πεζών δίπλα σε βάρος, πλάτος και οπτικό μέγεθος.
-
Science Gothic
A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
-
Signika
A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
-
Kumbh Sans
A parametric axis changes the thickness of the thin strokes alone, beside weight.
-
Akshar
Weight and contrast axes in a condensed sans for Latin and Devanagari.
-
AR One Sans
A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
-
Honk
Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
-
Kablammo
A Morph axis makes its doodle-covered capitals shift and dance.
-
Tilt Neon
Two axes rotate its neon-tube letters up to 45 degrees in X and Y.
Τα δείγματα φορτώνουν ένα βασικό λατινικό υποσύνολο κάθε οικογένειας. Κάθε οικογένεια εδώ έχει ανοιχτή άδεια· η σελίδα της περιγράφει τους όρους και προσφέρει τα πρωτότυπα αρχεία.
Ερωτήσεις για: Μεταβλητές γραμματοσειρές με ασυνήθιστους άξονες
Πώς χρησιμοποιώ έναν προσαρμοσμένο άξονα στο CSS;
Γράψτε font-variation-settings με την ετικέτα του άξονα σε εισαγωγικά και μια τιμή, για παράδειγμα "SOFT" 100. Οι προσαρμοσμένες ετικέτες κάνουν διάκριση κεφαλαίων και πεζών και γράφονται με κεφαλαία.
Μπορούν να κινηθούν οι άξονες μεταβλητών γραμματοσειρών;
Ναι. Οι τιμές των αξόνων μπορούν να μεταβούν ή να κινηθούν στο CSS και να οδηγηθούν από JavaScript, αφού είναι συνεχείς αριθμοί.
Σε τι χρησιμεύει ένας άξονας grade;
Κάνει το κείμενο να φαίνεται πιο ανάλαφρο ή πιο βαρύ χωρίς να αλλάζουν τα πλάτη των γραμμάτων, ώστε η διάταξη να μη μετακινείται. Οι σχεδιαστές τον χρησιμοποιούν για να αντισταθμίσουν σκούρα φόντα ή διαφορετικές οθόνες.