Ο σχεδιασμός μιας ιστοσελίδας είναι μια έντονη διαδικασία που απαιτεί πολύ σκληρή δουλειά και πολύπλευρη αντιμετώπιση. Υπάρχουν τόσα πολλά που πρέπει να σκεφτείτε, από το χρωματικό σχέδιο και το λογότυπο έως την διάταξη και το κείμενο. Αλλά ίσως το πιο ουσιαστικό και υποσυνείδητο κομμάτι του σχεδιασμού μιας ιστοσελίδας έχει να κάνει με την τυπογραφία. Άλλωστε μην ξεχνάμε ότι οι ιστοσελίδες είναι ισχυρό μέρος της οπτικής επικοινωνίας μιας επιχείρησης και η τυπογραφία έπαιζε και θα συνεχίζει να παίζει, τρομερά σημαντικό ρόλο στο τι θέλουμε να επικοινωνήσουμε μέσω ενός κειμένου.
Οι επισκέπτες μιας ιστοσελίδας, αφού αναλώσουν ένα μικρό μέρος της επίσκεψης τους στα γραφικά του website, θα επικεντρωθούν αναπόφευκτα στο κείμενο για να μάθουν περισσότερα για εσάς και το εμπορικό σήμα σας. Γι ‘αυτό, όταν προσπαθείτε να μαζέψετε όλα τα κομμάτια της τακτικής σας όσον αφορά τον σχεδιασμό της ιστοσελίδας σας, είναι ιδιαίτερα σημαντικό να δώσετε προσοχή στην επιλογή και ενδεχόμενα στον σχεδιασμό γραμματοσειράς της. Αυτό σημαίνει να βεβαιώνεστε κάθε φορά ότι το τυπογραφικό σας κείμενο είναι ευανάγνωστο, καθαρό και επικοινωνεί τα σωστά μηνύματα στο κοινό σας.
Η επιλογή της σωστής γραμματοσειράς είναι το κλειδί για να έχετε έναν ουσιαστικό σχεδιασμό ιστοσελίδας, ανεξάρτητα από το αν ο ιστότοπός σας είναι ένα χαρτοφυλάκιο, ένα blog, ένα eshop ή ένας ιστότοπος εταιρειας. Για να σας βοηθήσουμε να καταλάβετε ποιος τύπος γραμματοσειράς ευθυγραμμίζεται καλύτερα με την ουσία της επιχείρησης σας, προσπαθήσαμε να κάνουμε τη διαδικασία αυτή απλούστερη για εσάς.
Τι πρέπει να λάβετε υπόψη όταν επιλέγετε την ιδανική γραμματοσειρά για τον ιστότοπό σας;
1. Ξεκινήστε από τα βασικά
Όταν πρόκειται για γραμματοσειρές ιστοσελίδων, υπάρχουν τόσα πράγματα για να εξετάσουμε, που μπορεί να σας μπερδέψει και να σας κουράσει. Αυτός είναι ο λόγος για τον οποίο είναι καλύτερο να ξεκινήσετε από τα πολύ βασικά πριν προχωρήσετε περαιτέρω.
- 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 είναι η απόσταση μεταξύ των ομάδων γραμμάτων.
- Αντίθεση:στην τυπογραφική σχεδίαση για website, η αντίθεση χρησιμοποιείται για να τονίσει διάφορα κομμάτια του κειμένου με πολλούς τρόπους, όλα με σκοπό να κάνουν τα σημαντικά μέρη να ξεχωρίζουν περισσότερο. Οι διαφορετικοί τύποι αντίθεσης περιλαμβάνουν το μέγεθος, το βάρος (κάνοντας ορισμένα τμήματα του κειμένου να εμφανίζονται με έντονα γράμματα), το χρώμα, τη φόρμα (π.χ. κεφαλαία ή πεζά γράμματα) και τη δομή (διαφορετικές μορφές αναμειγμένες με διαφορετικές γραμματοσειρές).
- Ευθυγράμμιση: ο προσδιορισμός του τρόπου με τον οποίο το κείμενο θα τοποθετηθεί στη σελίδα είναι επίσης ένα στοιχείο που μπορεί να συμβάλει σε μεγάλο βαθμό στη σχεδίαση της ιστοσελίδας σας. Μπορείτε να ευθυγραμμίσετε το κείμενο σας προς τα αριστερά, προς τα δεξιά ή προς το κέντρο.
Σε γενικές γραμμές, το κείμενο ευθυγραμμισμένο προς τα αριστερά είναι το πιο εύκολο να το διαβάσετε. Το πλήρως στοιχισμένο κείμενο θεωρείται πιο επίσημο, καθώς οριοθετείται ομοιόμορφα και στις δύο όψεις του περιθωρίου. Μπορείτε να ρυθμίσετε την ευθυγράμμισή σας ανάλογα με τον τύπο του ακροατηρίου σας, τις προσδοκίες του και αν πρέπει να σκεφτείτε τους περιορισμούς του χώρου ή όχι.
Όταν ευθυγραμμίζετε το κείμενό σας, πρέπει επίσης να δώσετε προσοχή στο μήκος γραμμής (απόσταση μεταξύ της αριστερής και της δεξιάς πλευράς του μπλοκ κειμένου). Ο πιο αποτελεσματικός τρόπος μέτρησης του μήκους γραμμής είναι κατά μέσον όρο χαρακτήρες ανά γραμμή. Το βέλτιστο μήκος γραμμής είναι από 45 έως 80 χαρακτήρες, συμπεριλαμβανομένων των διαστημάτων.
2. Οι τυπογραφικές επιλογές σας πρέπει να αντικατοπτρίζουν τον σκοπό του σχεδιασμού σας
Υπάρχουν τόσες πολλές διαφορετικές γραμματοσειρές στο internet για να διαλέξετε και οι επιλογές γραμματοσειράς σας είναι πρακτικά απεριόριστες. Ενώ αυτό είναι καλό από μόνο του, μπορεί εύκολα να υπερβάλλει τα πράγματα αν δεν έχετε τουλάχιστον κάποια ιδέα για το τι θέλετε (ή δεν θέλετε) για την ιστοσελίδα σας. Γι ‘αυτό είναι σημαντικό να εξετάσετε προσεκτικά το σκοπό του σχεδιασμού της ιστοσελίδας σας, καθώς και το είδος του κοινού που θέλετε να προσελκύσετε. Στη συνέχεια δείτε εάν το στυλ της γραμματοσειράς που σκέφτεστε, αντιστοιχεί στο γενικό μήνυμα που θέλετε να μεταφέρετε στους επισκέπτες σας.
Αφού υπολογίσετε αυτές τις βασικές αρχές, θα πρέπει να απαντήσετε σε μερικές επιπλέον ερωτήσεις:
- Ποια είναι η φύση του Branding σας;Για παράδειγμα, είναι σοβαρή ή χαλαρή;
- Εάν ο ιστότοπός σας περιστρέφεται γύρω από ένα project, ποιος είναι ο τύπος του project;Είναι βραχυπρόθεσμο ή μακροπρόθεσμο; Υπάρχει μια πιθανότητα ότι ένα μακροπρόθεσμο project (για παράδειγμα, ένα περιοδικό ή ένα ενημερωτικό δελτίο) θα μπορούσε να έχει περισσότερες απαιτήσεις από ένα βραχυπρόθεσμο και μπορεί να χρειαστεί να αλλάξει χαρακτήρες καθώς ο χρόνος εξελίσσεται. Είναι καλύτερο να επιλέξετε μια μεγάλη οικογένεια γραμματοσειρών με διαφορετικές παραλλαγές και βάρη για να έχετε διαφορετικές επιλογές στη διάθεσή σας, σε περίπτωση που τις χρειαστείτε. Εάν εργάζεστε σε ένα βραχυπρόθεσμο project (όπως μια εκκίνηση ενός προϊόντος ή μια καμπάνια μάρκετινγκ), τότε η χρήση σε απλές εκδόσεις γραμματοσειρών χωρίς πρόσθετο βάρος μπορεί να είναι ικανοποιητική.
- Θέλετε να στοχεύσετε στην πρακτικότητα και τη λειτουργικότητα και να πάτε για μία από τις ασφαλείς γραμματοσειρές ή θέλετε να ξεχωρίσετε από τα υπόλοιπα και να δοκιμάσετε μια πιο εξελιγμένη γραμματοσειρά;
- Ο ιστοχώρος σας θα είναι περισσότερο οπτικά προσανατολισμένος (γραφικά όπως φωτογραφίες, κινούμενα σχέδια και βίντεο) ή θα αποτελείται κυρίως από τα μεγάλα τμήματα του κειμένου που παρέχουν πολλές πληροφορίες σχετικά με την επιχείρηση σας ή τα προϊόντα σας;
3. Επιλέξτε τον αριθμό των γραμματοσειρών και ταξινομήστε τους ανάλογα με τη σημασία τους
Στη τυπογραφία, κάτι που στην αρχή φαίνεται ικανό μπορεί εύκολα να μετατραπεί σε καταστροφικό! Κατά την επιλογή του αριθμού των γραμματοσειρών για τον ιστότοπό σας, η πρότασή μας είναι να επιδιώξετε όχι περισσότερες από τρεις διαφορετικές γραμματοσειρές!
- Κύρια γραμματοσειρά: καθώς αυτή θα είναι η πιο εμφανής γραμματοσειρά στη σελίδα σας, η κύρια γραμματοσειρά σας θα πρέπει να είναι πιο συνώνυμη με την ταυτότητα της επιχείρησης σας . Οι πρωτεύουσες γραμματοσειρές χρησιμοποιούνται κυρίως για μεγαλύτερο κείμενο, όπως οι επικεφαλίδες.
- Δευτερεύουσα γραμματοσειρά: θα πρέπει να χρησιμοποιήσετε αυτήν τη γραμματοσειρά για το κυρίως μέρος της ιστοσελίδας σας.Αυτό σημαίνει ότι οποιοδήποτε άρθρο ή περιγραφή στη σελίδα σας θα είναι στη δευτερεύουσα γραμματοσειρά σας. Πάνω απ ‘όλα, η δευτερεύουσα γραμματοσειρά σας πρέπει να είναι καθαρή και εύκολη στην ανάγνωση. Οι τύποι γραμματοσειρών όπως η Futura, η Roboto ή η Verdana θα μπορούσαν να είναι μια επιλογή στερεών γραμματοσειρών για το σώμα σας.
- Τριτοβάθμια γραμματοσειρά: αν μας ρωτήσετε, αυτό είναι εντελώς προαιρετικό . Οι γραμματοσειρές Accent μπορούν να χρησιμοποιηθούν για συγκεκριμένα σημεία ιστότοπων, όπως μια παρότρυνση για δράση ή ένα μενού πλοήγησης. Θα πρέπει να είναι αρκετά ξεχωριστές ώστε να τραβήξουν γρήγορα το βλέμμα των επισκεπτών σας, αλλά έχετε κατά νου ότι η αντιστοίχιση δύο γραμματοσειρών είναι ήδη αρκετά δύσκολη, οπότε φαντάζεστε πόσο δύσκολο γίνεται το εγχείρημα όταν εισάγετε και Τρίτη γραμματοσειρά στην σχεδίαση σας.
4. Προσέξτε τους χρόνους φόρτωσης
Στην εποχή μας, κανείς δεν έχει χρόνο ούτε υπομονή για αργούς ιστοτόπους. Αυτός είναι ο λόγος για τον οποίο εάν μια γραμματοσειρά διαρκεί πολύ για να φορτώσει, ίσως δεν είναι η καλύτερη λύση για εσάς. Εδώ είναι μερικά πράγματα που μπορείτε να κάνετε για να αποτρέψετε μια γραμματοσειρά να επιβραδύνει την ταχύτητα του ιστοτόπου σας.
- Μείνετε σε περιορισμένο αριθμό γραμματοσειρών χρήσης. Έχουμε ήδη αναφέρει γιατί ο υπερβολικός αριθμός γραμματοσειρών μπορεί να μην είναι η καλύτερη ιδέα. Η ταχύτητα φόρτωσης είναι ένας άλλος λόγος για τον οποίο δεν πρέπει να ξεπεράσετε τις 2 γραμματοσειρές ανά ιστοσελίδα.
- Επιλέξτε μόνο τα στυλ που χρειάζεστε.Με αυτόν τον τρόπο, το μέγεθος των γραμματοσειρών σας θα είναι ελάχιστο και το μικρό μέγεθος θα συνεπάγεται και λιγότερο χρόνο φόρτωσης. Για παράδειγμα, κατά τη λήψη γραμματοσειράς, επιλέξτε μόνο normal και bold στυλ.
- Μην κατεβάσετε τις γλώσσες που δεν θα χρησιμοποιήσετε.Αν χρειάζεστε μόνο μία ή λίγες διαφορετικές γλώσσες για μια συγκεκριμένη γραμματοσειρά, βεβαιωθείτε ότι έχετε αποεπιλέξει αυτά που είστε βέβαιοι ότι δεν θα χρειαστείτε όταν την κατεβάζετε.
Τελικές σκέψεις
Παρόλο που το Internet είναι γεμάτο με πανέμορφα γραφικά στοιχεία σχεδιασμού όπως γραφικά κινουμένων σχεδίων, εικονογράφηση και φωτογραφία, η πλειοψηφία των ηλεκτρονικών πληροφοριών πρέπει ακόμα να βρίσκεται στο κείμενο.
Στην πραγματικότητα, η τυπογραφία αποτελεί περίπου το 90% του περιεχομένου της ιστοσελίδας . Έτσι, η σημασία του σχεδίου γραμματοσειράς δεν πρέπει να παραβλέπεται, καθώς μπορεί να έχει άμεση επίδραση στην εμπειρία του χρήστη και, ως εκ τούτου, μπορεί να είναι σύμμαχος ή εχθρός του ιστοτόπου σας. Για να βεβαιωθείτε ότι ο ιστότοπός σας είναι αρκετά ευανάγνωστος ελέγξτε πάντα τον τρόπο εμφάνισης των γραμματοσειρών σας σε διαφορετικές συσκευές και μεγέθη οθόνης .
Όταν αποφασίσετε τι σχέδιο γραμματοσειράς λειτουργεί καλύτερα για εσάς, προσπαθήστε να σκεφτείτε πρώτα τον σκοπό του σχεδιασμού σας. Μόλις προσδιορίσετε τη γενική κατεύθυνση στην οποία θέλετε να πάτε, επιλέξτε τον αριθμό των γραμματοσειρών που θέλετε να έχετε και, στη συνέχεια, ξεκινήστε την περιήγηση στο Web για πιθανούς συνδυασμούς γραμματοσειρών. Υπάρχουν πολλές διαθέσιμες επιλογές, οπότε είστε υποχρεωμένοι να βρείτε κάτι που λειτουργεί καλά για εσάς.