Ένας απλός οδηγός για την ανταποκριτική τυπογραφία
Η συντριπτική πλειοψηφία των άρθρων που μιλάνε για τον αποκρινόμενο σχεδιασμό επικεντρώνεται σε δύο βασικούς τομείς: ένα ρευστό, εύκαμπτο πλέγμα και ευέλικτες και ευέλικτες εικόνες. Αυτό που πολλοί από αυτούς δεν μιλάνε είναι η τυπογραφία.
Και όμως, για το μεγαλύτερο μέρος των ιστοσελίδων το κείμενο, το περιεχόμενο, είναι το πιο σημαντικό στοιχείο.
Χορηγείται, για ιστότοπους όπου το πρωτεύον περιεχόμενο είναι εικόνες ή βίντεο, ο αποκρινόμενος τύπος είναι λίγο λιγότερο σημαντικός, αλλά δεν πρέπει να παραβλέπεται.
Τα καλά νέα είναι ότι δεν είναι ιδιαίτερα δύσκολη η απόκριση της τυπογραφίας. Απλά πρέπει να αφιερώσουμε λίγο χρόνο για να σκεφτούμε πώς ο τύπος μας πρέπει να ανταποκρίνεται στις αλλαγές στο μέγεθος της οθόνης και στη συνέχεια να εφαρμόζει αυτές τις αλλαγές.
Αρχές ανταποκριτικού τύπου
Υπάρχουν δύο βασικές αρχές για τη δημιουργία αποτελεσματικής ανταποκριτικής τυπογραφίας. Ο πρώτος είναι τύπος με δυνατότητα αλλαγής μεγέθους. Αυτό σημαίνει ότι ο τύπος δεν αλλάζει μόνο με βάση το μέγεθος της οθόνης, αλλά αυτό μπορεί να αλλάξει και από το χρήστη.
Το δεύτερο είναι τα βελτιστοποιημένα μήκη γραμμών, τα οποία διατηρούν την αναγνωσιμότητα. Αυτό σημαίνει ότι για ορισμένες οθόνες, η διατήρηση της περιοχής περιεχομένου μικρότερη και η μικρότερη διάρκεια των γραμμών καθιστά πιο νόημα, παρόλο που το περιεχόμενο θεωρητικά θα μπορούσε να τεντωθεί ευρύτερα.
Αντικαταστήσιμος τύπος με rems
Οι περισσότεροι σχεδιαστές χρησιμοποιούν είτε εικονοστοιχεία είτε ems για το μέγεθος του τύπου τους. Ems είναι μια καλύτερη επιλογή, δεδομένου ότι επιτρέπουν στους χρήστες να αλλάξουν το μέγεθος του browser στον browser τους. Ωστόσο, τα ems σχετίζονται με το γονικό στοιχείο, που σημαίνει ότι είναι πιο περίπλοκα από ό, τι τα εικονοστοιχεία, τα οποία συνδυάζονται μόνο σε σχέδια που ανταποκρίνονται στις ανάγκες τους, όπου υπάρχουν περισσότερα μεγέθη και σχέσεις για να παρακολουθείτε.
Οι Rems προσφέρουν μια καλύτερη εναλλακτική λύση για τα ems. Λειτουργούν σχεδόν με τον ίδιο τρόπο, εκτός από μία βασική διαφορά: οι μονάδες rem είναι σχετικές με το html στοιχείο, αντί για μεμονωμένα γονικά στοιχεία. Αυτό κάνει τη διατήρηση του σωστού μεγέθους του τύπου σας πολύ πιο απλή.
Οι μονάδες Rem υποστηρίζονται τώρα σε όλα τα μεγάλα σύγχρονα προγράμματα περιήγησης, όπως η Opera από την έκδοση 11.6 και το IE9. Παρόλο που μπορεί να θέλετε να συμπεριλάβετε εναλλακτικές λύσεις για προηγούμενα προγράμματα περιήγησης, υπάρχει αρκετή υποστήριξη για τα rems για να τα χρησιμοποιήσετε τώρα.
Δεδομένου ότι θα χρησιμοποιείτε μονάδες rem για τον τύπο μεγέθους, βεβαιωθείτε ότι έχετε εφαρμόσει την επαναφορά στο δικό σας html στοιχείο και όχι το δικό σας body στοιχείο. Έτσι θα πρέπει να μοιάζει με αυτό:
html { font-size:100%; }
Τώρα οι μονάδες rem σας θα εφαρμοστούν στο προεπιλεγμένο μέγεθος γραμματοσειράς για τη συσκευή.
Στη συνέχεια, θα πρέπει να καθορίσετε το μέγεθος της γραμματοσειράς για κάθε μέγεθος οθόνης. Σας προτείνω να πειραματιστείτε με τα πραγματικά μεγέθη γραμματοσειρών σε διάφορες συσκευές για να δείτε τι φαίνεται καλύτερα. Εξαρτάται σε μεγάλο βαθμό από τις γραμματοσειρές που έχετε επιλέξει, καθώς και από το γενικό σχεδιασμό.
Θα θελήσετε να καθορίσετε πολλά μεγέθη γραμματοσειρών που βασίζονται σε διαφορετικά μεγέθη οθόνης, κάτι που είναι αρκετά ευθεία προς τα εμπρός. Για παράδειγμα, το CSS σας μπορεί να φαίνεται ως εξής:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Χορηγείται, αυτός είναι ένας απλοποιημένος κώδικας για αυτό το άρθρο, αλλά σας δίνει ένα σημείο εκκίνησης. Ενδέχεται να παρατηρήσετε ότι για τις μικρότερες οθόνες έχει οριστεί ένα ελαφρώς μεγαλύτερο μέγεθος γραμματοσειράς. Αυτό συμβαίνει επειδή τα μεγαλύτερα μεγέθη γραμματοσειρών είναι γενικά ευκολότερα για ανάγνωση σε μικρές οθόνες.
Φυσικά, θα θελήσετε να κάνετε πρόσθετες προδιαγραφές για πράγματα όπως σας h1 στοιχεία και παρόμοια. Συνιστώ ιδιαίτερα να χρησιμοποιήσετε ένα εργαλείο όπως το Δείγμα γραμματοσειράς Web για να δούμε πώς θα φανεί πραγματικά ο τύπος σας.
Διατηρώντας τα βέλτιστα μήκη γραμμών
Ενώ ο τύπος με δυνατότητα αλλαγής μεγέθους είναι μια αρκετά απλή ιδέα, η διατήρηση των σωστών μήκους γραμμής σε πολλαπλές συσκευές παίρνει λίγο πιο δύσκολο. Υπήρξε αρκετή συζήτηση ως προς το ποιο είναι το βέλτιστο μήκος γραμμής για την αναγνωσιμότητα, αλλά σύμφωνα με το Ινστιτούτο Baymard , η συναίνεση φαίνεται να είναι κάπου μεταξύ 50 και 75 χαρακτήρων ανά γραμμή.
Επίσης, συνιστούμε να χρησιμοποιείτε ένα δοχείο σταθερού πλάτους για το περιεχόμενό σας, αλλά αυτό αποτυγχάνει στο σκοπό ενός ανταποκρινόμενου σχεδιασμού, οπότε πρέπει να προσεγγίσουμε τα πράγματα λίγο διαφορετικά, εάν θέλουμε να διατηρήσουμε την απόκριση με τα βελτιστοποιημένα μήκη γραμμών.
Κατ 'αρχάς, εξετάστε τα διαφορετικά μεγέθη οθόνης που θα σχεδιάσετε και υπολογίστε ποια μέγεθος γραμματοσειράς θα πρέπει να χρησιμοποιήσετε για να πάρετε περίπου 50 χαρακτήρες σε μια γραμμή. Για πολύ μικρές οθόνες, ίσως χρειαστεί να πάτε κάτω από 50 χαρακτήρες ανά γραμμή για να διατηρήσετε ένα αναγνωρίσιμο μέγεθος γραμματοσειράς, αλλά 50 θα πρέπει να είναι ο στόχος. Αυτό μας δίνει ένα καλό σημείο εκκίνησης για το μέγεθος της γραμματοσειράς μας.
Πρέπει επίσης να ορίσουμε μέγιστα πλάτη (ή σημεία διακοπής) για περιοχές περιεχομένου κειμένου. Ελέγξτε το μέγεθος του τύπου που χρησιμοποιείτε για ένα δεδομένο μέγεθος οθόνης και στη συνέχεια καθορίστε το πλάτος του κοντέινερ περιεχομένου όταν έχετε περίπου 75 χαρακτήρες ανά γραμμή. Αυτό δεν πρόκειται να είναι ακριβές, εκτός και αν χρησιμοποιείτε γραμματοσειρά μονοσκόπησης, αλλά θα πρέπει να είστε σε θέση να καταλήξετε με έναν μέσο όρο αρκετά εύκολα. Αυτό γίνεται το μέγιστο πλάτος του δοχείου μας.
Ας υποθέσουμε ότι το προεπιλεγμένο μέγεθος γραμματοσειράς για μια συγκεκριμένη συσκευή είναι 16px και θέλετε το μέγεθος της γραμματοσειράς σας να είναι 20px (ας υποθέσουμε ότι χρησιμοποιούμε ένα τύπος γραμματοσειράς serif όπως το Droid Serif για αυτό το παράδειγμα). Αυτό σημαίνει ότι θα καθορίσετε τον τύπο που θα είναι 1.25rem. Σε αυτό το μέγεθος, θα θέλετε ένα πλάτος κοντέινερ πλάτους περίπου 675px. Αυτό μας δίνει μια μέτρηση χαρακτήρων στη δεκαετία του '60 κατά μέσο όρο, η οποία είναι σωστή στο πλάτος στόχο μας.
Για να καθορίσετε το πλάτος του κοντέινερ, απλά χρησιμοποιήστε αυτόν τον κωδικό:
@media (min-width: 950px) { .container {width:675px;} }
Μπορείτε να ορίσετε αυτά τα μέγιστα πλάτη γραμμής για κάθε μέγεθος οθόνης ή μόνο για συγκεκριμένα μεγέθη. Με μικρότερες οθόνες, μπορεί να θέλετε να αφήσετε το πλάτος του δοχείου έξω και αφήστε τον τύπο να εξαπλωθεί σε όλο το πλάτος της οθόνης.
Τώρα, με πολύ μεγαλύτερες οθόνες, ίσως θελήσετε να εξετάσετε τη διαίρεση του περιεχομένου σας σε πολλές στήλες. Ας πούμε, για παράδειγμα, ότι εργάζεστε με ένα iPad σε προβολή τοπίου. Το πλάτος της οθόνης σας είναι 2048 pixels. Τεντώνοντας τις γραμμές σας για να γεμίσετε την οθόνη σας δυσκολεύει να διαβάσετε, αλλά κεντράρετε το περιεχόμενό σας και διατηρώντας το μήκος των γραμμών σας μικρότερο είδος ήττας ο σκοπός προβολής περιεχομένου σε κατάσταση οριζόντιου προσανατολισμού.
Αντ 'αυτού, ορίστε τον τύπο σας σε δύο στήλες (ή ακόμα και τρεις, ανάλογα με το μέγεθος της γραμματοσειράς σας). Οι προδιαγραφές πολλών στηλών της CSS3 καθιστά πολύ εύκολο να διαιρέσετε το κείμενό σας σε πολλές στήλες χωρίς να χρειάζεται να αλλάξετε ολόκληρη τη διάταξη. Συνδυάστε το με τα ερωτήματα μέσων και τώρα έχετε μια διάταξη περιεχομένου που χωρίζεται σε δύο ή τρεις στήλες για μεγαλύτερες οθόνες, διατηρώντας τόσο ένα ευανάγνωστο μέγεθος τύπου όσο και ένα ευανάγνωστο μήκος γραμμής.
Και πάλι, ο κώδικας για να γίνει αυτό είναι πολύ απλός:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Τώρα, σε οθόνες μεγαλύτερες από 1140 pixels, θα λάβετε το περιεχόμενό σας χωρισμένο σε δύο στήλες, κάνοντας τα μήκη γραμμών σας πολύ πιο ευανάγνωστα.
Χρήση εναλλακτικών γραμματοσειρών
Ένα πράγμα που συχνά παραβλέπεται όταν μιλάμε για ανταποκρινόμενη τυπογραφία, είναι η ιδέα ότι διαφορετικές γραμματοσειρές μπορεί να μην λειτουργούν καλά σε διαφορετικά μεγέθη. Αυτό ισχύει ιδιαίτερα για τις γραμματοσειρές εμφάνισης.
Αυτό σημαίνει ότι θα πρέπει να αποφεύγετε να χρησιμοποιείτε αυτές τις γραμματοσειρές στα ανταποκρινόμενα σχέδια σας; Φυσικά και όχι. Αντ 'αυτού, απλώς καθορίστε διαφορετικές γραμματοσειρές για διάφορα στοιχεία στις μεγαλύτερες ή μικρότερες διατάξεις σας.
Για παράδειγμα, με σχέδιο για επιτραπέζιους υπολογιστές, ίσως θέλετε να χρησιμοποιήσετε μια γραμματοσειρά όπως Σενάριο πρωταθλήματος για τις κεφαλίδες σας. Αλλά σε μια μικρότερη οθόνη, όπως ένα iPhone, θα πρέπει είτε να το κάνετε τόσο μεγάλο ώστε να κυριαρχεί στο περιεχόμενο, είτε θα είναι πολύ δύσκολο να το διαβάσετε.
Αυτό που μπορούμε να κάνουμε εδώ είναι η χρήση του Script League για τις μεγαλύτερες οθόνες (iPad, desktop κ.λπ.), αλλάζοντας μια μεγαλύτερη έκδοση της γραμματοσειράς για μικρότερες οθόνες (όπως το iPhone ή άλλα smartphones).
Για να το κάνετε αυτό, απλά ορίστε κάτι τέτοιο:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Φυσικά αυτό μπορεί να γίνει και για κάτι περισσότερο από τις επικεφαλίδες σας.
συμπέρασμα
Ενώ ο ευαίσθητος σχεδιασμός έχει επικεντρωθεί σε μεγάλο βαθμό στις εικόνες και τη συνολική διάταξη, η τυπογραφία είναι εξίσου σημαντική με τα δύο αυτά πράγματα. Το καλύτερο μέρος είναι ότι δεν είναι ιδιαίτερα δύσκολο να προσαρμόσετε και να βελτιστοποιήσετε την τυπογραφία σας για ένα σχέδιο που ανταποκρίνεται.
Είναι σημαντικό να τοποθετήσετε τον ίδιο χρόνο και προσπάθεια σε αυτό που βάζετε σε άλλα στοιχεία του σχεδίου σας. Η διατήρηση της αναγνωσιμότητας του περιεχομένου κειμένου σας αποτελεί ζωτικό στοιχείο για τη δημιουργία μιας βέλτιστης εμπειρίας χρήστη για τους επισκέπτες σας.
Δίνετε τόσο μεγάλη έμφαση στην απόκριση τυπογραφίας στα σχέδιά σας καθώς κάνετε ανταποκρινόμενα πλέγματα και εικόνες; Γιατί ή γιατί όχι?