Πώς να επιλέξετε τη σωστή γραμματοσειρά για την ιστοσελίδα σας
Ο σχεδιασμός μιας ιστοσελίδας είναι μια έντονη διαδικασία που απαιτεί πολύ σκληρή δουλειά και πολύπλευρη αντιμετώπιση.
Υπάρχουν τόσα πολλά που πρέπει να σκεφτείτε, από τα χρώματα και το λογότυπο έως την διάταξη και τα κείμενα.
Αλλά ίσως το πιο ουσιαστικό και υποσυνείδητο κομμάτι του σχεδιασμού μιας ιστοσελίδας έχει να κάνει με την τυπογραφία. Άλλωστε μην ξεχνάμε ότι οι ιστοσελίδες είναι ισχυρό μέρος της οπτικής επικοινωνίας μιας επιχείρησης και η τυπογραφία έπαιζε και θα συνεχίζει να παίζει, τρομερά σημαντικό ρόλο στην επικοινωνία μέσω του διαδικτύου.
Η επιλογή της σωστής γραμματοσειράς είναι το κλειδί για να έχετε μια αποτελεσματική ιστοσελίδας, ανεξάρτητα από το αν αυτή είναι μια απλή προσωπική ιστοσελίδα, ένα blog, ένα eshop ή μια εταιρική ιστοσελίδα. Για να σας βοηθήσουμε να καταλάβετε ποιος τύπος γραμματοσειράς ταιριάζει καλύτερα για την επιχείρηση σας, αναφερόμαστε αναλυτικά παρακάτω σε μερικά tips.
Τι πρέπει να λάβετε υπόψη όταν επιλέγετε την ιδανική γραμματοσειρά για τον ιστότοπό σας;
Ξεκινήστε από τα βασικά
Όταν πρόκειται για γραμματοσειρές ιστοσελίδων, υπάρχουν τόσα πράγματα για να εξετάσουμε, που μπορεί να σας δυσκολέψουν. Αυτός είναι ο λόγος για τον οποίο είναι καλύτερο να ξεκινήσετε από τα πολύ βασικά.
Serif ή Sans
Αυτή είναι μία από τις πιο γνωστές κατηγορίες γραμματοσειρών. Με βάση το ρωμαϊκό αλφάβητο, οι χαρακτήρες Serif χαρακτηρίζονται από ένα διακοσμητικό stroke που βρίσκεται στο τέλος των κατακόρυφων και οριζόντιων κινήσεων των γραμμάτων.
Ορισμένες από τις πιο διάσημες γραμματοσειρές serif περιλαμβάνουν Times New Roman και Georgia . Η γραμματοσειρά Times New Roman εμπίπτει ειδικότερα στην κατηγορία των κλασικών web safe γραμματοσειρών. Συνολικά, δεν μπορείτε να κάνετε λάθος με τις συγκεκριμένες γραμματοσειρές μιας και είναι συνήθως εύκολες στην ανάγνωση και βρίσκονται σε χρήση εδώ και αρκετά χρόνια.
Οι γραμματοσειρές Sans δεν περιέχουν strokes στα γράμματα (η λέξη “sans” σημαίνει “χωρίς” στα Γαλλικά) και είναι γνωστό ότι έχουν πιο μοντέρνο και καθαρό σχέδιο σε σύγκριση με άλλες. Helvetica, Tahoma, Verdana, Futura και Arial είναι όλα παραδείγματα ευρέως χρησιμοποιούμενων γραμματοσειρών sans serif.
Όσον αφορά τις δωρεάν γραμματοσειρές, προτείνουμε να δοκιμάσετε τα παρακάτω για τη δωρεάν γραμματοσειρά γραμματοσειρών Google: Open Sans, Roboto, Source Sans Pro, Poppins, Heebo ή Montserrat.
Ο τύπος που θα επιλέξετε εξαρτάται σε μεγάλο βαθμό από το κοινό-στόχο που απευθύνεστε και από τη διάθεση που θέλετε να δώσετε με τη σχεδίαση της γραμματοσειράς σας. Γενικά, οι γραμματοσειρές serif χρησιμοποιούνται με σκοπό να προωθήσουν έναν πιο επίσημο και κομψό τόνο. Αν και μπορούν επίσης να χρησιμοποιηθούν για να δώσουν μια εναλλακτική εμφάνιση στην ιστοσελίδα σας, και μπορούν συχνά να βρεθούν σε περιοδικά και μέσα στη βιομηχανία της μόδας.
Οι γραμματοσειρές Sans , από την άλλη πλευρά, συμβολίζουν συχνότερα τον μινιμαλισμό, την απλότητα και την ευκολία. Ωστόσο, ένα από τα μεγάλα χαρακτηριστικά των γραμματοσειρών sans serif είναι ότι είναι πολύ ευέλικτα. Για παράδειγμα, εάν συνδυάζεται με ένα παλιό τυπογραφικό στυλ, μια sans serif είναι εκπληκτική για την ιστοσελίδα σας.
Kerning, leading και tracking
Αυτά τα τρία στοιχεία σχεδίασης μπορεί να είναι ζωτικής σημασίας όταν σχεδιάζετε την εμφάνιση της γραμματοσειράς σας. Αυτές οι μέθοδοι έχουν σκοπό να τροποποιήσουν το διάστημα ανάμεσα στα γράμματα, προκειμένου να δημιουργήσουν μια ωραία, ευχάριστη και ευανάγνωστη γραμματοσειρά. Το Kerning αντιπροσωπεύει το μεσοδιάστημα ανάμεσα σε δύο γράμματα, το leading αντιπροσωπεύει το διάστημα μεταξύ των γραμμών κειμένου και το tracking είναι η απόσταση μεταξύ των ομάδων γραμμάτων.
Αντίθεση
Στην τυπογραφική σχεδίαση για ιστοσελίδες, η αντίθεση χρησιμοποιείται για να τονίσει διάφορα κομμάτια του κειμένου με πολλούς τρόπους, όλα με σκοπό να κάνουν τα σημαντικά μέρη να ξεχωρίζουν περισσότερο από τα υπόλοιπα. Οι διαφορετικοί τύποι αντίθεσης περιλαμβάνουν το μέγεθος, το βάρος (κάνοντας ορισμένα τμήματα του κειμένου να εμφανίζονται με έντονα γράμματα), το χρώμα, τη φόρμα (π.χ. κεφαλαία ή πεζά γράμματα) και τη δομή (διαφορετικές μορφές αναμειγμένες με διαφορετικές γραμματοσειρές).
Ευθυγράμμιση
Ο προσδιορισμός του τρόπου με τον οποίο το κείμενο θα τοποθετηθεί στη σελίδα είναι επίσης ένα στοιχείο που μπορεί να συμβάλει σε μεγάλο βαθμό στη σχεδίαση της ιστοσελίδας σας. Μπορείτε να ευθυγραμμίσετε το κείμενο σας προς τα αριστερά, προς τα δεξιά ή προς το κέντρο. Σε γενικές γραμμές, το κείμενο ευθυγραμμισμένο προς τα αριστερά είναι το πιο εύκολο για ανάγνωση, χωρίς να στρεσσάρει το μάτι. Το πλήρως στοιχισμένο κείμενο θεωρείται πιο επίσημο, καθώς οριοθετείται ομοιόμορφα και στις δύο όψεις του περιθωρίου. Μπορείτε να ρυθμίσετε την ευθυγράμμισή σας ανάλογα με τον τύπο του κοινού σας και τις προτιμήσεις του.
Όταν ευθυγραμμίζετε το κείμενό σας, πρέπει επίσης να δώσετε προσοχή στο μήκος γραμμής (απόσταση μεταξύ της αριστερής και της δεξιάς πλευράς του μπλοκ κειμένου). Ο πιο αποτελεσματικός τρόπος μέτρησης του μήκους γραμμής είναι κατά μέσον όρο χαρακτήρες ανά γραμμή. Το βέλτιστο μήκος γραμμής είναι από 45 έως 80 χαρακτήρες, συμπεριλαμβανομένων των διαστημάτων.
Οι τυπογραφικές επιλογές σας πρέπει να συμβαδίζουν
με τον σκοπό της ιστοσελίδας σας
Υπάρχουν τόσες πολλές διαφορετικές γραμματοσειρές στο internet για να διαλέξετε που οι επιλογές σας είναι πρακτικά απεριόριστες. Αυτό όμως δεν είναι απαραίτητα καλό, καθώς μπορεί εύκολα να δυσκολέψει τα πράγματα αν δεν έχετε κάποια ιδέα για το τι θέλετε (ή δεν θέλετε) για την ιστοσελίδα σας. Γι ‘αυτό είναι σημαντικό να εξετάσετε προσεκτικά το σκοπό του σχεδιασμού της ιστοσελίδας σας, καθώς και το είδος του κοινού που θέλετε να προσελκύσετε. Στη συνέχεια δείτε εάν το στυλ της γραμματοσειράς που σκέφτεστε, αντιστοιχεί στο γενικό μήνυμα που θέλετε να μεταφέρετε στους επισκέπτες σας.
Αφού αναλογιστείτε αυτές τις βασικές αρχές, θα πρέπει να απαντήσετε σε μερικές επιπλέον ερωτήσεις:
- Ποια είναι η φύση του Branding σας; Για παράδειγμα, είναι σοβαρή και αυστηρή ή πιο χαλαρή;
- Εάν ο ιστότοπός σας περιστρέφεται γύρω από ένα project, ποιος είναι ο τύπος του project; Είναι βραχυπρόθεσμο ή μακροπρόθεσμο; Ένα μακροπρόθεσμο project (για παράδειγμα, ένα περιοδικό ή ένα ενημερωτικό δελτίο) θα μπορούσε να έχει περισσότερες απαιτήσεις από ένα βραχυπρόθεσμο και μπορεί να χρειαστεί να αλλάξει χαρακτήρες καθώς ο χρόνος εξελίσσεται. Είναι καλύτερο να επιλέξετε μια μεγάλη οικογένεια γραμματοσειρών με διαφορετικές παραλλαγές και weights για να έχετε διαφορετικές επιλογές στη διάθεσή σας, σε περίπτωση που τις χρειαστείτε. Εάν εργάζεστε σε ένα βραχυπρόθεσμο project (όπως μια καμπάνια μάρκετινγκ), τότε η επιλογή απλών γραμματοσειρών μπορεί να είναι αποτελεσματική.
- Θέλετε να στοχεύσετε στην αποδεδειγμένη πρακτικότητα και τη λειτουργικότητα και να πάτε για μία από τις ασφαλείς γραμματοσειρές ή θέλετε να ξεχωρίσετε από τον ανταγωνισμό και να δοκιμάσετε μια πιο εξελιγμένη γραμματοσειρά;
- Η ιστοσελίδα σας θα είναι περισσότερο οπτικά προσανατολισμένη (γραφικά όπως φωτογραφίες, κινούμενα σχέδια και βίντεο) ή θα περιλαμβάνει και αρκετά κείμενα που παρέχουν πολλές πληροφορίες σχετικά με την επιχείρηση σας ή τα προϊόντα σας;
Επιλέξτε τον αριθμό των γραμματοσειρών και ταξινομήστε τους σωστά
Στη τυπογραφία, κάτι που στην αρχή φαίνεται καλό μπορεί εύκολα να προκαλέσει μεγάλο πρόβλημα! Κατά την επιλογή του αριθμού των γραμματοσειρών για τον ιστότοπό σας, η πρότασή μας είναι να μην επιδιώξετε περισσότερες από τρεις διαφορετικές γραμματοσειρές!
- Κύρια γραμματοσειρά. Εφόσον αυτή θα είναι η πιο εμφανής γραμματοσειρά στη σελίδα σας, η κύρια γραμματοσειρά σας θα πρέπει να είναι συνώνυμη με την ταυτότητα της επιχείρησης σας . Οι κύριες γραμματοσειρές χρησιμοποιούνται κυρίως για επικεφαλίδες.
- Δευτερεύουσα γραμματοσειρά. Θα πρέπει να χρησιμοποιήσετε αυτήν τη γραμματοσειρά για το κυρίως μέρος της ιστοσελίδας σας.Αυτό σημαίνει ότι οποιοδήποτε άρθρο ή περιγραφή στη σελίδα σας θα είναι στη δευτερεύουσα γραμματοσειρά σας. Πάνω απ ‘όλα, η δευτερεύουσα γραμματοσειρά σας πρέπει να είναι καθαρή και εύκολη στην ανάγνωση. Οι τύποι γραμματοσειρών όπως η Futura, η Roboto ή η Verdana θα μπορούσαν να είναι μια επιλογή καλών γραμματοσειρών για το σώμα σας.
- Τρίτη γραμματοσειρά. Αν θέλετε την γνώμη μας, η επιλογή τρίτης γραμματοσειράς είναι τελείως προεραιτική . Οι γραμματοσειρές Accent μπορούν να χρησιμοποιηθούν για συγκεκριμένα σημεία ιστοσελίδων, όπως σε ένα call to action ή ένα μενού πλοήγησης. Θα πρέπει να είναι αρκετά ξεχωριστές ώστε να τραβάνε γρήγορα το βλέμμα των επισκεπτών σας, αλλά έχετε κατά νου ότι η χρήση δύο διαφορετικών γραμματοσειρών είναι ήδη αρκετά δύσκολη, οπότε φαντάζεστε πόσο δύσκολεύει η κατάσταση όταν εισάγετε και τρίτη γραμματοσειρά στο design σας.
Προσέξτε τους χρόνους φόρτωσης της ιστοσελίδας σας
Στην εποχή μας, κανείς δεν έχει χρόνο ούτε υπομονή για αργούς ιστοτόπους. Αυτός είναι ο λόγος για τον οποίο εάν μια γραμματοσειρά διαρκεί πολύ για να φορτώσει, ίσως δεν είναι η καλύτερη λύση για εσάς. Παρακάτω θα δείτε μερικά πράγματα που πρέπει να προσέξετε για να μην έχετε μεγάλους χρόνους φόρτωσης στην ιστοσελίδα σας.
- Επιλέξτε μέχρι 2 γραμματοσειρές. Έχουμε ήδη αναφέρει γιατί ο μεγάλος αριθμός γραμματοσειρών μπορεί να μην είναι η καλύτερη ιδέα. Η ταχύτητα φόρτωσης είναι ένας άλλος λόγος για τον οποίο δεν πρέπει να ξεπεράσετε τις 2 γραμματοσειρές ανά ιστοσελίδα.
- Επιλέξτε μόνο τα στυλ που χρειάζεστε. Με αυτόν τον τρόπο, το μέγεθος των γραμματοσειρών σας θα είναι ελάχιστο πράγμα που σημαίνει και μικρότερο χρόνο φόρτωσης. Για παράδειγμα, κατά τη λήψη γραμματοσειράς, επιλέξτε μόνο normal και bold στυλ.
- Μην κατεβάσετε τις γλώσσες που δεν θα χρησιμοποιήσετε. Αν χρειάζεστε μόνο μία ή λίγες διαφορετικές γλώσσες για μια συγκεκριμένη γραμματοσειρά, βεβαιωθείτε ότι δεν έχετε επιλέξει αυτές που δεν θα χρησιμοποιήσετε
Συμπερασματικά
Παρόλο που το Internet είναι γεμάτο με πανέμορφα γραφικά στοιχεία σχεδιασμού όπως γραφικά κινουμένων σχεδίων, εικονογράφηση και φωτογραφία, η πλειοψηφία των ηλεκτρονικών πληροφοριών απαντάται ακόμα στο κείμενο.
Στην πραγματικότητα, η τυπογραφία αποτελεί περίπου το 90% του περιεχομένου της ιστοσελίδας . Έτσι, η σημασία του σχεδίου γραμματοσειράς δεν πρέπει να παραβλέπεται, καθώς μπορεί να έχει άμεση επίδραση στην εμπειρία του χρήστη και, ως εκ τούτου, μπορεί να είναι σύμμαχος ή εχθρός του ιστοτόπου σας. Για να βεβαιωθείτε ότι ο ιστότοπός σας είναι αρκετά ευανάγνωστος ελέγξτε τον τρόπο εμφάνισης των γραμματοσειρών σας σε διαφορετικές συσκευές και μεγέθη οθόνης .
Όταν αποφασίσετε τι σχέδιο γραμματοσειράς θα χρησιμοποιήσετε, προσπαθήστε να σκεφτείτε πρώτα τον σκοπό του σχεδιασμού της ιστοσελίδας σας. Μόλις προσδιορίσετε τη γενική κατεύθυνση στην οποία θέλετε να ακολουθήσετε, επιλέξτε τον αριθμό των γραμματοσειρών που θέλετε να έχετε και, στη συνέχεια, ξεκινήστε την αναζήτηση για πιθανούς συνδυασμούς γραμματοσειρών. Υπάρχουν πολλές διαθέσιμες επιλογές, οπότε βρείτε αυτές που πραγματικά σας ταιριάζουν.
