15 Χρήσιμα Εργαλεία Τυπογραφίας Ιστού, Βιβλιοθήκες και Πλαίσια

Η ενασχόληση με την τυπογραφία στο διαδίκτυο ήταν πραγματικά ιδιόμορφη. Κάθε πρόγραμμα περιήγησης έχει δικό του αλγόριθμο για την απόδοση των γραμματοσειρών πράγμα που θα μπορούσε να οδηγήσει σε απρόβλεπτες διαφορές. Υπάρχουν μόνο μερικές ιδιότητες του CSS που μπορείτε να χρησιμοποιήσετε για να έχετε κάποιο έλεγχο των γραμματοσειρών, όπως είναι η δημιουργία γραμματοσειρών, η εξομάλυνση γραμματοσειρών, η δημιουργία DropCaps κλπ. Επιπλέον, πρέπει να αντιμετωπίσουμε πολλά θέματα σχετικών με τις γραμματοσειρές.

Τα καλά νέα είναι ότι υπάρχουν πόροι που μπορείτε να χρησιμοποιήσετε για να πάρετε τον τροχό όταν πρόκειται για την τυπογραφία του ιστοτόπου. Εδώ είναι 15 εργαλεία ιστού, βιβλιοθήκες και πλαίσια μπορείτε να χρησιμοποιήσετε για το σκοπό αυτό.

Περισσότερα για το Hongkiat:

9 Plugins WordPress για να κάνετε περισσότερα με τις γραμματοσειρές σας
20 καλύτερες προσθήκες τυπογραφίας WordPress για βελτίωση της αναγνωσιμότητας
Καλύτερα και ευκρινέστερα εικονίδια UI με τις γραμματοσειρές Web

TypeRendering

Με λίγα λόγια, TypeRendering λειτουργεί παρόμοια με το Modernizr, εκτός από το ότι εντοπίζει μόνο τη μηχανή του προγράμματος περιήγησης γραμματοσειράς. Αυτή η βιβλιοθήκη προσθέτει προσαρμοσμένες κλάσεις με βάση τις ανακαλύψεις της, οι οποίες μπορούν να χρησιμοποιηθούν για την εφαρμογή ειδικών κανόνων στυλ για την απόδοση του τύπου.

KerningJS

Το Kerning δεν είναι ακόμα προσαρμόσιμο για χρήση στον ιστό - font-kerning η υποστήριξη εξακολουθεί να είναι φτωχή αυτή τη στιγμή - αλλά ένα νέο πρότυπο ιδιοκτησίας έρχεται δρόμος μας. KerningJS είναι μια βιβλιοθήκη Javascript που σας δίνει μερικές νέες ιδιότητες για καλύτερο έλεγχο πυρήνα, για παράδειγμα -letter-kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Λάβετε υπόψη ότι το παραπάνω παράδειγμα είναι μη τυποποιημένο και ισχύει μόνο για το KerningJS.

DropcapJS

Αν και η δημιουργία ενός dropcap είναι εφικτό με τα τρέχοντα πρότυπα CSS, το αποτέλεσμα δεν είναι ακόμα τέλειο. Μερικές φορές είναι εντελώς ανεπιθύμητο. Το DropcapJS, το οποίο αναπτύχθηκε από την πλατφόρμα Adobe Web, έχει αναλάβει την αποστολή να επιτρέψει στον σχεδιαστή ιστοσελίδων να εφαρμόσει ένα τέλειο dropcap εύκολα.

LiningJS

LiningJS είναι μια βιβλιοθήκη JavaScript που προσθέτει το γραμμή τάξη σε κάθε γραμμή της παραγράφου σας. Αυτό σας επιτρέπει να διαμορφώσετε τη γραμμή ξεχωριστά. Προσομοιώνει την ιδέα του :: nth-line (), :: nth-last-line () και :: τελευταία γραμμή ψευδο-τάξεις που δεν υπάρχουν ακόμα στο CSS. Ακολουθεί ένα παράδειγμα για το πώς στυλίζουμε την πρώτη γραμμή μιας παραγράφου με το LiningJS:

 p .line [πρώτο] γραμματοσειράς-βάρος: 600; κείμενο-μετασχηματισμός: κεφαλαία?

Επιπλέον, το LiningJS υποστηρίζει επίσης τη ροή κινεζικών παραγράφων.

UnderlineJS

UnderlineJS είναι μια βιβλιοθήκη JavaScript που κάνει το κείμενο να υπογραμμίζει καλύτερα. Ελέγξτε το demo για να δείτε τι εννοώ, φροντίστε να τοποθετείτε το δείκτη του ποντικιού πάνω από τις γραμμές. Συγκρίνετε τη δοκιμαστική έκδοση με την υπογραμμισμένη έξοδο του τρέχοντος CSS διακόσμηση κειμένου και ίσως να είστε οπαδός του υπογραμμισμένου.

FlowType

Αυτό το πρόσθετο προσαρμόζει δυναμικά το μέγεθος της γραμματοσειράς με βάση ένα συγκεκριμένο πλάτος περιτυλίγματος. FlowType σας βοηθά να εφαρμόσετε έναν ιδανικό αριθμό χαρακτήρων ανά γραμμή σε οποιοδήποτε πλάτος οθόνης. Η βιβλιοθήκη διαθέτει επιλογές, όπου μπορείτε να ορίσετε το πλάτος οθόνης min / max, το μέγεθος γραμματοσειράς min / max και την αναλογία γραμματοσειράς.

HatchShow

HatchShow διευρύνει το μέγεθος μιας γραμματοσειράς για να γεμίσει ολόκληρο το πλάτος του κοντέινερ. Το plugin λειτουργεί από το κουτί με τον αλγόριθμο. με λίγα λόγια, μετρά το πλάτος του δοχείου και το μήκος του χαρακτήρος γραμματοσειράς και προσαρμόζει το σωστό μέγεθος της γραμματοσειράς.

GridLover

GridLover είναι ένα εξαιρετικό εργαλείο για να δημιουργήσετε βασικά στυλ για την τυπογραφική διάταξη (μέγεθος, ύψος γραμμής και περιθώριο) με ένα εύκολο UI ρυθμιστικό. Δημιουργεί τα στυλ σε SCSS, LESS και Stylus για να μπορείτε να τα συμπεριλάβετε αμέσως στο έργο σας ανεξάρτητα από το CSS-Preprocessor που χρησιμοποιείτε.

Τύποςαπεικόνισης

Τύποςαπεικόνισης είναι ένα ηλεκτρονικό εργαλείο που θα σας βοηθήσει να προσδιορίσετε εύκολα το σωστό μέγεθος γραμματοσειράς για τον ιστότοπό σας. Το εργαλείο παρέχει ένα απλό διαισθητικό γραφικό περιβάλλον για να εισαγάγετε το μέγεθος της γραμματοσειράς, την κλίμακα και την οικογένεια γραμματοσειρών που θέλετε να χρησιμοποιήσετε. Τα αποτελέσματα θα εμφανιστούν για σας, ώστε να μπορείτε να παίξετε με την κλίμακα, για να έχετε ακριβώς τη σωστή αξία. Ακριβώς αρπάξτε το CSS μόλις τελειώσετε.

Modular Κλίμακα

Modular Κλίμακα είναι ένα εργαλείο για τη δημιουργία ιδανικής κλίμακας γραμματοσειρών για κείμενο και κείμενο. Εκπέμπει στο Sass το οποίο πρέπει να χρησιμοποιείται σε συνδυασμό με τη βιβλιοθήκη του Sass. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το JavaScript .

Γραμματοσειρά σε πλάτος

Γραμματοσειρά σε πλάτος (FTW) είναι μια βιβλιοθήκη Javascript που κάνει μια γραμματοσειρά να ταιριάζει στο δοχείο πλάτους της. Θα καθορίσει το μέγεθος της γραμματοσειράς μαζί με το διάστημα που απαιτείται για τη γραμματοσειρά. Αν θέλετε να κάνετε έναν όμορφο τίτλο, αυτή είναι η βιβλιοθήκη που ίσως θέλετε να δοκιμάσετε.

FFFFbackback

FFFFbackback, ένα πρακτικό εργαλείο που σας επιτρέπει να βρείτε την καλύτερη στοίβα γραμματοσειρών που θα υποβαθμιστεί με χάρη. Το εργαλείο έρχεται σε μορφή bookmarklet, το οποίο θα αναλύσει την οικογένεια γραμματοσειρών στη σελίδα σας και θα προτείνει ένα σύνολο γραμματοσειρών που θα χρησιμοποιηθεί ως εναλλακτική.

Ζεύγος γραμματοσειρών

Το Google Font είναι μία από τις δημοφιλέστερες βιβλιοθήκες γραμματοσειρών του διαδικτύου που χρησιμοποιούνται από εκατομμύρια και φιλοξενεί πάνω από 500 οικογένειες γραμματοσειρών. Ζεύγος γραμματοσειρών είναι μια συλλογή ζευγαρωμένων γραμματοσειρών Google, όπου μπορείτε να βρείτε εύκολα έναν συνδυασμό μεταξύ των γραμματοσειρών και των τύπων προσώπων. Το ζεύγος γραμματοσειρών κάνει την επιλογή της αντιστοίχισης γραμματοσειρών λιγότερο συντριπτική.

Ρυθμίσεις τύπου

Ρυθμίσεις τύπου είναι μια συλλογή του κανόνα CSS που έχει οριστεί για τον καθορισμό της σωστής κλίμακας γραμματοσειρών, του κάθετου ρυθμού και της απόκρισης της τυπογραφίας. TypeSettings έρχεται σε Sass και Stylus που επιτρέπει την ευελιξία για την κάλυψη των αναγκών του έργου σας με την προσαρμογή των μεταβλητών.

Πινακίδα τύπου

Πινακίδα τύπου είναι ίσως ένα από τα πιο ολοκληρωμένα κιτ εκκίνησης για τη δημιουργία τυπογραφίας. Πινακίδα τύπου πλοίου με μια χούφτα βασικών τυπογραφικών στυλ που απευθύνονται σε κλίμακα, χρώματα, μικρό κεφάλαιο, dropcap, εσοχή, συλλαβισμό, blockquote, μπλοκ κώδικα και πολλά άλλα πράγματα.

Τώρα διαβάστε: Βιτρίνα των Σχεδίων Web με όμορφη τυπογραφία