porcupine colors

porcupine colors

ΑρχικήJournal › Τυπογραφία, CSS & websites που διαβάζονται

Τυπογραφία, CSS & websites που διαβάζονται

Απορώ πώς μετά απ' όλο το buzz που έχει στηθεί γύρω από τα CSS, ακόμα βλέπουμε μεγάλα ελληνικά sites να μη σέβονται τα κείμενά τους. Μπορώ να το αποδόσω μόνο στην έλλειψη γνώσης. Όμως το 95% of Web design is typography. Δεν μπορώ να πω με λόγια πόσο έντονα ισχύει αυτό και πόσο αγνοείται. Αν θα έπρεπε κάποιος να σταματήσει οτιδήποτε κάνει γύρω από το Web design και να επικεντρωθεί σε ένα πράγμα, αυτό θα έπρεπε να είναι κατά τη γνώμη μου. Τι κάνει όμως ένα κείμενο ευκολοδιάβαστο σε επίπεδο CSS; Ακολουθεί ένας mini οδηγός. Δεν είναι εξαντλητικός σε τεχνικό επίπεδο, είναι μια εισαγωγή στα απολύτως απαραίτητα.

CSS κανόνες που αφορούν την τυπογραφία

Μπορεί ακόμα η HTML, τα CSS και οι σχέσεις τους με τους browsers να μην έχουν φτάσει στο ιδανικό επίπεδο, ωστόσο μας δίνουν πιο πολύ από ποτέ έλεγχο στο πως φαίνεται ένα κείμενο. Τα βασικά στοιχεία που κάνουν ένα κείμενο ευκολοδιάβαστο ή όχι είναι:
  • Το μήκος της γραμμής του κειμένου
  • Η απόσταση των γραμμών μεταξύ τους
  • Η απόσταση των παραγράφων μεταξύ τους
  • Η απόσταση των headings από τις παραγράφους
  • Η απόσταση των λιστών από τις παραγράφους και του κάθε list item από τα άλλα
  • Η απόσταση των γραμμάτων μεταξύ τους
  • Η απόσταση της στήλης του κειμένου από τις διπλανές στήλες
Όλα τα παραπάνω ελέγχονται από ένα CSS με τρόπο πραγματικά απλό.

Κανόνες για καλή αρχή

Είναι ίσως το πιο σημαντικό. Με δεδομένο ότι το default μέγεθος του κειμένου σε όλους τους μοντέρνους browsers είναι 16px, είναι απαραίτητο να θέσουμε σωστές βάσεις.
body {
font-size: 62.5%;
}
Με τον κανόνα αυτό το μέγεθος των γραμμάτων θα είναι πάντα 10px και 1em=10px. Όποιος θέλει να διαβάσει περισσότερα για τις μετατροπές αυτές, μπορεί να ρίξει μια ματιά στο άρθρο μου στο CSS3.gr, Δημιουργία websites με elastic layout.

Το μήκος της γραμμής του κειμένου

CSS rule: width Χρήση: Το μήκος της γραμμής του κειμένου καλό είναι να περιλαμβάνει 55-70 χαρακτήρες (συμπεριλαμβανομένων των κενών). Όσο μεγαλύτερο το πλάτος του κειμένου, τόσο μεγαλύτεροι πρέπει να είναι οι χαρακτήρες. Για το division που περιλαμβάνει το κείμενο, ας το πούμε #content, ο αντίστοιχος κανόνας στο CSS θα μπορούσε να είναι:
#content {
width: 48em;
}
ή
content {
width: 480px;
}
Δε βρίσκω ότι πρέπει ν' ακολουθούμε αυτόν τον κανόνα ιδιαίτερα αυστηρά, όμως οι υπερβολές προς τα πάνω και προς τα κάτω δυσκολεύουν την ανάγνωση. Εξαιρείται η αρχική σελίδα, που στόχο έχει να δείξει πολλά διαφορετικά πράγματα "στιγμιαία".

Η απόσταση των γραμμών μεταξύ τους

CSS rule: line-height Χρήση: Ο quick & dirty κανόνας είναι line-height=default font-size x 1.5. Εγώ συνηθίζω να πολλαπλασιάζω με 1.6. Το CSS θα γινόταν λοιπόν όσον αφορά τις παραγράφους:
p {
font-size: 1.2em;
line-height: 1.6em;
}
(Το μέγεθος του κειμένου στις παραγράφους το θέτω στα 1.2em=12px για να μεγαλώσουν λίγο τα γράμματα και να διαβάζονται πιο εύκολα.) Οι γραμμές πρέπει να "αναπνέουν". Αυξάνοντας την απόσταση μεταξύ των γραμμών το διάβασμα κυλάει πολύ καλύτερα. Βρίσκω το σωστό line-height (ή leading, από το μόλυβδο για τους παλιούς τυπογράφους) το πιο σημαντικό στοιχείο του οποιουδήποτε ευκολοδιάβαστου κειμένου.

Η απόσταση των παραγράφων μεταξύ τους

CSS rule: paddingmargin, ανάλογα με την περίσταση) Χρήση: Δεν υπάρχει απόλυτος κανόνας. Η ευνόητη προσέγγιση λέει ότι οι παράγραφοι χωρίζονται μεταξύ τους με μια απόσταση περίπου 1em, χωρίς όμως αυτό να είναι δεσμευτικό. Οι πιο πάνω γραμμές για την παράγραφο στο CSS γίνονται:
p {
font-size: 1.2em;
line-height: 1.6em;
padding: 0 0 1em 0;
}
Οι αποστάσεις μεταξύ των παραγράφων μπορούν να είναι ακόμα και μηδενικές από τη στιγμή που όλη η υπόλοιπη τυπογραφία έχει προσεχτεί. Παράδειγμα: A working library, ένα blog που ζηλεύω τόσο για τον τρόπο με τον οποίο έχει στηθεί όσο και για όσα γράφονται εκεί.

Η απόσταση των headings από τις παραγράφους

CSS rule: paddingmargin, ανάλογα με την περίσταση) Χρήση: Ισχύει ό,τι ισχύει για τις παραγράφους. Όταν βρει κάποιος το βήμα (pace) ή το ρυθμό του μπορεί να καθορίσει τις αποστάσεις αυτές σχετικά εύκολα. Εξάλλου υπάρχει πάντα το διαχρονικό Compose to a Vertical Rhythm που είναι μια καλή αρχή γενικότερα για το βήμα στην τυπογραφία.

Η απόσταση των λιστών από τις παραγράφους και του κάθε list item από τα άλλα

CSS rule: paddingmargin ή και line-height, ανάλογα με την περίσταση) Χρήση: Η λίστα καλό είναι να απέχει από τις παραγράφους όσο αυτές μεταξύ τους ή ακόμα περισσότερο. Με αυτό το σκεπτικό για τη λίστα θα γράφαμε για το CSS μας:
ul{
padding: 1.5em 0;
font-size: 1.2em;
}
Στη συνέχεια πρέπει να "ανοίξει" η απόσταση του κάθε list item από το προηγούμενο και το επόμενο. Έτσι, ο παραπάνω κανόνας θα μπορούσε να ολοκληρωθεί ως εξής:
ul{
padding: 1.5em 0;
font-size: 1.2em;
}

ul li{
padding: 0 0 1em 0;
line-height: 1.2em
}
(Επιλέγω να δώσω μικρότερο line-height για τα list items σε σχέση με την παράγραφο για να είναι πιο "σφιχτοδεμένες" οι γραμμές στην περίπτωση που ένα list item πιάσει και 2η γραμμή.)

Η απόσταση των γραμμάτων μεταξύ τους

CSS rule: letter-spacing Χρήση: Συνήθως η default τιμή, που είναι φυσικά 1, δεν αλλάζει. Σε γραμματοσειρές όμως όπως η Trebuchet ή "Trebuchet MS" θα μπορούσε το letter-spacing να μικρύνει στα headings για να δώσει μια πιο "solid" εικόνα στις επικεφαλίδες μας.
h1{
font-family: Trebuchet, "Trebuchet MS", sans-serif;
font-size: 1.8em;
letter-spacing: -0.1em
}
Το letter-spacing πάντως απαγορεύεται να αλλάξει προς τα πάνω ή προς τα κάτω διά ροπάλου (εχμ... είπαμε κάτι περί ευγένειας; ) για το body text.

Η απόσταση της στήλης του κειμένου από τις διπλανές στήλες

CSS rule: σεβασμός στον αναγνώστη και στο κείμενο Χρήση: Για το κομμάτι αυτό θα ήθελα να επανέλθω στην αρχή του post. Τα κείμενα που θέλουμε να διαβαστούν είναι ανάγκη να είναι απαλλαγμένα όσο περισσότερο γίνεται από το θόρυβο των στηλών δεξιά κι αριστερά τους. Ένα σχετικό quote από το κείμενο In Defense of Readers που δημοσιεύτηκε στο σπουδαίο A List Apart:
If you want your users to skim the page, then by all means, fill the sidebar with content all the way down. But if you want them to read—if the page was written and not merely filled up, if the text consists of carefully crafted prose rather than bullet points—then respect the reading process and move that content elsewhere.
Τι παραπάνω μπορώ να προσθέσω;

Ήταν δύσκολο;

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

To Journal

Επιστροφή στην κεντρική του Journal.

Ενα απο τα Projects μας

Astrology App

Astrology App

Design για iOS & Android

Σχεδιάζουμε κι αναπτύσσουμε καλύτερα websites & apps.

Υπάλληλος ή εργοδότης & Web standards στο CSS3.gr Μικρές αλήθειες για την ασφάλεια των websites