Κατασκευή ιστοσελίδων: πώς επιλέγονται μέγεθος και βάρος κειμένου

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

Τι σημαίνουν μέγεθος και βάρος κειμένου

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

Η ιεραρχία προηγείται των αριθμών

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

Η ποσότητα πληροφορίας αλλάζει την κλίμακα

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

Μήκος γραμμής και διάστιχο δουλεύουν μαζί

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

Η έντονη γραφή πρέπει να έχει συγκεκριμένο ρόλο

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

Πίνακας απόφασης τυπογραφικής ιεραρχίας

Η μικρή οθόνη δεν είναι μικρογραφία της μεγάλης

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

Δοκιμή με πραγματικό περιεχόμενο, όχι με δείγματα

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

Σημάδια ότι το σύστημα κειμένου θέλει επανέλεγχο

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

Η τυπογραφία βοηθά την κατανόηση, όχι τη μηχανική κατάταξη

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

Κλειδώστε σύστημα και όχι μεμονωμένες εξαιρέσεις

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

Πώς οργανώνεται η παράδοση του τυπογραφικού συστήματος

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

Δοκιμάστε την ιεραρχία με πραγματικές συνθήκες ανάγνωσης

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

Ορίστε κανόνες ώστε το κείμενο να μη χαλάσει μετά την παράδοση

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