Γραμματοσειρά: Η αξία της σε μια ιστοσελίδα (2023)

Ένας οδηγός για να βρείτε την ιδανική γραμματοσειρά για την ιστοσελίδα σας

Κατά την κατασκευή ιστοσελίδων και eshop είναι πολλοί οι παράγοντες που πρέπει να ληφθούν υπόψη: Το λογότυπο, οι χρωματικές παλέτες, η αρχιτεκτονική της πληροφορίας, το UI/UX Design, τα κείμενα κ.λπ. Η γραμματοσειρά (ή αλλιώς web font) είναι ένα κομμάτι του σχεδιασμού που παίζει σημαντικό ρόλο στην εμπειρία του χρήστη και μπορεί να κάνει τη διαφορά, καθώς η ιστοσελίδα θα είναι πιο ευανάγνωστη. Ο επισκέπτης στην αρχή θα παρατηρήσει τα γραφικά και τις εικόνες μιας ιστοσελίδας, αλλά στη συνέχεια θα διαβάσει το text περιεχόμενο.

Ανάλογα με το ύφος της επιχείρησής σας πρέπει να επιλέξετε και τη γραμματοσειρά σας. Στην D3 Solutions δοκιμάζουμε πολλές από αυτές και σας παρουσιάζουμε τις καταλληλότερες για να κάνετε την τελική επιλογή.

 

Πώς να επιλέξετε τη σωστή γραμματοσειρά για την ιστοσελίδα σας

Σε μία έρευνα που έγινε το 2011, ψυχολόγοι από τα πανεπιστήμια Princeton και Indiana των ΗΠΑ ανακάλυψαν ότι ο αναγνώστης μπορεί να θυμάται καλύτερα τις πληροφορίες ενός κειμένου που χρησιμοποιεί μια απλή γραμματοσειρά σε σύγκριση με μια περίπλοκη και δυσανάγνωστη.

Στην Αγγλική γλώσσα υπάρχει τεράστια ποικιλία γραμματοσειρών, όμως στα Ελληνικά τα web fonts δεν είναι τόσα πολλά. Ευελπιστούμε πως με την πάροδο του χρόνου αυτό θα αλλάξει (ήδη αλλάζει) και θα έχουμε σύντομα περισσότερες γραμματοσειρές και στην ελληνική γλώσσα.

Στην αγορά, υπάρχουν web fonts που είναι εντελώς δωρεάν (όπως τα Google Fonts που θα δούμε παρακάτω) και άλλα που είναι επί πληρωμή. Η τιμή αυτών ξεκινάει από 10€ και μπορεί να φτάσει ακόμα και τα 100€. Για όσους αποζητούν την απόλυτη μοναδικότητα, υπάρχει η λύση για custom γραμματοσειρά, αλλά πρέπει να απευθυνθούν σε κάποιον εξειδικευμένο και επαγγελματία γραφίστα.

 

Πριν αγοράσετε ή χρησιμοποιήσετε οποιαδήποτε γραμματοσειρά πρέπει να βεβαιωθείτε πως υποστηρίζει την επιθυμητή σας γλώσσα.

 

D3 Solutions tip: Στα Ελληνικά προσέξτε τα γράμματα μ, π και ω. Αυτά δείχνουν να σπάνε πιο εύκολα σε ορισμένα fonts. Φτιάξτε την ίδια πρόταση με αυτά τα γράμματα και δοκιμάστε τα σε διαφορετικές γραμματοσειρές.

 

Γραμματοσειρά Serif vs Sans Serif

Οι δύο δημοφιλέστερες κατηγορίες γραμματοσειρών που χρησιμοποιούνται τα τελευταία χρόνια είναι οι Serif και οι Sans Serif. Οι περισσότερες εταιρείες στον κόσμο δουλεύουν με αυτές τα κείμενα τους και θα τις βρείτε σε χιλιάδες ιστοσελίδες στο διαδίκτυο.

Οι γραμματοσειρές Serif

Οι γραμματοσειρές Serif είναι μια web safe κατηγορία γραμματοσειράς. Έχουν έναν πιο κομψό και επίσημο τόνο και είναι ευανάγνωστες. Στην κατηγορία αυτή ανήκει για παράδειγμα η Alegreya. Το χαρακτηριστικό τους είναι τα «πατουσάκια» που έχουν και τα διακοσμητικά strokes στο τέλος των άκρων τους.

Οι γραμματοσειρές Sans Serif

Οι γραμματοσειρές Sans Serif θεωρείται πως στοχεύουν πιο νεανικό κοινό, διότι έχουν ένα καθαρό και μοντέρνο στιλ και είναι και αυτές web safe. Sans στα Γαλλικά σημαίνει «χωρίς» και την ονομασία την πήραν γιατί δεν έχουν τα strokes στις άκρες του όπως οι γραμματοσειρές τύπου Serif. Η Open Sans και η Roboto είναι ίσως τα δημοφιλέστερα fonts σε αυτή την κατηγορία.

 

Τα 5 καλύτερα Google Fonts για το website σας

Τα Google Fonts είναι μια βιβλιοθήκη open-source με εκατοντάδες γραμματοσειρές που μπορείτε να χρησιμοποιήσετε δωρεάν. Παράλληλα, σας παρέχονται πληροφορίες για κάθε font, οπως τον σχεδιαστή του, τη δημοφιλία και την πιο συνηθισμένη χρήση του.

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

1. Γραμματοσειρά Roboto

Η γραμματοσειρά Roboto είναι μια από τις πιο δημοφιλείς γραμματοσειρές Sans Serif για ιστοσελίδες. Δημιουργήθηκε από τον Christian Robertson και χρησιμοποιείται ευρέως επειδή είναι ευανάγνωστη και εξυπηρετεί καλές UI/UX πρακτικές, ενώ συνοδεύεται και από πολύ καλό documentation.

 

2. Γραμματοσειρά Open Sans

Η γραμματοσειρά Open Sans δημιουργήθηκε από τον Steve Matteson και είναι και αυτή μια Sans Serif γραμματοσειρά. Χαρακτηριστικό της είναι η μινιμαλιστική της εμφάνιση, η οποία λειτουργεί εξαιρετικά στις περιπτώσεις όπου τα γράμματα έχουν μικρό μέγεθος, όπως είναι οι παράγραφοι και τα κείμενα που εμφανίζονται σε κινητές συσκευές. Αυτός είναι και ο λόγος που είναι πολύ δημοφιλής.

 

3. Γραμματοσειρά Poppins

Η γραμματοσειρά Poppins ανήκει στην κατηγορία των sans serif fonts και χαρακτηρίζεται για τη γεωμετρικότητά της, που την κάνει ιδανική για headings και σχεδιασμό λογοτύπων. Δημιουργήθηκε από τους Jonny Pinhorn και Ninad Kale και είναι διαθέσιμη σε διάφορες παραλλαγές. Η Poppins είναι δημοφιλής για χρήση σε ιστότοπους, εφαρμογές, αλλά και έντυπο υλικό και γράφει ωραία ακόμη και σε πολύχρωμο φόντο.

 

4. Γραμματοσειρά Montserrat

Η γραμματοσειρά Montserrat είναι και αυτή μια sans serif font με πλατιά και ευανάγνωστα γράμματα και σύμβολα. Είναι εμπνευσμένη από τις παλιές πινακίδες στο παραδοσιακό συνοικισμό Montserrat του Μπουένος Άιρες. Δημιουργήθηκε από την Julieta Ulanovsky και είναι ευρέως διαδεδομένη, καθώς εξυπηρετεί 36 διαφορετικά στιλ. Είναι και αυτή δωρεάν και μπορεί να χρησιμοποιηθεί σε ιστότοπους, mobile εφαρμογές και έντυπο υλικό.

 

5. Γραμματοσειρά Alegreya

Τη γραμματοσειρά Alegreya μπορείτε να τη βρείτε σε δύο διαφορετικές εκδοχές:

1. Την Alegreya, που είναι μια serif γραμματοσειρά
2. Την Alegreya Sans, που είναι μια sans serif γραμματοσειρά

Και οι δύο έχουν δημιουργηθεί από τον Juan Pablo del Petal το 2010 και είναι μια πολύ όμορφη και κομψή γραμματοσειρά, που κατά βάση δημιουργήθηκε για έντυπο υλικό. Ωστόσο, η sans εκδοχή της την κάνει ιδανική και για χρήση στο διαδίκτυο, σε ιστοσελίδες και εφαρμογες.

 

 

Συμβουλές για τη γραμματοσειρά της ιστοσελίδας σας από την D3 Solutions

Τώρα που έχετε μια ξεκάθαρη εικόνα για τις γραμματοσειρές, θα κλείσουμε αυτό το άρθρο με κάποιες συμβουλές που πρέπει να έχετε κατά νου όταν αποφασίσετε την κατασκευή ή την ανακατασκευή του ιστότοπού σας:

• Ο αριθμός web fonts που χρησιμοποιεί ένα site δεν πρέπει να είναι πάνω από δύο, καθώς οι πολλές γραμματοσειρές επηρεάζουν την ταχύτητα φόρτωσης, που είναι ένα από τα πιο βασικά ranking factors.
• Η κύρια γραμματοσειρά μπορεί να είναι πιο ιδιαίτερη για λόγους branding, ωστόσο η δευτερεύουσα, που θα εφαρμοστεί στο μεγαλύτερο μέρος του text περιεχομένου, πρέπει να είναι πεντακάθαρη και εύκολη στην ανάγνωση, για λόγους προσβασιμότητας και καλού UX.
• Φροντίστε να μην έχουν μεγάλη διαφορά η κύρια με τη δευτερεύουσα γραμματοσειρά και να είναι και οι δύο SEO friendly (ευανάγνωστες και καθαρές).

Επιπλέον, πρέπει να έχουν καλό spacing μεταξύ τους οι σειρές και οι παράγραφοι και η αντίθεση στα χρώματα των links-in-text να είναι τουλάχιστον 3:1.

 

H Google προτείνει το μέγεθος της γραμματοσειράς στο σώμα του κειμένου να είναι ιδανικά 16px.

 

Ελπίζουμε να σας βοηθήσαμε να επιλέξετε γραμματοσειρά για την ιστοσελίδα σας και θα χαρούμε να συζητήσουμε τις ανάγκες σας σε web design & development. Στην D3 Solutions αναλαμβάνουμε την κατασκευή του νέου σας ιστότοπου ή την ανακατασκευή του παλιού website σας, καθώς και τη βελτιστοποίηση της ταχύτητάς του, που είναι ένα από τους βασικότερους παράγοντες επιτυχίας ενός website. Επιπλέον, κατασκευάζουμε το eshop σας από την αρχή ή το προσθέτουμε στο ήδη υπάρχον website σας με plugin (αν υποστηρίζεται).

 

ΕΠΙΚΟΙΝΩΝΗΣΤΕ ΜΑΖΙ ΜΑΣ