Ο σχεδιασμός ιστοσελίδων έχει δανειστεί πάντα κατευθυντήριες γραμμές και ορισμούς από τον κόσμο του γραφικού και του εκτυπωτικού σχεδιασμού. Αυτό ισχύει ιδιαίτερα όταν πρόκειται για την τυπογραφία στο διαδίκτυο και τον τρόπο με τον οποίο λαμβάνουμε επιστολόχαρτα στις ιστοσελίδες μας. Αυτές οι παραλλαγές δεν είναι πάντα 1 έως 1 μεταφράσεις, αλλά σίγουρα μπορείτε να δείτε πού επηρέασε μια πειθαρχία την άλλη. Αυτό είναι ιδιαίτερα εμφανές όταν εξετάζετε τη σχέση μεταξύ του παραδοσιακού τυπογραφικού όρου "leading" και της ιδιότητας CSS γνωστής ως "line-height".
Ο σκοπός της ηγεσίας
Όταν οι άνθρωποι χρησιμοποιούσαν χειροκίνητα μεταλλικά ή ξύλινα γράμματα για να δημιουργήσουν τυπογραφία για μια εκτυπωμένη σελίδα, τοποθετήθηκαν λεπτά τεμάχια μολύβδου μεταξύ οριζόντιων γραμμών κειμένου για να δημιουργηθεί απόσταση μεταξύ αυτών των γραμμών. Αν θέλατε μεγαλύτερο χώρο, θα εισάγετε μεγαλύτερα κομμάτια μολύβδου. Έτσι δημιουργήθηκε ο όρος "οδηγός". Εάν ανατρέξατε τον όρο "οδηγώντας" σε ένα βιβλίο για τυπογραφικό σχεδιασμό και διευθυντές, θα διαβάσει κάτι που έχει ως αποτέλεσμα - "την απόσταση μεταξύ των γραμμών βάσης διαδοχικών γραμμών τύπου".
Πρωτοπορώντας στο σχεδιασμό ιστοσελίδων
Στο ψηφιακό σχεδιασμό, ο όρος "οδηγός" χρησιμοποιείται ακόμη για να αναφερθεί η απόσταση μεταξύ γραμμών κειμένου. Πολλά προγράμματα χρησιμοποιούν αυτόν τον ακριβή όρο, παρόλο που το προφανές αποτέλεσμα δεν χρησιμοποιείται προφανώς σε αυτά τα προγράμματα. Αυτό είναι ένα εξαιρετικό παράδειγμα νέων μορφών σχεδιασμού δανεισμού ιδεών από παραδοσιακές, παρόλο που η ακριβής εφαρμογή αυτής της αρχής έχει αλλάξει.
Όταν πρόκειται για το σχεδιασμό ιστοσελίδων, δεν υπάρχει ιδιοκτησία CSS για "οδηγεί". Αντίθετα, η ιδιότητα CSS που θα χειρίζεται αυτήν την οπτική εμφάνιση κειμένου ονομάζεται ύψος γραμμής. Εάν θέλετε το κείμενο σας να έχει επιπλέον χώρο μεταξύ οριζόντιων γραμμών κειμένου, θα χρησιμοποιούσατε αυτήν την ιδιότητα. Για παράδειγμα, ας πούμε ότι θέλατε να αυξήσετε το ύψος γραμμής για όλες τις παραγράφους στο
Αυτό θα ήταν τώρα 1,5 φορές το κανονικό ύψος γραμμής, με βάση το προεπιλεγμένο μέγεθος γραμματοσειράς της σελίδας (το οποίο κανονικά είναι 16px).
Πότε να χρησιμοποιήσετε Ύψος γραμμής
Όπως αναλύεται λεπτομερώς παραπάνω, το ύψος γραμμής είναι κατάλληλο να χρησιμοποιηθεί για να διαχωρίσει τις γραμμές των κειμένων στις παραγράφους ή σε άλλα μπλοκ κειμένου. Εάν υπάρχει πολύ μικρός χώρος μεταξύ των γραμμών, το κείμενο μπορεί να μπερδευτεί και να διαβαστεί δύσκολα για τους θεατές στον ιστότοπό σας. Ομοίως, αν οι γραμμές βρίσκονται σε μεγάλη απόσταση μεταξύ τους στη σελίδα, η κανονική ροή της ανάγνωσης θα διακοπεί και οι αναγνώστες θα έχουν πρόβλημα με το κείμενό σας για το λόγο αυτό. Αυτός είναι ο λόγος για τον οποίο θέλετε να βρείτε την κατάλληλη ποσότητα διαστήματος ύψους γραμμής για χρήση. Μπορείτε επίσης να δοκιμάσετε το σχέδιό σας με τους πραγματικούς χρήστες για να λάβετε τα σχόλιά τους σχετικά με την αναγνωσιμότητα της σελίδας .
Όταν δεν θέλετε να χρησιμοποιήσετε Ύψος γραμμής
Μην συγχέετε το ύψος γραμμής με το παραγέμισμα ή τα περιθώρια που θα χρησιμοποιούσατε για να προσθέσετε κενά στο σχεδιασμό της σελίδας σας, συμπεριλαμβανομένων και των κεφαλίδων ή των παραγράφων. Αυτή η απόσταση δεν οδηγεί και επομένως δεν γίνεται με ύψος γραμμής.
Εάν θέλετε να προσθέσετε χώρο κάτω από ορισμένα στοιχεία κειμένου, θα χρησιμοποιούσατε περιθώρια ή παρεμβολές. Επιστρέφοντας στο προηγούμενο παράδειγμα CSS που χρησιμοποιήσαμε, θα μπορούσαμε να το προσθέσουμε:
main p {ύψος γραμμής: 1.5; margin-bottom: 24px; }} Αυτό θα είχε ακόμα το ύψος 1,5 γραμμής μεταξύ των γραμμών κειμένου για τις παραγράφους της σελίδας (εκείνες που βρίσκονται μέσα στο στοιχείο
Σε όλες σχεδόν τις περιπτώσεις, αυτό θα εμφανιζόταν το ίδιο με το προηγούμενο CSS.
Ας υποθέσουμε ότι θέλετε να προσθέσετε αποστάσεις κάτω από τα στοιχεία λίστας που ήταν μέσα σε μια λίστα με μια κατηγορία "services-menu", θα χρησιμοποιούσατε περιθώρια ή padding για να το κάνετε αυτό, NOT ύψος γραμμής. Επομένως, αυτό θα ήταν κατάλληλο.
.services-menu li {