Κατανόηση της τυπογραφίας 10 Χρήσιμα εργαλεία και πόροι

Στο τελευταίο μου άρθρο σχετικά με την Κατανόηση Τυπογραφίας, έγραψα για το τι συμβαίνει στο σχεδιασμό της τυπογραφίας και πώς να το χειριστείτε για να βελτιώσετε τη διάταξη του ιστοτόπου σας και να βελτιώσετε την εμπειρία του χρήστη. Σε αυτό το άρθρο, αναφέρομαι 10 από τα αγαπημένα μου εργαλεία για την τυπογραφία στο δίκτυο.

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

Συνιστώμενη ανάγνωση: Κατανόηση της τυπογραφίας: Σύνταξη για τον Ιστό

Γραμματοσειρά Matrix

Αυτός ο ηλεκτρονικός οδηγός δημοσιεύτηκε από το 24ωρο σχεδιαστικό blog. Διαθέτει πίνακα πινάκων όλων των τυπικών γραμματοσειρών web που θα βρείτε από προεπιλογή από διάφορους πωλητές λογισμικού. Οι δημοφιλείς τίτλοι περιλαμβάνουν προγράμματα Windows, Mac OS X, Microsoft Office και Adobe Creative Suite.

Έλεγχος χρώματος αντίθεσης

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

HTML-Ipsum

Χρειάζεστε ένα εργαλείο Lorem Ipsum που μπορεί να κάνει περισσότερα από απλά κείμενο εξόδου; Αυτή η γενική γεννήτρια HTML θα δημιουργήσει μπλοκ κώδικα για τα πιο συνηθισμένα στοιχεία σελίδας. Μερικά παραδείγματα περιλαμβάνουν καταργημένες λίστες, λίστες ορισμών, φόρμες ιστού, πίνακες και πολλές άλλες λύσεις.

Typechart

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

PX-to-EM.com

Εάν δεν επαναφέρετε το προεπιλεγμένο μέγεθος του κειμένου του προγράμματος περιήγησης, πιθανόν να έχετε προβλήματα που ταιριάζουν με ems με εικονοστοιχεία. Αυτή η εφαρμογή στο πρόγραμμα περιήγησης παρέχει τόσο έναν πίνακα μετατροπής όσο και μια διεπαφή χρήστη για px σε em. Είναι ένα πολύ απλό εργαλείο για σίγουρο, αλλά προσφέρει έναν εύχρηστο οδηγό με πραγματικά απλή λειτουργικότητα - και δεν μπορείτε να νικήσετε την ελεύθερη τιμή.

CSS Type Set

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

τυπικά

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

Τυπογραφικό πλέγμα

Υπάρχει πολλή συζήτηση για το σχεδιασμό γύρω από το δίκτυο σε HTML και CSS. Μπορείτε πιθανόν να καταλάβετε την έννοια του τρόπου λειτουργίας των πλεγμάτων και η μέτρηση μιας ιστοσελίδας σε εικονοστοιχεία δεν διαφέρει. Αυτό το σεμινάριο πλέγματος από το CSS-Tricks είναι περισσότερο σαν μια καθοδηγούμενη προσπάθεια να εισαχθούν τα βασικά της τυπογραφίας για την ψηφιακή εποχή. Είναι ένα πολύ πιο προηγμένο θέμα στον τομέα του web design. Αλλά αν έχετε κάποια υπομονή, συνιστώ να περάσετε τις λεπτομέρειες για να δείτε πώς αυτές οι ιδιότητες πλέγματος μπορούν να επηρεάσουν πραγματικά τη διάταξη της σελίδας σας.

ΤιTheFont!

Έχουμε βρει όλοι ένα λογότυπο ή μια εικόνα με κάποια πραγματικά δροσερή μη αναγνωρίσιμη γραμματοσειρά. WhatTheFont έχει κάνει γύρους στο Διαδίκτυο για μερικά χρόνια και εξακολουθεί να είναι αγαπημένο μου. Επιλέγετε μια εικόνα για μεταφόρτωση και το σενάριό τους θα αναλύσει κείμενο μέσα στην εικόνα για να ταιριάζει με οποιεσδήποτε παρόμοιες γραμματοσειρές. Η εφαρμογή θα σας συνδέσει ακόμη και σε εξωτερικά προϊόντα όπου μπορείτε να αγοράσετε κάθε γραμματοσειρά, όπως σας εξυπηρετεί.

Υπολογιστής ύψους γραμμής βάσης / γραμμής

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