Πώς να κάνετε τον τύπο σας πιο ελκυστικό στον Ιστό
Δεν είναι ασυνήθιστο για έναν σχεδιαστή του σημερινού κόσμου να δίδει λίγη προσοχή στον τρόπο με τον οποίο ο τύπος είναι σχεδιασμένος, ειδικά με τις πάντα τόσο βολικές προεπιλεγμένες ρυθμίσεις των ετικετών τίτλων και των ασφαλών γραμματοσειρών που βρίσκονται παγκοσμίως στο διαδίκτυο.
Αν εμείς ως διαδραστικοί σχεδιαστές είμαστε σε θέση να πάρουμε λίγο περισσότερο χρόνο όταν πρόκειται για τυπογραφία, από τα αποτελέσματα θα δείξει ένα μοναδικό, καλά σχεδιασμένο σχεδιασμό, σε αντίθεση με τη δημιουργία "τρέξιμο του μύλου".
Υπάρχει μια καλή πιθανότητα ότι η πλειοψηφία των σχεδιαστών και σχεδίων που θαυμάζετε παρουσιάζουν καλά παραδείγματα τυπογραφίας.
Θα σας δείξω μερικά βήματα που παίρνω στον τύπο μικροαλλαγές για να είμαι πιο ελκυστικός από τα προεπιλεγμένα σενάρια ετικετών 24x H1 μαζί με 13px σε Times New Roman.
Μην εγκαταλείπετε τις προεπιλεγμένες ρυθμίσεις, όλοι το κάνουν.
Εδώ έχουμε την ολοένα και πιο κοινή εμφάνιση μιας επικεφαλίδας μαζί με ένα κομμάτι αντιγράφου σώματος που θα ακολουθήσει. Αυτό δεν σας τραβάει ακριβώς ή δεν ξεχωρίζει από όλα τα άλλα δείγματα ακριβώς όπως αυτό, σωστά; Για να φτιάξουμε το δείγμα κειμένου πιο οπτικά ελκυστικό, πρώτα, θα κάνουμε μερικές αλλαγές με την επιλογή της γραμματοσειράς μας.
Επιλέξτε μια γραμματοσειρά που θα έχει περισσότερο οπτικό βάρος με τον τίτλο σας
Αν και η επιλογή γραμματοσειράς δεν είναι ακριβώς "τυπογραφία", είναι στην πραγματικότητα ένα βασικό στοιχείο για να βοηθήσει τον τύπο σε μια σελίδα να διακρίνει από άλλα στοιχεία. Με την εμφάνιση του @ font-face, υπάρχουν τεράστιες ποσότητες επιλογών για τους σχεδιαστές οπουδήποτε.
Εδώ έχω χρησιμοποιήσει μια γραμματοσειρά Extra Condensed Gothic Style που μπορεί εύκολα να βρεθεί σε μια ελεύθερη τοποθεσία γραμματοσειράς όπως το FontSquirrel.com. Εάν σταματήσουμε να το σκεφτόμαστε, το όνομα "Συμπυκνωμένο" θα πρέπει να σημαίνει κάτι, γιατί είναι στην πραγματικότητα πιο πυκνό απ 'ότι είναι το συνηθισμένο μέλος της οικογένειας στυλ βιβλίου, ακριβώς αυτό που θέλουμε από έναν τίτλο :, κάτι που τραβάει τον χρήστη και πραγματικά διαχωρίζεται από το αντίγραφο του σώματος. Σίγουρα καταφέρνει να προσελκύσει καλύτερα την προσοχή σας από το πρωτότυπο, αλλά υπάρχουν μερικά πράγματα που μπορούμε να κάνουμε για να βελτιώσουμε περαιτέρω το κείμενο.
Κάντε το πιο ελκυστικό με δύο γραμμές CSS
Η άμεση αλλαγή γίνεται στα γράμματα. όλα αυτά κεφαλαιοποιούνται τώρα, αλλά τώρα έχουν και αρνητική κλίση μεταξύ καθενός από τα γράμματα (μια τεχνική που μεταφέρεται από το σχεδιασμό της εφημερίδας).
Και τα δύο αυτά χαρακτηριστικά μπορούν εύκολα να επιτευχθούν μέσω του CSS, { text-transform: κεφαλαία. και η απόσταση μεταξύ χαρακτήρων: -Xpx. }. Κάνοντας αυτές τις δύο γραμμές να κωδικοποιήσουν τις αλλαγές, έχει ως αποτέλεσμα μια σημαντική βελτίωση στο οπτικό βάρος, ειδικά πάνω από το πρωτότυπο.
Εκτελέστε τυχόν τελευταίες μικρές αλλαγές
Στο επόμενο βήμα, η γραμματοσειρά που χρησιμοποιείται στην παράγραφο του σώματος άλλαξε στην πραγματικότητα σε ένα καθαρότερο sans-serif, το οποίο συμπληρώνει καλύτερα το κείμενο του τίτλου. Βρισκόμαστε πιο κοντά σε ένα πιο οπτικά ελκυστικό σχεδιασμό, αλλά υπάρχουν μερικές αλλαγές που μπορούμε να κάνουμε για να το καθαρίσουμε ακόμα περισσότερο.
Όπως δείχνουν οι πράσινοι δείκτες, υπάρχουν ανομοιογενή περιθώρια και ποιοι τυπογράφοι θέλουν να ονομάσουν ένα "ορφανό". Ποια είναι μια ενιαία λέξη που εμπίπτει στην τελευταία γραμμή της παραγράφου. Δημιουργεί ένα πολύ άνισο βάρος οπτικά σε σύγκριση με το υπόλοιπο κείμενο και αυτό το ζήτημα μπορεί να λυθεί εύκολα αναδιατυπώνοντας το κείμενο ελαφρώς.
Όταν πρόκειται για περιθώρια, δεν υπάρχει κανόνας ότι όλοι πρέπει να είναι ίσοι. Ωστόσο, αν ξεκινάτε μια νέα σταδιοδρομία σχεδιασμού ιστοσελίδων, είναι καλή πρακτική να έχετε ίσα περιθώρια καθ 'όλη τη διάρκεια της ζωής σας μέχρι να βιώσετε και να μάθετε τεχνικές που σας επιτρέπουν να επεκτείνετε πέρα από τις οδηγίες της στοιχειοθεσίας και ακόμα να επιτύχετε τον στόχο σας οπτικά.
Αφού δημιουργήσετε έναν πιο ισορροπημένο οπτικό καμβά, αφαιρώντας το ορφανό και προσαρμόζοντας τα περιθώρια μπορείτε να δείτε το τελικό αποτέλεσμα, ένα καλά τοποθετημένο δείγμα τύπου που είναι άνετο εκεί που βρίσκεται.
Ποιες είναι οι καλύτερες συμβουλές σας για την τυπογραφία στο διαδίκτυο; Ενημερώστε μας στα σχόλια!