Typeset

Πότε να τη χρησιμοποιήσετε

Χρησιμοποιήστε το /impeccable typeset όταν το κείμενο σε μια σελίδα μοιάζει με προεπιλεγμένη τυπογραφία αντί για σχεδιασμένη τυπογραφία. Θολή ιεραρχία, τρία μεγέθη που φαίνονται ίδια, κείμενο σώματος στα 14px, μια γραμματοσειρά display που είναι στην πραγματικότητα απλώς Inter bold, τίτλοι χωρίς προσοχή στο kerning.

Συνήθεις αφορμές: «η ιεραρχία φαίνεται επίπεδη», «η αναγνωσιμότητα δεν είναι σωστή», «οι γραμματοσειρές φαίνονται γενικές».

Πώς λειτουργεί

Η δεξιότητα αξιολογεί την τυπογραφία σε πέντε διαστάσεις:

1. Επιλογές γραμματοσειρών: χρησιμοποιείτε αόρατες προεπιλογές (Inter, Roboto, Arial, Open Sans), η γραμματοσειρά ταιριάζει με το brand, υπάρχουν περισσότερες από 2 έως 3 οικογένειες.
2. Ιεραρχία: τίτλος, σώμα и λεζάντα είναι ξεκάθαρα διαφορετικά με μια ματιά, η αντίθεση μεγέθους είναι τουλάχιστον 1.25x μεταξύ βημάτων, οι αντιθέσεις βάρους είναι ευανάγνωστες.
3. Μεγέθη и κλίμακα: υπάρχει μια συνεκτική κλίμακα τύπου, το κείμενο σώματος καλύπτει το ελάχιστο των 16px, η κλίμακα είναι σταθερό-rem για app UI ή fluid-clamp για σελίδες marketing.
4. Αναγνωσιμότητα: μήκος γραμμής 45 έως 75 χαρακτήρες, line-height ρυθμισμένο για γραμματοσειρά и πλαίσιο, αντίθεση.
5. Συνοχή: το ίδιο στοιχείο χρησιμοποιεί την ίδια μεταχείριση παντού, δεν υπάρχουν μοναδικές παρακάμψεις font-size.

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

Δοκιμάστε το

/impeccable typeset the article layout

Αναμενόμενο diff:

• Η γραμματοσειρά display αντικαταστάθηκε από Inter 700 σε μια πραγματική γραμματοσειρά display
• Η κλίμακα τύπου ανακατασκευάστηκε: 3rem / 2rem / 1.25rem / 1rem / 0.875rem, αναλογία 1.333
• Το κείμενο σώματος αυξήθηκε από 14px σε 16px
• Το μήκος γραμμής περιορίστηκε σε 68ch στη στήλη άρθρου
• Line-height 1.6 για σώμα, 1.1 για display
• Αφαιρέθηκαν τέσσερις μοναδικές τιμές font-size διάσπαρτες στα στυλ components

Παγίδες

• Ζήτηση νέας γραμματοσειράς χωρίς πλαίσιο. Το Typeset θα επιλέξει βάσει της φωνής brand στο PRODUCT.md. Αν δεν έχετε εκτελέσει /impeccable teach, η πρόταση θα είναι γενική.
• Χρήση του typeset όταν το πρόβλημα είναι διάταξη. Αν οι παράγραφοι είναι εντάξει αλλά η σελίδα φαίνεται στριμωγμένη, θέλετε /impeccable layout.
• Αναμονή fluid clamp κλιμάκων σε app UI. Το Typeset χρησιμοποιεί σταθερές κλίμακες rem για εφαρμογές. Η fluid τυπογραφία είναι για marketing и σελίδες περιεχομένου όπου το μήκος γραμμής ποικίλλει δραματικά.