Ο σχεδιασμός ιστοσελίδων ήρθε σε ηλικία την ημέρα που οι webfonts εισήλθαν σε ευρεία χρήση. Πριν από αυτό το σημείο είναι αμφίβολο ότι είμαστε λιγότερο σχεδιαστές από τους μηχανικούς.
Ωστόσο, ο ενθουσιασμός με τον οποίο έχουμε τραβήξει τις επιλογές γραμματοσειρών στον σχεδιασμό ιστοσελίδων έχει οδηγήσει σε μια καταπληκτική σειρά επιλογών. τόσο πολύ ώστε πολλοί σχεδιαστές επιλέγουν το δρόμο της ελάχιστης αντίστασης, επιτρέποντας την επιθυμία για απλή εφαρμογή να υπαγορεύει την τυπογραφία τους.
Εάν ξέρετε τι ψάχνετε, όλες οι επιλογές είναι απλές. Σε αυτό το άρθρο θα σας εμπλουτίσουμε με τις γνώσεις που χρειάζεστε για να λαμβάνετε τεκμηριωμένες αποφάσεις κατά την επιλογή μεταξύ τεχνολογίας γραμματοσειρών.
Θα παρουσιάσουμε αυτές τις επιλογές εστιάζοντας στον καλύτερο τρόπο να παραδώσει ένα κλασσικό τυπογραφικό στυλ, Garamond.
Έχοντας εκθειώσει τις αρετές των webfonts, η πρώτη επιλογή που θα εξετάσουμε δεν χρησιμοποιεί καθόλου webfonts. Η στοίβαξη γραμματοσειρών είναι μια τεχνική CSS στην οποία καθορίζετε έναν αριθμό εναλλακτικών επιλογών που ξεκινούν με την πρώτη σας επιλογή και τελειώνουν με μια λύση catch-all.
Υπάρχουν πολλοί πόροι στοίβαξης γραμματοσειρών σε απευθείας σύνδεση, αλλά ένα από τα αγαπημένα μου είναι cssfontstack.com, είναι ένα καλό σημείο εκκίνησης για μια στοίβα γραμματοσειρών, αλλά να γνωρίζετε ότι πιο συχνά θα πρέπει να φέρει κάποια εμπειρία.
Σύμφωνα με το cssfontstack.com το Garamond είναι διαθέσιμο ως γραμματοσειρά συστήματος στο 49,91% των Mac και 86,47% των μηχανών των Windows. Αυτό είναι πολύ καλό, αλλά δεν είναι αρκετά καλό. Ακολουθεί η προτεινόμενη στοίβα γραμματοσειρών που καλύπτει όλες τις βάσεις:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;Το ερώτημα είναι, πώς μπορούμε να βελτιώσουμε αυτό;
Λοιπόν, γνωρίζουμε ότι υπάρχουν πολλές εκδόσεις του Garamond διαθέσιμες, έτσι μπορούμε να προσθέσουμε μια παραλλαγή στη δεύτερη υποδοχή ως ένα μικρό συμβιβασμό.
Δεύτερον, διαφωνώ ότι είτε ο Baskerville ή οι Times είναι κατάλληλα υποκατάστατα του Garamond, οπότε ας τα αφήσουμε να τα αφήσουμε. Το Hoefler Text λειτουργεί καλά στη θέση του Garamond, έτσι ώστε να μπορεί να μείνει. Πρέπει να προσθέσουμε serif ως τελικό catch-all, αλλά καθώς τα περισσότερα συστήματα χρησιμοποιούν Times ως προεπιλεγμένη serif τους, ας πάμε στην πολύ ανώτερη Γεωργία για όποιον περνάει μέσα από τις ρωγμές.
Η τελική τροποποιημένη στοίβα γραμματοσειρών μοιάζει με αυτό:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;Η πλειοψηφία των θεατών πρόκειται να δει Garamond, μερικοί άλλοι θα δουν έναν λογικό συμβιβασμό και μια μικρή μειοψηφία θα πάρει απλώς την προεπιλεγμένη γραμματοσειρά serif.
Η στοίβαξη των γραμματοσειρών είναι δωρεάν, μακράν η πιο γρήγορη λύση και ανάλογα με την επιλεγμένη γραμματοσειρά μπορεί να είναι πολύ αποτελεσματική. στην περίπτωση του Garamond υπάρχει ένα καλό επιχείρημα για την κλήση αυτής της «εργασίας».
Υπάρχει, ωστόσο, ένα μεγάλο πρόβλημα με την τοποθέτηση των γραμματοσειρών, ειδικά με γραμματοσειρά όπως το Garamond: υπάρχουν τόσες εκδόσεις πειρατών στην κυκλοφορία που είναι αδύνατο να γνωρίζουμε ποια γραμματοσειρά ονομάζεται "Garamond" στο σύστημα του χρήστη, όχι μόνο δεν μπορούμε να είμαστε σίγουροι το σχέδιο είναι σύμφωνο με τις προσδοκίες μας, η κλίμακα της γραμματοσειράς μπορεί να είναι ριζικά διαφορετική από την έκδοση του σχεδιασμού μας. (Τεχνικά, τίποτα δεν εμποδίζει ένα αντίγραφο του Arial που μετονομάζεται σε "Garamond", οπότε η στοίβα γραμματοσειράς θα το χρησιμοποιήσει.)
Η στοίβαξη των γραμματοσειρών είναι ως εκ τούτου εξαιρετική δημιουργία αντιγράφων ασφαλείας και πρέπει να ληφθεί υπόψη σε συνδυασμό με όλες τις παρακάτω λύσεις, αλλά είναι λιγότερο από ιδανική ως πρωτεύουσα λύση.
Γραμματοσειρές Google είναι, για πολλούς σχεδιαστές, το σημείο στο οποίο τελειώνουν την αναζήτησή τους. Για ένα συνολικό ποσό $ 0 μπορείτε εύκολα να φορτώσετε webfonts στον ιστότοπό σας χρησιμοποιώντας το CSS.
Το μόνο μειονέκτημα είναι ότι ο αριθμός των γραμματοσειρών που προσφέρονται είναι εξαιρετικά περιορισμένος. Γραμματοσειρές όπως Roboto και PT Sans οφείλουν τη δημοτικότητά τους τόσο στην ελεύθερη διαθεσιμότητά τους στο Google Γραμματοσειρές όσο και στις σχεδιαστικές τους ιδιότητες.
Επί του παρόντος, η μόνη παραλλαγή του Garamond που είναι διαθέσιμη στο Google Γραμματοσειρές είναι EB Garamond, μια προσπάθεια να ανοίξει η γραμματοσειρά του Garamond. Αλλά το ελάττωμα με αυτήν την έκδοση είναι ότι υπάρχει μόνο ένα βάρος και στυλ διαθέσιμα? δεν υπάρχει τολμηρή ή πλάγια γραφή. Ο σχεδιαστής Georg Duffner έκανε γενναιόδωρα τη δουλειά του σε εξέλιξη διαθέσιμη Bitbucket αλλά δεν είναι έτοιμη για παραγωγή.
Οι Γραμματοσειρές Google είναι μια εξαιρετική λύση για τον προϋπολογισμό και είναι ιδανικές για καταστάσεις στις οποίες μπορεί να χρεώνετε το λογαριασμό αντί για τον πελάτη σας. Η δυνατότητα να καθορίσετε τις γραμματοσειρές σας στο CSS είναι τόσο απλή όσο μπορεί.
Το μεγάλο ελάττωμα με το Google Γραμματοσειρές είναι ότι παρά το μάρκετινγκ τους, δεν υπάρχει πολύ μικρή επιλογή. Αν ψάχνετε για ένα webfont του Open Sans τότε είστε στο σωστό μέρος, αλλά αν θέλετε μια γραμματοσειρά όπως το Garamond - που είναι σχεδόν ασαφής - είναι ένα ξέπλυμα.
Η αυτο-φιλοξενία είναι μια εξαιρετικά υποτιμημένη προσέγγιση στα webfonts. Η βασική του έλξη είναι η δυνατότητα υποσύνολης των γραμματοσειρών, μια επιλογή τόσο ελκυστική, ότι όλες σχεδόν οι υπηρεσίες streaming προσπαθούν να την μιμηθούν.
Εάν διαθέτετε ένα γραφικό αντίγραφο του Garamond στο σύστημά σας, ανοίξτε το και θα δείτε έναν καταπληκτικό αριθμό χαρακτήρων. Η υποκατάσταση μιας γραμματοσειράς είναι η διαδικασία διαγραφής μη βασικών χαρακτήρων με αποτέλεσμα μικρότερο μέγεθος αρχείου και πιο γρήγορη παράδοση.
Φυσικά, οι χαρακτήρες που χρειάζεστε εξαρτώνται από τον ιστότοπο που χτίζετε: εάν χτίζετε έναν τουριστικό οδηγό για το Ντουμπρόβνικ, πιθανόν θα χρειαστείτε σέρβους κυριλλικούς χαρακτήρες. εάν αναπαράγετε τα συλλεχθέντα έργα του Σαίξπηρ, είναι απίθανο να χρειαστείτε ένα σύμβολο @.
Για να υποδιαιρέσετε μια γραμματοσειρά, θα χρειαστείτε λογισμικό επεξεργασίας γραμματοσειρών. Υπάρχουν πολλές διαθέσιμες επιλογές από το δωρεάν FontForge προς την πριμοδότηση FontLab Studio. Για να δημιουργήσετε μια υποσύνολο της γραμματοσειράς, απλά επιλέξτε ένα glyph που δεν θέλετε και διαγράψτε το και στη συνέχεια αποθηκεύστε το αρχείο στο φάκελο του project. (Προσέξτε να μην αντικαταστήσετε το αρχικό σας αρχείο γραμματοσειράς!)
Το πλήρες αρχείο .ttf για το Adobe Garamond Pro είναι 606Kb. Απογυμνώνοντας το κάτω σε βασικούς λατινικούς χαρακτήρες και η στίξη του περιορίζει σε 56Kb. Πολλαπλασιάστε αυτό σε διάφορα βάρη και στυλ και σώζετε μερικά Mb σε λήψεις για τους χρήστες σας.
Τα περισσότερα αρχεία γραμματοσειρών που έχετε εγκαταστήσει θα είναι TrueType (.ttf) με ένα smattering του OpenType (.otf). Μπορείτε να τα αποθηκεύσετε στο διακομιστή σας και να τα ορίσετε στο CSS.
Η υποστήριξη για τις μορφές αρχείων .ttf και .otf είναι ευρέως διαδεδομένη σε όλα τα σύγχρονα προγράμματα περιήγησης εκτός από την IE (ακόμη και την πιο πρόσφατη έκδοση) και ορισμένα προγράμματα περιήγησης για κινητά (συμπεριλαμβανομένων των εκδόσεων κληρονομιών του iOS Safari).
Για να αυξήσετε την κάλυψή σας, θα χρειαστείτε αρκετές πρόσθετες μορφές. Το .eot λειτουργεί για IE, το .woff θα λειτουργήσει για τα περισσότερα προγράμματα περιήγησης και είναι η προτιμώμενη μορφή του W3C, το .svg θα λειτουργήσει σε παλαιότερα προγράμματα περιήγησης. Υπάρχουν πολλές υπηρεσίες ιστού που θα δημιουργήσουν αυτές τις μορφές για εσάς από το αρχείο .ttf, ένα από τα πιο δημοφιλή Σκίουρος γραμματοσειράς.
Το μειονέκτημα με τη μετατροπή γραμματοσειρών επιφάνειας εργασίας για χρήση στο διαδίκτυο είναι διττό: πρώτον, σχεδόν σίγουρα δεν έχετε την άδεια να το κάνετε αυτό. και δεύτερον, οι γραμματοσειρές επιφάνειας εργασίας σχεδόν πάντα βελτιστοποιούνται για εκτύπωση, απλά δεν αποδίδουν καλά στην οθόνη.
Τα χυτήρια αλουμινίου έχουν τελικά ξυπνήσει στο γεγονός ότι υπάρχει μια τεράστια αγορά για webfonts. Ως αποτέλεσμα, όχι μόνο έχουν ενισχύσει την άδειά τους, αλλά εργάζονται για τη βελτιστοποίηση των καταλόγων τους για οθόνες.
Τα χυτήρια που παρέχουν αποκλειστικά webfonts παρέχουν όλες τις απαιτούμενες μορφές, ελέγχεται η ποιότητα και είναι έτοιμες για μεταφόρτωση στο διακομιστή σας. Επιπλέον, είστε ακόμα ελεύθεροι να υποδιαιρέσετε ένα αρχείο και δεν εξαρτάται από το χρόνο λειτουργίας του διακομιστή τρίτου μέρους.
Υπάρχουν πολλά μέρη που μπορείτε να αγοράσετε webfonts, δύο από τους βασικούς παίκτες στο χώρο είναι FontShop.com και MyFonts.com .
Επιστρέφοντας στην ταλαιπωρία μας στο Garamond, μπορούμε να δούμε ότι οι MyFonts έχουν διάφορες διαφορετικές εκδόσεις του Garamond που προσφέρονται. Μπορούμε να κάνουμε άδεια Adobe Garamond σε διάφορα βάρη, που περιορίζονται σε 250.000 προβολές σελίδας, για περίπου $ 180.
Το FontShop έχει επίσης διαθέσιμες διάφορες εκδόσεις webfont του Garamond. URW Garamond Web παρέχει κάθε βάρος και στυλ που θα μπορούσαμε ενδεχομένως να θέλουμε, όλα με γενναιόδωρες 500.000 προβολές σελίδων ανά μήνα. Επιπλέον, το FontShop έχει αφιερωμένο υποομάδα για να βελτιστοποιήσετε τις λαμπερές σας νέες αγορές γραμματοσειρών. Δυστυχώς πληρώνετε ένα ασφάλιστρο για όλα αυτά, περίπου $ 680 για την πλήρη οικογένεια γραμματοσειρών.
Η αυτοεξυπηρέτηση επιτρέπει υποσύνολο. Εξασφαλίζει ότι έχετε τον έλεγχο της παράδοσης των γραμματοσειρών σας και αποφεύγετε κάθε είδους εξάρτηση από διακομιστές τρίτων.
Επιπλέον, εάν αγοράζετε ένα επαγγελματικό webfont, μπορείτε να περιμένετε ότι η ποιότητα θα είναι εξαιρετικά υψηλή.
Η αυτοεξυπηρέτηση απευθύνεται και σε εκείνους από εμάς που προτιμούν να "κατέχουν" τις γραμματοσειρές μας αντί να τις μισθώνουν. Φυσικά, από νομική άποψη, υπάρχει πολύ μικρή ιδιοκτησία, αλλά μια εφάπαξ αμοιβή είναι πιο άνετη από τη συνδρομή πολλών ανθρώπων.
Το μόνο μειονέκτημα της αυτο-φιλοξενίας είναι η σημαντική τιμή. Όχι μόνο θα πρέπει να πληρώσετε για τη γραμματοσειρά, αλλά ίσως χρειαστεί να υπολογίσετε το κόστος φιλοξενίας και το εύρος ζώνης στις τιμές σας.
Ακριβώς όπως οι Γραμματοσειρές Google, οι υπηρεσίες webfont προσφέρουν γραμματοσειρές στα προγράμματα περιήγησης μέσω απλού CSS. Σε αντίθεση με τις γραμματοσειρές Google, υπάρχει μια τεράστια γκάμα για να διαλέξετε.
Υπάρχουν διάφοροι πωλητές από τους οποίους μπορείτε να διαλέξετε, και μου αρέσει ιδιαίτερα η Hoefler & Frere-Jones ' cloud.typography υπηρεσία. Ωστόσο, όπως και με πολλούς μικρότερους πωλητές, η χρησιμότητά τους εξαρτάται εξ ολοκλήρου από τη διαθεσιμότητα της γραμματοσειράς που αναζητάτε. Η πλησιέστερη γραμματοσειρά Hoefler & Frere-Jones μπορεί να προμηθεύει είναι η Hoefler Text, ωστόσο, εάν πληρώνουμε ένα ασφάλιστρο, δεν θα πρέπει να κάνουμε συμβιβασμούς.
Ο μεγαλύτερος παίκτης στο streaming webfont είναι Adobe Typekit . Η ποιότητα των γραμματοσειρών τους είναι πολύ υψηλή, η υλοποίηση είναι απλή, και το πιο σημαντικό είναι ότι έχουν έναν τεράστιο κατάλογο για να διαλέξετε.
Το Typekit παρέχει μια ποικιλία συνδρομών που κυμαίνονται από 24,99 δολάρια ανά έτος για 50.000 εμφανίσεις μηνιαίως έως 99,99 δολάρια ανά έτος για 1,000,000 εμφανίσεις ανά μήνα. Ωστόσο, εάν είστε μέλος του Creative Cloud, το σχέδιο χαρτοφυλακίου περιλαμβάνεται στη συνδρομή σας. πράγμα που σημαίνει ότι για τους περισσότερους σχεδιαστές ιστοσελίδων το Typekit είναι μια δωρεάν λύση.
Μια γρήγορη αναζήτηση μας λέει ότι υπάρχουν διάφορες εκδόσεις του Garamond, συμπεριλαμβανομένων Η Adobe, διαθέσιμη στο Typekit. Και, υπάρχει επίσης ένα πολύ περιορισμένο χαρακτηριστικό υποσύγκρισης που μας επιτρέπει να μειώσουμε λίγο το μέγεθος του αρχείου.
Οι υπηρεσίες ροής Webfont παρέχουν μια μεγάλη ποικιλία γραμματοσειρών εξαιρετικής ποιότητας, που είναι εύκολο να προστεθούν στον ιστότοπό σας.
Στην περίπτωση του Typekit, εάν είστε ήδη μέλος Creative Cloud, τότε η ελεύθερη πρόσβαση καθιστά την επιλογή ακόμα πιο ελκυστική. Ωστόσο, αν δεν είστε μέλος τότε είστε αντιμέτωποι με μια επιλογή μεταξύ της πληρωμής μιας ουσιαστικής συνδρομής και της σύνδεσης με την Adobe.
Η αρχή μου αφορά οποιαδήποτε υπηρεσία συνεχούς ροής είναι ότι εξαρτάτε εξ ολοκλήρου από την απόδοση ενός διακομιστή τρίτου μέρους. Αν ο διακομιστής τους πέσει κάτω, το ίδιο ισχύει για ένα σημαντικό μέρος της επωνυμίας σας.
Όπως συμβαίνει με τόσα πολλά πράγματα, η απάντηση είναι ότι εξαρτάται από το έργο σας. Αλλά υπάρχουν κάποιες αποφάσεις που μπορούμε να κάνουμε με βάση τη δοκιμή Garamond:
Η στοίβαξη γραμματοσειρών είναι ένα αντίγραφο ασφαλείας χωρίς κόστος, παρέχει μια λύση επί της μάρκας εάν και όταν τα αρχεία γραμματοσειρών λείπουν ή οι υπηρεσίες ροής είναι αργές. Θα πρέπει πάντα να εφαρμόζεται σε κάθε τοποθεσία, αλλά στηρίζεται σε αυτό, ακόμη και για κάτι τόσο κοινό όσο το Garamond είναι δυνητικά επικίνδυνο.
Εάν η γραμματοσειρά που αναζητάτε είναι διαθέσιμη για δωρεάν ροή, είτε μέσω γραμματοσειρών Google είτε, για παράδειγμα, αν έχετε συνδρομή στο Creative Cloud, τότε αυτή είναι μια καλή επιλογή. Καθώς έχω συνδρομή στο Creative Cloud, θα μπήκα στον πειρασμό σε αυτή τη διαδρομή, αν και η έλλειψη πραγματικού υποχαρακτηρισμού θα ήταν μια ανησυχία.
Αν έχετε τον προϋπολογισμό, τότε η αυτο-φιλοξενία ενός επαγγελματικού webfont είναι η καλύτερη επιλογή. Το σχετικά μέτριο κόστος - σε σύγκριση με τη φωτογραφία του αποθέματος - δικαιολογείται εύκολα από το τεράστιο υποσύγχρονο boost boost.
Σε μια βιομηχανία όπου μειώνουμε τα αρχεία JavaScript για να αποθηκεύσουμε λίγα Kb, ξυρίζοντας εκατοντάδες φορές το ποσό αυτό από ένα αρχείο είναι ένα μη-brainer.
Προτεινόμενη εικόνα / μικρογραφία, λήψη εικόνας μέσω Shutterstock.