Οι κανόνες του ανταποκρινόμενου τυπογραφικού ιστού

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

Πώς παίρνετε τόσο το σχέδιο όσο και τον κωδικό σωστά; Πώς επικοινωνούν οι προγραμματιστές σας με τους σχεδιαστές pixel-pushing; Πώς μπορούν οι σχεδιαστές σας να κάνουν τους μηχάνους προγραμματιστές να ενδιαφέρονται για την τυπογραφία; Ο πιο γρήγορος και απλούστερος τρόπος είναι να πάρετε τους σχεδιαστές και τους προγραμματιστές σας να μιλούν την ίδια γλώσσα, να σέβονται ο ένας τον άλλον για το σκάφος τους και να επιδιώξουν να κατανοήσουν τόσο τις αρχές όσο και τους περιορισμούς της τυπογραφίας ιστού.

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

Τι είναι η καλή τυπογραφία;

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

Η τυπογραφία είναι η εμφάνιση του κειμένου. Είμαστε ντυμένοι κείμενο επάνω. Ο σκοπός του ντυσίματος είναι να κάνει τον χρήστη να προσελκύσει αρκετά για να προσελκύσει μια συνομιλία, αλλά να μην κρατήσει τόσο μεγάλη προσοχή που το άλλο μέρος αποσπάται από τη συζήτηση.

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

Δύο πράγματα πρέπει να συμβούν για τους αναγνώστες να εστιάσουν και να βυθιστούν στο κείμενο. Πρώτον, η τυπογραφία πρέπει να μεταφέρει κατάλληλη (εάν υπάρχει) συναίσθημα. Δεύτερον, το κείμενο πρέπει να είναι εύκολο να διαβαστεί. Αυτό μας φέρνει σε τέσσερις βασικές ιδιότητες που πρέπει να πάρετε δεξιά.

• Οικογένεια γραμματοσειράς
• Μέγεθος γραμματοσειράς
• Ύψος γραμμής (που ονομάζεται επίσης οδηγός)
• Πλάτος κειμένου (που ονομάζεται επίσης μέτρο κειμένου)

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

Η τέχνη του αναγνώσιμου κειμένου

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

Όταν επιλέγετε το μέγεθος γραμματοσειράς , ύψος γραμμής Και το μέτρο για το κείμενο του σώματος σας, βεβαιωθείτε ότι χρησιμοποιείτε πραγματικό περιεχόμενο. Εάν δεν έχετε πραγματικό περιεχόμενο, χρησιμοποιήστε κείμενο από τη Wikipedia αντί του Lorem ipsum.

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

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

Ορίζοντας τα δεξιά μεγέθη είναι πιο δύσκολο να εξηγήσω γραπτώς, οπότε έκανα μερικά βίντεο για να σας βοηθήσω μέγεθος γραμματοσειράς , μετρούν και κύριος .

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

Η γραμματοσειρά σας είναι πολύ μικρή αν:

• Πρέπει να συγκεντρωθείτε για να διαβάσετε το κείμενο
• Πρέπει να σκοντάψετε τα μάτια σας
• Έχετε την επιθυμία να κάνετε μεγέθυνση

Η γραμματοσειρά σας είναι πολύ μεγάλη αν:

• Αρχίζετε να παρατηρείτε γραμματοσειρά αντί να διαβάζετε το περιεχόμενο
• Μπορείτε να διαβάσετε μόνο ένα έως τρία λόγια τη φορά
• Έχετε την επιθυμία να σμικρύνετε

Το μέτρο κειμένου σας είναι πολύ μεγάλο εάν:

• Πρέπει να γυρίσετε το κεφάλι σας για να διαβάσετε το κείμενο
• Χάνετε τη συγκέντρωση στο μέσο του δρόμου

Το μέτρο κειμένου σας είναι πολύ μικρό εάν:

• Αισθάνεστε ερεθισμένοι όταν το κείμενο σπάει στην επόμενη γραμμή
• Τα μάτια σας κουράζονται από την αναπήδηση προς τα αριστερά και δεξιά γρήγορα

Ο οδηγός σας είναι πολύ στενός εάν:

• Το κείμενο αισθάνεται πυκνό και συντριπτικό
• Διαβάζετε τυχαία τη λανθασμένη γραμμή του κειμένου

Ο οδηγός σας είναι πολύ μεγάλος εάν:

• Μπορείτε να αποσυνδεθείτε από τον λευκό χώρο ανάμεσα σε σειρές λέξεων

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

Τοποθέτηση άλλων στοιχείων

Πολλοί σχεδιαστές και προγραμματιστές επέλεξαν το μέγεθος γραμματοσειράς Για στοιχεία όπως το H1 και το H2 οπτικά και απλά ελπίζουμε ότι αυτοί οι μαγικοί αριθμοί λειτουργούν καλά στο σχεδιασμό τους. Αλλά δεν υπάρχει λόγος να τραβήξει απλά τους αριθμούς από τον λεπτό αέρα. Οι τυπογράφοι έχουν χρησιμοποιήσει κλίμακες τυπογραφίας για αιώνες για να βοηθήσουν με αυτό. Αυτό που κάνετε είναι να επιλέξετε έναν αριθμό από την κλίμακα τυπογραφίας ως το μέγεθος του στοιχείου σας. Δυστυχώς, αυτές οι κλίμακες δεν μπορούν να χρησιμοποιηθούν απευθείας για τον ιστό επειδή είναι κατασκευασμένα για σχεδιασμό εκτύπωσης.

Ο Tim Brown, ένας εμπειρογνώμονας στον τομέα της τυπογραφίας, ήρθε με μια λύση που ονομάζεται μια αρθρωτή κλίμακα. Λειτουργεί ακριβώς όπως μια κλίμακα τυπογραφίας, εκτός από την κατασκευή της αρθρωτής κλίμακας με το κείμενο του σώματος που έχετε αποφασίσει.

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

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

Κατακόρυφος ρυθμός

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

Πόσο λευκό χώρο πρέπει να χρησιμοποιήσετε; Πολλοί σχεδιαστές επιλέγουν ένα σχήμα όπως το 10px που είναι εύκολο για να σχεδιάσουν γύρω. Πολλοί προγραμματιστές, από την άλλη πλευρά, τείνουν να μαστίζουν έναν τυχαίο αριθμό (όπως το 6px) είτε από ένα άλλο σύστημα πλέγματος είτε από ένα άρθρο που έχουν διαβάσει στο διαδίκτυο. Δεν είναι περίεργο ότι αυτά τα δύο δεν μπορούν να επικοινωνούν.

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

Για να χρησιμοποιήσετε κάθετο ρυθμό, το μόνο που κάνετε είναι:

1. Ορίστε τον λευκό χώρο μεταξύ στοιχείων σε ένα πολλαπλάσιο της βάσης ύψος γραμμής
2. Ορίστε το ύψος γραμμής από όλα τα άλλα στοιχεία σε ένα πολλαπλάσιο της βάσης ύψος γραμμής

Το συγκεκριμένο πολλαπλάσιο δεν χρειάζεται να είναι ένας ακέραιος αριθμός. Μπορείτε να χρησιμοποιήσετε τιμές όπως 0,5x και 1,25x της βάσης ύψος γραμμής να σας παρέχει μεγαλύτερη ευελιξία. Αυτές οι τιμές λειτουργούν επειδή ο κάθετος ρυθμός χρησιμοποιεί την αρχή της επανάληψης.

Πλέγμα βάσης ή όχι;

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

Ειλικρινά, ποτέ δεν θα πάρετε τα βασικά πλέγματα για να εργαστείτε τέλεια στον ιστό, επειδή τα μαθηματικά στην τυπογραφία περιέχουν πάντα τα επιδιόρθωση (όπως 24.8px) και όλα τα προγράμματα περιήγησης χειρίζονται τα σωληνάρια διαφορετικά. Για παράδειγμα, ορισμένα προγράμματα περιήγησης προκαλούν κάθε στοιχείο στη σελίδα να απενεργοποιηθούν κατά 1px. Αυτά τα σφάλματα 1px συσσωρεύουν και ωθούν τα στοιχεία που τοποθετούνται χαμηλώστε τη σελίδα ακόμα πιο μακριά από το πλέγμα. Ως αποτέλεσμα, συνιστώ να χρησιμοποιήσετε ένα βασικό δίκτυο.

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

Τυπογραφία για πολλές οθόνες

Σχεδιασμός τυπογραφίας για πολλές οθόνες δεν σημαίνει καμία κατόρθωση. Υπάρχουν τρία πράγματα που πρέπει να κάνουμε από μια προοπτική σχεδιασμού.

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

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

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

Κωδικοποίηση για την ανταποκρινόμενη τυπογραφία

Γνωρίζουμε ότι πρέπει να αυξήσουμε αναλογικά τα μεγέθη των κειμένων μας. Ο ευκολότερος τρόπος να γίνει αυτό είναι να αυξήσετε το μέγεθος γραμματοσειράς μέσα στο html εκλέκτορας. Θέλουμε επίσης να χρησιμοποιήσουμε σχετικές μονάδες για να σέβονται ένα χρήστη μέγεθος γραμματοσειράς προτίμηση.

 HTML {μέγεθος γραμματοσειράς: 100%;}
@media (min-πλάτος: 40EM) {
 html {μέγεθος γραμματοσειράς: 112,5%;}
} 

Θέλουμε επίσης να χρησιμοποιήσουμε μια σχετική μονάδα για άλλα στοιχεία, έτσι ώστε να έχουν κλίμακα σύμφωνα με το HTML μέγεθος γραμματοσειράς ( h2 στο παρακάτω παράδειγμα). Εάν πρέπει να αλλάξετε το μέγεθος γραμματοσειράς σε διαφορετικό αριθμό στην αρθρωτή κλίμακα, το μόνο που κάνετε είναι να αλλάξετε το μέγεθος γραμματοσειράς αναλόγως ( h1 παρακάτω).

 h1 {μέγεθος γραμματοσειράς: 2.369em;}
@media (min-πλάτος: 40EM) {
 HTML {μέγεθος γραμματοσειράς: 3.147em;}
}

H2 {Μέγεθος γραμματοσειράς: 1.777em;} 

Παρόλο που η διαδικασία φαίνεται απλή, οι νέοι προγραμματιστές ενδέχεται να αντιμετωπίσουν έναν τόνο πονοκεφάλων λόγω των εμπλεκομένων μαθηματικών, γι 'αυτό συνιστώ τη χρήση λειτουργιών και mixins για να βοηθήσει. Συχνά χρησιμοποιώ Κυρία() από το Βιβλιοθήκη αρθρωτής κλίμακας . Με αυτό, μπορείτε να γράψετε MS (4) αντί 3.157em και MS (3) αντί 2.369em .

Ένα παράδειγμα συνάρτησης που μπορεί να διευκολύνει το φορτίο του υπολογισμού κάθετου ρυθμού είναι:

  @Function VR ($ RHYTHM) {@ RETURN $ RHYTHM / 16 * 1REM;} 

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

Σχετικές μονάδες

Όλες οι συζητήσεις σχετικά με τις σχετικές μονάδες τελειώνουν με ένα ζήτημα αν πρέπει να χρησιμοποιήσετε rem ή em μονάδες. το πιστεύω rem και em Έχετε τις μοναδικές τους περιπτώσεις χρήσης και θα πρέπει να τα χρησιμοποιήσετε σε διαφορετικές συνθήκες. Ακολουθούν δύο κανόνες που ενδέχεται να σας βοηθήσουν να επιλέξετε ποια μονάδα χρήσης:

1. Χρήση em Εάν η ιδιοκτησία χρειάζεται να κλιμακωθεί μέγεθος γραμματοσειράς
2. Εάν όχι, χρησιμοποιήστε rem

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

Σύνοψη το

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

Η ανταποκρινόμενη τυπογραφία δεν είναι απίστευτα δύσκολη. Είναι απλώς προκλητικό επειδή χρειάζεστε ένα τεράστιο ποσό υπομονής και επιμέλειας για να αποκαλύψετε σχετικές αρχές και να τα εφαρμόσετε με τρόπο που ταιριάζει στον ιστό.

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό . Εγγραφείτε εδώ .

Σχετικά Άρθρα:

• Master προσβάσιμη τυπογραφία ιστού
• Σχεδιάστε μια ιστοσελίδα ανταποκρινόμενου με μέγεθος με βάση το EM
• 10 Κανόνες για την παραγωγή φιλικών προς το χρήστη φόρμες Web