30 από τους καλύτερους πόρους τυπογραφίας στο διαδίκτυο στο διαδίκτυο
Φαίνεται ότι υπάρχουν δύο στρατόπεδα μεταξύ των σχεδιαστών ιστοσελίδων: όσοι αγκαλιάζουν την τυπογραφία στο διαδίκτυο , πειραματίζονται με αυτό και δοκιμάζουν νέα πράγματα σχεδόν σε όλα τα σχέδιά τους. και εκείνους που την αποφεύγουν όπως την πανούκλα, επιλέγοντας να χρησιμοποιήσετε τυποποιημένες, ασφαλείς ιστούς με μικρές παραλλαγές.
Φαίνεται επίσης ότι πολλοί σχεδιαστές που εμπίπτουν στη δεύτερη ομάδα επιθυμούν να μοιάζουν περισσότερο με τους πρώτους.
Οι παρακάτω πόροι μπορούν να σας βοηθήσουν να βελτιώσετε την τυπογραφία του ιστού σας, ανεξάρτητα από το ποια κατασκήνωση εμπίπτει.
Υπάρχουν εργαλεία για τη δημιουργία μοναδικής τυπογραφίας, αναφορών και άρθρων που μπορούν να σας διδάξουν τυπογραφικές αρχές, καθώς και πολλές έμπνευση και νέα για να σας κρατήσουν ενημερωμένους σχετικά με την κατάσταση της τυπογραφίας του ιστού.
Εργαλεία τυπογραφίας
Τύπος
Το Typetester σάς επιτρέπει να συγκρίνετε έως και τρεις γραμματοσειρές, δίπλα-δίπλα, με οποιοδήποτε δείγμα κειμένου θέλετε. Μπορείτε να καθορίσετε το βασικό μέγεθος της γραμματοσειράς, το τυπογραφικό πλάτος, το μέγεθος, την κορυφή, την παρακολούθηση, την ευθυγράμμιση, την απόσταση λέξεων, τη διακόσμηση, το χρώμα και το χρώμα φόντου, για να έχετε μια πολύ ακριβή εικόνα για το πώς θα φαίνονται οι γραμματοσειρές σας στον πραγματικό ιστότοπο. Στη συνέχεια, όταν έχετε όλα όσα ψάχνετε ακριβώς όπως το θέλετε, μπορείτε να πάρετε το CSS.
HTML Ipsum
Το HTML-Ipsum είναι μια γεννήτρια ipsum ειδικά σχεδιασμένη για web design. Αντί να σας δίνει μόνο κομμάτια κειμένου, το HTML-Ipsum μπορεί να σας δώσει προ-διαμορφωμένο κείμενο όπως παραγράφους, ταξινομημένες λίστες, άδειους πίνακες, φόρμες και λίστες πλοήγησης. Προ-μορφοποιημένο κείμενο όπως αυτό είναι ένας πολύ καλός τρόπος για να εξοικονομήσετε χρόνο κατά τη δημιουργία mockups ιστοσελίδα και αρχικά σχέδια.
Typechart
Το Typechart σάς επιτρέπει να περιηγείστε στις προ-μορφοποιημένες, ασφαλείς για το web γραμματοσειρές και να τις δείτε καθώς θα εμφανίζονται τόσο σε υπολογιστή με Windows όσο και σε Mac. Μπορείτε να ταξινομήσετε τις γραμματοσειρές που περιλαμβάνονται βάσει του μεγέθους, της γραμματοσειράς και της έμφασης.
WP-Τυπογραφία
Η WP-Typography είναι ένα WordPress plugin που σας βοηθά να κάνετε την τυπική σας τυπογραφία WP πιο ελκυστική. Υποστηρίζει συλλαβισμό, έλεγχο διαστήματος, έξυπνη αντικατάσταση χαρακτήρων (συμπεριλαμβανομένων των ευρετηρίων, παύλες, ελλείψεις και σύμβολα μαθηματικών) και CSS άγκιστρα για το styling συγκεκριμένα πράγματα (συμπεριλαμβανομένων των ampersands, ακρωνύμων και αριθμών).
CSS Type Set
Το Set Type CSS σάς επιτρέπει να διαμορφώσετε ένα μπλοκ κειμένου και στη συνέχεια να αντιγράψετε το CSS. Είναι μια απλή γεννήτρια CSS που είναι ιδανική για το στυλ μιας γραμματοσειράς κάθε φορά. Σας επιτρέπει να ελέγχετε το τυπογραφικό πλάτος, το μέγεθος, την απόσταση, την κορυφή, τη διακόσμηση και το χρώμα.
Ανατροπή Τυπική
Το Flipping Typical εμφανίζει δείγμα κειμένου σε διάφορες γραμματοσειρές που έχετε εγκαταστήσει στον υπολογιστή σας. Είναι ένας πολύ καλός τρόπος για να συγκρίνετε μια δέσμη γραμματοσειρών, δίπλα-δίπλα, όλα ταυτόχρονα. Η μόνη προειδοποίηση: μόνο μερικές από τις γραμματοσειρές που φαίνονται είναι ασφαλείς στον ιστό.
Τυπογραφικό πλέγμα
Ένας καθιερωμένος κάθετος ρυθμός είναι ένα από τα πράγματα που ξεχωρίζει την μεγάλη τυπογραφία από την καλή τυπογραφία. Το τυπογραφικό πλέγμα σας βοηθά να διαπιστώσετε ότι ο κάθετος ρυθμός για σας. Περιλαμβάνει επίσης ένα κάθετο πλέγμα ως οδηγό για την τοποθέτηση τόσο της τυπογραφίας όσο και άλλων στοιχείων.
ΤιTheFont
WhatTheFont παρέχει έναν εύκολο τρόπο για να μάθετε τι είναι μια συγκεκριμένη γραμματοσειρά. Απλά μεταφορτώστε μια εικόνα (ή καθορίστε μια διεύθυνση URL) και το WhatTheFont θα καθορίσει ποια γραμματοσειρά χρησιμοποιείται. Αυτός είναι ένας πολύ καλός τρόπος για να βρείτε γραμματοσειρές που έχουν χρησιμοποιηθεί σε εικόνες ή αρχεία Flash.
CSS με κατακόρυφο ρυθμό
Όπως ήδη αναφέρθηκε, ένας συνεπής κάθετος ρυθμός θέτει μεγάλη τυπογραφία εκτός από εκείνη που είναι μόνο "καλή". Αυτό το εργαλείο μπορεί να σας βοηθήσει να δημιουργήσετε CSS για τυπογραφία που έχει σταθερό κατακόρυφο ρυθμό. Απλά πληκτρολογήστε την οικογένεια γραμματοσειρών, το μέγεθος γραμματοσειράς, το ύψος της γραμμής βάσης και τα μεγέθη γραμματοσειράς στόχου και υπολογίστε το CSS για συνεπή κάθετο ρυθμό.
Βασικός υπολογιστής ρυθμού
Ένας άλλος μεγάλος υπολογιστής κάθετου ρυθμού. Αυτός, όμως, θα σας δείξει ποια διαφορετικά μεγέθη γραμματοσειρών μοιάζουν δίπλα στο άλλο όταν ρυθμίζονται με τον καθιερωμένο κάθετο ρυθμό σας. Είναι ένας πολύ καλός τρόπος να βεβαιωθείτε ότι όλα τα μεγέθη γραμματοσειράς που χρησιμοποιείτε θα φαίνονται εντάξει.
Γραμματοσειρά
Το Font Burner σας επιτρέπει να ενσωματώσετε τις γραμματοσειρές στις ιστοσελίδες σας χρησιμοποιώντας το sIFR, χρησιμοποιώντας μια γραφική διεπαφή. Υπάρχουν σήμερα περισσότερες από 1000 γραμματοσειρές διαθέσιμες μέσω του Font Burner, και υπάρχει επίσης διαθέσιμο ένα WordPress plugin. Το μόνο που έχετε να κάνετε για να το χρησιμοποιήσετε είναι να βρείτε τη γραμματοσειρά που θέλετε να χρησιμοποιήσετε, να αντιγράψετε τον κώδικα ενσωμάτωσης και στη συνέχεια να τον επικολλήσετε στον κώδικα του ιστοτόπου σας.
Γεννήτρια τυφλών κειμένων
Αυτή η ψεύτικη γεννήτρια κειμένου σάς επιτρέπει να δημιουργείτε όχι μόνο το lorem ipsum, αλλά και έναν αριθμό άλλων τύπων αλάνθαστου κειμένου. Ταυτόχρονα, μπορείτε επίσης να μορφοποιήσετε αυτό το κείμενο ακριβώς μέσα στη γεννήτρια (κάντε κλικ στην επιλογή Επιλογές για προχωρημένους) και, στη συνέχεια, αντιγράψτε το CSS.
Βασική γραμμή
Η βασική γραμμή είναι ένα πλαίσιο πλέγματος και τυπογραφίας που περιλαμβάνει αρχεία για την επαναφορά των προεπιλογών του προγράμματος περιήγησης και την οικοδόμηση μιας βασικής τυπογραφικής διάταξης. Είναι μια καλή επιλογή για τους σχεδιαστές που θέλουν να χρησιμοποιήσουν μια διάταξη πλέγματος και επίσης χρειάζονται κάποια βοήθεια για το σχεδιασμό της τυπογραφίας του ιστότοπου. Η ρύθμιση τυπογραφίας περιλαμβάνει τίτλους, λίστες, παραγράφους, blockquotes και πίνακες, καθώς και κάποιο άλλο κώδικα σήμανσης.
Matrix γραμματοσειράς
Το Font Matrix εμφανίζει τις γραμματοσειρές που περιλαμβάνονται στα λειτουργικά συστήματα Mac και Windows, το Microsoft Office και το Adobe Creative Suite, όλα σε ένα πλέγμα που καθιστά εύκολο να δείτε ποιες γραμματοσειρές είναι πιο πιθανό να βρεθούν σε ποιους τύπους υπολογιστών. Για παράδειγμα, εάν ο ιστότοπός σας απευθύνεται κυρίως σε σχεδιαστές, μπορείτε να κάνετε την πρώτη γραμματοσειρά στη γραμματοσειρά σας κάτι που έρχεται με το Adobe Creative Suite, ενώ εάν η τοποθεσία απευθύνεται σε επαγγελματίες χρήστες, η πρώτη γραμματοσειρά που περιλαμβάνεται μπορεί να είναι κάτι από το Microsoft Office.
Τύπος
Ο τυπογράφος σάς επιτρέπει να πειραματιστείτε με διαφορετικές κλίμακες και άλλα στοιχεία κατακόρυφου ρυθμού. Περιλαμβάνει ποικίλες παραδοσιακές κλίμακες (συμπεριλαμβανομένων των Le Corbusier και Fibonacci) καθώς και άλλες επιλογές σχεδίασης.
Υπηρεσίες γραμματοσειρών Web
Τύπος
Το Typekit προσφέρει γραμματοσειρές από διάφορους πωλητές και χυτήρια τύπου, όπως το The League of Movable Type, FontFont και Veer (μπορείτε να δείτε ολόκληρη τη λίστα γραμματοσειρών χωρίς να χρειάζεται να εγγραφείτε για λογαριασμό). Προσφέρουν επίσης προηγμένες επιλογές ελέγχου για το στυλ των γραμματοσειρών σας, άπειρη κλιμάκωση και ένα κωλοπώο που λέει στους επισκέπτες σας ποιες γραμματοσειρές χρησιμοποιεί ο ιστότοπός σας. Η τιμολόγηση για το Typekit είναι λογική, που κυμαίνεται από δωρεάν για μερική πρόσβαση μέχρι και $ 100 / έτος για χώρους υψηλής επισκεψιμότητας.
Kernest
Το Kernest είναι μια υπηρεσία γραμματοσειράς που χρησιμοποιεί τις γραμματοσειρές OFL, GPL, GUST και Creative Commons, καθώς και εκείνες με εμπορικές άδειες χρήσης. Πολλές από τις γραμματοσειρές τους είναι ελεύθερες να χρησιμοποιούν (η ίδια η υπηρεσία είναι δωρεάν) ενώ άλλοι έχουν συνδρομές που ξεκινούν με λίγα δολάρια.
Γραμματοσειρές Live από το Ascender
Το Ascender προσφέρει τη δική του γραμματοσειρά, το Fonts Live. Έχουν πάνω από 110 γραμματοσειρές διαθέσιμες, με γραμματοσειρές από Monotype, Microsoft, Bigelow & Holmes και άλλους, καθώς και τις δικές τους γραμματοσειρές.
API γραμματοσειράς Google
Η Google προσφέρει μια περιορισμένη επιλογή γραμματοσειρών web ανοιχτού κώδικα. Ενώ η επιλογή δεν είναι μεγάλη, είναι δωρεάν και υποστηρίζεται από την Google, πράγμα που σημαίνει ότι είναι απίθανο να αντιμετωπίσετε προβλήματα χωρητικότητας ή καθυστερημένο χρόνο.
TypeFront
Το TypeFont προσεγγίζει τις γραμματοσειρές του web λίγο διαφορετικά. Αντί να προσφέρετε μια βιβλιοθήκη φιλικών προς το web γραμματοσειρών, σας επιτρέπουν να ανεβάσετε τις δικές σας γραμματοσειρές που φέρουν μια φιλική προς το διαδίκτυο άδεια. Αυτή είναι μια εξαιρετική επιλογή εάν οι γραμματοσειρές που θέλετε να χρησιμοποιήσετε δεν προσφέρονται αυτήν τη στιγμή από οποιαδήποτε άλλη υπηρεσία γραμματοσειρών Ιστού. Υπάρχει δωρεάν σχέδιο για ιστότοπους χαμηλής επισκεψιμότητας, καθώς και προγράμματα πληρωμής.
Τυπογραφικές γραμματοσειρές Web
Το Typotheque προσφέρει τη δική του γραμματοσειρά για να κάνει τις γραμματοσειρές τους διαθέσιμες για εφαρμογές @ font-face. Το πλεονέκτημα είναι ότι υπάρχει μόνο ένα μοναδικό κόστος άδειας χρήσης που μπορεί να καλύψει τόσο τις εφαρμογές εκτύπωσης όσο και τις εφαρμογές ιστού. Το μειονέκτημα είναι ότι η επιλογή περιορίζεται μόνο στις γραμματοσειρές τους.
Τυπογραφία Πόροι και άρθρα
Τα στοιχεία τυπογραφικού στυλ εφαρμόζονται στον ιστό
Αυτός είναι ένας πολύ λεπτομερής οδηγός αναφοράς για όσους θέλουν να μάθουν όχι μόνο τα βασικά της καλής τυπογραφίας του ιστού, αλλά και πιο προηγμένες τεχνικές και αρχές. Είναι χωρισμένο σε κεφάλαια και υποκεφάλαια, όπως οριζόντια και κάθετη κίνηση, μπλοκ & παραγράφους, σελίδωση, μέγεθος και πολλά άλλα. Είναι ένα έργο σε εξέλιξη, οπότε περιμένετε να εμφανιστούν περισσότερες πληροφορίες στο μέλλον.
Νίκαιος τύπος ιστού
Το Nice Web Type έχει αρκετούς πληροφορίες σχετικά με την υλοποίηση τυπογραφίας ιστού. Έχουν "σημειώσεις" για τα πάντα από το να ξεκινήσετε με την τυπογραφία στο web στη χρήση του CSS @ font-face. Συζητούν επίσης τάσεις και νέες ιδέες σε τακτική βάση και έχουν μια σελίδα αφιερωμένη σε αυτό που θεωρούν μερικές από τις καλύτερες γραμματοσειρές εκεί έξω.
12 Παραδείγματα της τυπογραφίας των παραγράφων
Αυτή η συλλογή μορφών παραδειγμάτων παραγράφων από τον Jon Tan δίνει ένα καλό σημείο εκκίνησης για όποιον σχεδιάζει ένα site βαρέων κειμένων. Πολλοί σχεδιαστές παραβλέπουν όλες τις δυνατότητες που συνοδεύουν το styling των παραγράφων και επιλέγουν πιο παραδοσιακές και συντηρητικές επιλογές. Αυτό το άρθρο αποδεικνύει ότι δεν είναι τόσο δύσκολο να βγείτε από το κουτί και να κάνετε κάτι ενδιαφέρον με τις παραγράφους στα σχέδιά σας.
Τυπογραφική Αντίθεση και Ροή
Αυτός είναι ένας εκπληκτικός οδηγός από το WebDesignerWall σχετικά με τις αρχές ροής και αντίθεσης στην τυπογραφία Ιστού. Καταργεί αυτές τις αρχές σε διάφορα τμήματα, όπως μέγεθος, τύπος / ταξινόμηση, χρώμα και βάρος.
Αναθεωρημένη γραμματοσειρά
Αυτό το άρθρο ασχολείται με την επέκταση των κοινόχρηστων ιστών γραμματοσειρών CSS με γνώμονα τον ιστό διερευνώντας άλλες κοινώς εγκατεστημένες γραμματοσειρές. Εξετάζει επίσης τις στήλες γραμματοσειρών ορισμένων δημοφιλών ιστοτόπων, μαζί με συστάσεις για το πώς μπορούν να βελτιώσουν τις στοίβα τους.
Στην τυπογραφία Ιστού
Αυτό το άρθρο του Jason Santa Maria για την A List Apart είναι μια πολύ περιεκτική ματιά στα ζεύγη γραμματοσειρών στα σχέδια ιστοσελίδας σας. Πρόκειται για ένα θέμα που δεν συζητείται πολύ συχνά, αλλά είναι πρωταρχικής σημασίας για τη δημιουργία μεγάλων τυπογραφικών σχεδίων στο διαδίκτυο.
Σκέψη με τον Τύπο
Το Thinking with Type είναι ο ιστότοπος που συνοδεύει το βιβλίο του ίδιου τίτλου της Ellen Lupton. Προσφέρει πολλές βασικές πληροφορίες σχετικά με την τυπογραφία. Ενώ πολλά από αυτά εστιάζονται στην τυπογραφία εκτύπωσης, πολλές από τις πληροφορίες που περιλαμβάνονται μπορούν να εφαρμοστούν στην τυπογραφία Ιστού.
10 μεγάλες συμβουλές για τη βελτίωση της τυπογραφίας του ιστού σας
Μια λίστα με δέκα απλά πράγματα που μπορείτε να κάνετε για να βελτιώσετε την τυπογραφία στα σχέδια του ιστοτόπου σας. Περιλαμβάνει πληροφορίες σχετικά με τη γραμματοσειρά, το μέγεθος, την κλίμακα και την ιεραρχία, οδηγώντας και άλλα.
Τυπογραφία Έμπνευση, Τάσεις & Νέα
Τυπικό
Το τυποφιλ είναι ένα φόρουμ για τους λάτρεις της γραμματοσειράς και τους τυπογράφους. Αν θέλετε να μάθετε τι συμβαίνει στον τυπογραφικό κόσμο, το Τυπόφιλο είναι ένα εξαιρετικό μέρος για να κοιτάξετε. Είναι επίσης ένα καλό μέρος για να λάβετε βοήθεια με τυχόν τυπογραφικά προβλήματα που μπορεί να έχετε.
Αγαπώ την Τυπογραφία
Το ILT είναι ένα blog που αφιερώνεται αποκλειστικά στην τυπογραφία. Συζητά τόσο θέματα σχεδιασμού όσο και επιχειρηματικά θέματα, από επαγγελματική άποψη. Το αρχείο τους είναι τεράστιο, οπότε υπάρχουν πολλές πληροφορίες σχετικά με τρέχουσες και παρελθούσες ειδήσεις και τάσεις που σας κρατούν απασχολημένους.
αγαπάμε την τυπογραφία
Το WLT είναι μια συλλογή τυπογραφίας, γραμματοσήμων, σήμανσης και άλλου τύπου. Οι χρήστες μπορούν να υποβάλουν εικόνες του τύπου που αγαπούν και είναι ένα εξαιρετικό μέρος για να πάτε για τυπογραφική έμπνευση για το επόμενο έργο σας.
Τυπογραφία για τίτλους
Τα στοιχεία σχεδιασμού έχουν μια μεγάλη γκαλερί με περισσότερα από 120 παραδείγματα τυπογραφίας. Διατρέχουν τη γκάμα από απλή σε περίπλοκη, σε μια ποικιλία γραμματοσειρών και στυλ. Είναι ένα εξαιρετικό μέρος για να πάτε αν ψάχνετε για μια μικρή έμπνευση. Έχουν επίσης μια γκαλερί pull quotations με παραδείγματα 20+.
Τυπογραφικά
Το Typographica προσφέρει αναθεωρήσεις τύπου, σχολιασμό και τυπογραφικά βιβλία. Οι κριτικές τύπου τους είναι ιδιαίτερα ενημερωτικές αν ψάχνετε να μάθετε τι κάνει ένα καλό τυπογραφικό.
Πίσω από τις σκηνές της Εξαιρετικής Τυπογραφίας Ιστού
Αυτό είναι στην πραγματικότητα το πρώτο σε μια σειρά πέντε μερών. Αυτή η ανάρτηση εξετάζει την τυπογραφία πίσω από το A List Apart, καταστρέφοντας τις γραμματοσειρές και τα στυλ που χρησιμοποιούνται για διάφορα μέρη του ιστότοπου. Οι επόμενες θέσεις εξετάζουν: Jesús Rodríguez Velasco , Jon Tan , Designr.it , και Το Codex Transportica .
Τύποι
Το Typesites είναι ένα blog που παρουσιάζει τα μεγάλα σχέδια τυπογραφίας ιστοσελίδων σε τακτική βάση. Οι τοποθεσίες που παρουσιάζουν είναι ποικίλες, αλλά όλες περιλαμβάνουν έμπνευση χρήσης του τύπου.
Συγκεντρώθηκε αποκλειστικά για το Webdesigner Depot από Κάμερον Τσάπμαν