Line Height στην ανάπτυξη εφαρμογών — τι είναι και επίδραση στην τυπογραφία

Τι είναι το Line Height στην τυπογραφία

Line Height (ύψος γραμμής) — είναι μια θεμελιώδης τυπογραφική παράμετρος που καθορίζει την απόσταση μεταξύ των βασικών γραμμών (baseline) διαδοχικών γραμμών. Στην ανάπτυξη ιστού και κινητών, το line height ορίζει τον κατακόρυφο ρυθμό του κειμένου: κάθε γραμμή καταλαμβάνει ένα συγκεκριμένο ύψος και αυτή η παράμετρος αθροίζεται κατά τη μετάβαση στην επόμενη γραμμή. Το line height περιλαμβάνει όχι μόνο το πραγματικό ύψος των γλύφων (ascender + descender), αλλά και επιπλέον χώρο που βελτιώνει την αναγνωσιμότητα.

Μαθηματικά, το line height εκφράζεται ως: line-height = font-size × multiplier. Αν font-size = 16 px και multiplier = 1.5, τότε line-height = 24 px. Το διάστιχο (leading) σε αυτή την περίπτωση είναι 24 - (ascender + descender) pixel. Τα περισσότερα συστήματα σχεδιασμού και πλατφόρμες χρησιμοποιούν τον πολλαπλασιαστή, καθώς κλιμακώνεται αυτόματα όταν αλλάζει το μέγεθος γραμματοσειράς.

Σύμφωνα με το Material Design Type Scale (2025), το line height — μία από τις τρεις βασικές παραμέτρους του τυπογραφικού συστήματος μιας εφαρμογής μαζί με το font-size και το font-weight. Οι συνεπείς τιμές line height για όλα τα επίπεδα της τυπογραφικής ιεραρχίας δημιουργούν έναν κατακόρυφο ρυθμό που κάνει τη διεπαφή οπτικά συνεκτική. Μια απόκλιση line-height κατά 10% από τη βέλτιστη τιμή είναι ήδη ορατή με γυμνό μάτι και μειώνει την αντιλαμβανόμενη ποιότητα της διεπαφής.

Line Height vs Leading: ποια είναι η διαφορά

Leading (προφέρεται „lending") — είναι ένας ιστορικός τυπογραφικός όρος που υποδηλώνει την απόσταση μεταξύ γραμμών από baseline σε baseline μείον το ύψος των γλύφων. Στη μεταλλική στοιχειοθεσία, το leading — είναι μολύβδινες λωρίδες που τοποθετούνταν μεταξύ των γραμμών για να αυξήσουν την απόσταση. Το line height — είναι μια πιο σύγχρονη έννοια που περιλαμβάνει τόσο το ύψος γραμματοσειράς όσο και το leading.

Στην πράξη, η διαφορά είναι σημαντική κατά τη μεταφορά σχεδίων από Figma ή Sketch σε κώδικα. Τα εργαλεία σχεδιασμού συνήθως αναφέρουν line-height (ή απλά ύψος γραμμής). Στις κινητές πλατφόρμες, το API μπορεί να ονομάζεται διαφορετικά: το iOS χρησιμοποιεί τον όρο lineSpacing (πιο κοντά στο leading) μαζί με minimumLineHeight/maximumLineHeight, το Android — LineHeightStyle με alignment και trim, το Flutter — height (unitless multiplier).

// iOS: διαφορά μεταξύ line height και line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Άμεση ρύθμιση line height
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Διάστιχο (επιπλέον διάστημα μεταξύ γραμμών)
paragraphStyle.lineSpacing = 4.0  // προστέθηκε στο φυσικό line height της γραμματοσειράς

Η βασική διαφορά: αν ορίσετε minimumLineHeight, όλες οι γραμμές θα έχουν το ίδιο ύψος, το οποίο είναι καλό για ένα ρυθμικό πλέγμα. Αν ορίσετε μόνο lineSpacing, το ύψος γραμμής θα αλλάζει ανάλογα με το μέγεθος γραμματοσειράς — μια πιο ευέλικτη αλλά λιγότερο προβλέψιμη προσέγγιση. Για συστήματα σχεδιασμού, συνιστάται η χρήση minimumLineHeight, καθώς δίνει αυστηρά ελεγχόμενο αποτέλεσμα.

Σύμφωνα με το IBM Carbon Design System — Typography Guidelines (2025), η διαφορά μεταξύ line height και leading είναι ιδιαίτερα αισθητή όταν χρησιμοποιούνται προσαρμοσμένες γραμματοσειρές. Αν η γραμματοσειρά έχει μεγάλο ενσωματωμένο leading (π.χ. SF Pro), το lineSpacing = 0 δίνει αποδεκτό αποτέλεσμα. Αν το leading της γραμματοσειράς είναι μικρό (ορισμένες ανοιχτού κώδικα γραμματοσειρές), χωρίς επιπλέον lineSpacing, οι γραμμές θα φαίνονται κολλημένες.

Βέλτιστο Line Height για κινητές διεπαφές

Το βέλτιστο line height εξαρτάται από διάφορους παράγοντες: μέγεθος γραμματοσειράς, μήκος γραμμής, γραμματοσειρά και κοινό-στόχο. Για το κύριο κείμενο σε κινητές συσκευές (μήκος γραμμής 35–55 χαρακτήρες), το συνιστώμενο εύρος είναι 1.4–1.6 του font-size. Αυτή η τιμή παρέχει επαρκές κατακόρυφο διάστημα για άνετη μετακίνηση του βλέμματος μεταξύ γραμμών χωρίς απώλεια οπτικής συνοχής του κειμένου.

Για επικεφαλίδες, όπου το μήκος γραμμής είναι συνήθως μικρότερο (2–6 λέξεις), το line height μπορεί να είναι μικρότερο — 1.1–1.25 του font-size. Οι επικεφαλίδες δεν απαιτούν μεγάλο διάστιχο, καθώς η κύρια λειτουργία τους είναι η προσέλκυση προσοχής, όχι η μακρά ανάγνωση. Επιπλέον, τα μεγάλα μεγέθη επικεφαλίδων (24–32 pt) με line-height 1.5 θα δημιουργούσαν υπερβολικά κενά που διαταράσσουν τον κατακόρυφο ρυθμό της σελίδας.

• Κύριο κείμενο (16–18 pt) — line-height 1.4–1.6. Ελάχιστο για άνετη ανάγνωση σε κινητές συσκευές, όπου το μήκος γραμμής περιορίζεται από το πλάτος οθόνης.
• Μικρό κείμενο (11–13 pt) — line-height 1.3–1.5. Το μικρό μέγεθος απαιτεί μικρότερο πολλαπλασιαστή, καθώς οι γραμμές είναι πιο κοντές και το μάτι βρίσκει γρηγορότερα την επόμενη γραμμή.
• Μεγάλο κείμενο (20–32 pt) — line-height 1.1–1.25. Όσο μεγαλύτερη η γραμματοσειρά, τόσο λιγότερο σχετικό διάστιχο απαιτείται για αναγνωσιμότητα.
• Κείμενο Monospace — line-height 1.3–1.5. Οι γραμματοσειρές monospace (για κώδικα) έχουν συνήθως μεγαλύτερες μετρήσεις, επομένως το line-height μπορεί να μειωθεί στο 1.3.

// Flutter: line height στο σύστημα σχεδιασμού
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

Σύμφωνα με το W3C — Accessibility Requirements for Typography (2025), το line height κάτω από 1.2 για το κύριο κείμενο θεωρείται εμπόδιο προσβασιμότητας: οι χρήστες με δυσλεξία και προβλήματα όρασης αντιμετωπίζουν σημαντικές δυσκολίες κατά την ανάγνωση πυκνού κειμένου. Το WCAG 2.2 συνιστά line-height τουλάχιστον 1.5 για το κύριο περιεχόμενο, ωστόσο σε κινητές διεπαφές αυτή η τιμή μπορεί να μειωθεί στο 1.4 λόγω του περιορισμένου πλάτους οθόνης.

Line Height στο iOS: UIKit και SwiftUI

Στο iOS, το line height διαχειρίζεται μέσω του NSMutableParagraphStyle ή των ενσωματωμένων τροποποιητών SwiftUI. Στο UIKit, τρεις βασικές ιδιότητες είναι διαθέσιμες: minimumLineHeight και maximumLineHeight (καθορίζουν το ακριβές ύψος γραμμής) και lineSpacing (επιπλέον διάστημα μεταξύ γραμμών). Κατά τη χρήση του TextKit (NSTextStorage, NSLayoutManager), το line height λαμβάνεται υπόψη στο lineFragmentRect και επηρεάζει τον υπολογισμό της γεωμετρίας του μπλοκ κειμένου.

// iOS UIKit: ρύθμιση line height μέσω NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Σημαντικό: minimum + maximum = σταθερό line-height

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

Στο SwiftUI, το line height ορίζεται μέσω του τροποποιητή .lineSpacing(value), ο οποίος προσθέτει επιπλέον χώρο μεταξύ γραμμών, ή μέσω του .font με ένα προσαρμοσμένο TextStyle που περιλαμβάνει line height. Το SwiftUI υποστηρίζει επίσης δυναμικούς τύπους: το καθορισμένο line height κλιμακώνεται όταν ο χρήστης αλλάζει το μέγεθος γραμματοσειράς στις ρυθμίσεις.

// SwiftUI: line height μέσω lineSpacing
Text("Κείμενο με προσαρμοσμένο διάστιχο
δεύτερη γραμμή
τρίτη γραμμή")
    .font(.body)
    .lineSpacing(4)     // επιπλέον διάστημα μεταξύ γραμμών

// SwiftUI: σταθερό line height μέσω προσαρμοσμένου στυλ
Text("Επικεφαλίδα με line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // αντιστάθμιση για ακριβές line-height

Σύμφωνα με το Apple HIG — Typography Implementation (2025), κατά τη χρήση σταθερού line-height μέσω minimumLineHeight, πρέπει να βεβαιωθείτε ότι η τιμή δεν είναι μικρότερη από το φυσικό line-height της γραμματοσειράς. Εάν το minimumLineHeight είναι μικρότερο από ascender + descender, το UIKit αγνοεί τη ρύθμιση και χρησιμοποιεί το φυσικό ύψος. Αυτό μπορεί να οδηγήσει σε απροσδόκητα αποτελέσματα κατά την αλλαγή γραμματοσειράς ή μεγέθους.

Line Height στο Android: σύστημα View και Compose

Στην ανάπτυξη Android, το line height διαχειρίζεται διαφορετικά στο κλασικό σύστημα View και στο Jetpack Compose. Στο σύστημα View, χρησιμοποιείται η μέθοδος TextView.setLineSpacing(extra, multiplier). Η παράμετρος extra — επιπλέον χώρος σε pixel, multiplier — πολλαπλασιαστής του φυσικού ύψους γραμμής. Τελικό ύψος = φυσικό line-height × multiplier + extra.

// Σύστημα View Android: διάστιχο
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Χρήση σε XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

Στο Jetpack Compose, για τη διαχείριση του line height χρησιμοποιείται η κλάση LineHeightStyle, η οποία επιτρέπει τον ορισμό της στοίχισης (Alignment) και της περικοπής (Trim) του διαστήματος μεταξύ γραμμών. Αυτό παρέχει πιο λεπτό έλεγχο από έναν απλό πολλαπλασιαστή. Για παράδειγμα, μπορεί να καθοριστεί ότι το επιπλέον διάστημα μεταξύ γραμμών πρέπει να κατανέμεται ισόποσα πάνω και κάτω από τη γραμμή (align.Center) ή να προστίθεται εξ ολοκλήρου από πάνω (align.Top).

// Jetpack Compose: παράδειγμα LineHeightStyle
Text(
    text = "Δείγμα κειμένου
με προσαρμοσμένο LineHeightStyle
στο Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Απλός πολλαπλασιαστής μέσω TextStyle
Text(
    text = "Πολλαπλασιαστής line height",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Σύμφωνα με το Android Developers — Compose Text Styling (2025), το LineHeightStyle.Trim.None (προεπιλογή) διατηρεί την πρώτη και την τελευταία γραμμή με κενά, που μπορεί να διαταράξει τη στοίχιση σε Card ή Column. Συνιστάται η χρήση Trim.Both για δοχεία σταθερού ύψους και Trim.LastLine για μπλοκ κειμένου όπου η κάτω άκρη είναι σημαντική.

Line Height στο Flutter: TextStyle και StrutStyle

Στο Flutter, το line height ορίζεται μέσω της ιδιότητας height της κλάσης TextStyle. Αυτός είναι ένας unitless πολλαπλασιαστής του font-size: height: 1.5 με fontSize: 16 δίνει line-height 24.0. Η τιμή height πολλαπλασιάζεται σιωπηρά με το fontSize, επομένως όταν αλλάζει το μέγεθος, το line-height κλιμακώνεται αναλογικά. Το Flutter προσφέρει επίσης το StrutStyle — έναν μηχανισμό για εξαναγκασμό σταθερού line-height ανεξάρτητα από τους πραγματικούς γλύφους σε μια γραμμή.

// Flutter: line height μέσω TextStyle.height
Text(
    'Κείμενο με line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle για σταθερό line height
Text(
    'Κείμενο με StrutStyle
σταθερό line height
ανεξάρτητο από γλύφους',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle είναι ιδιαίτερα χρήσιμο για λίστες με διαφορετικά μεγέθη (π.χ. συνομιλίες, ροές ειδήσεων), όπου όλες οι γραμμές πρέπει να έχουν το ίδιο ύψος ανεξάρτητα από το περιεχόμενο. Χωρίς StrutStyle, μια γραμμή που περιέχει μόνο γράμματα χωρίς descender θα έχει μικρότερο πραγματικό ύψος από μια γραμμή με τα γράμματα „π" και „υ", οδηγώντας σε τρέμουλο του κειμένου κατά την κύλιση.

Σύμφωνα με το Flutter Documentation — Text Layout (2025), το StrutStyle με forceStrutHeight: true εγγυάται ότι το ύψος κάθε γραμμής θα είναι ίσο με την καθορισμένη τιμή, ενώ οι πραγματικοί γλύφοι θα στοιχίζονται στη baseline εντός αυτού του χώρου. Αυτή είναι η τυπική προσέγγιση για λίστες κειμένου όπου ο κατακόρυφος ρυθμός είναι κρίσιμος για την οπτική αντίληψη.

Προσαρμοστικό Line Height για διαφορετικές οθόνες

Οι κινητές εφαρμογές λειτουργούν σε συσκευές με διαφορετικά μεγέθη οθόνης, πυκνότητες pixel και ρυθμίσεις προσβασιμότητας. Line height πρέπει να προσαρμόζεται σε αυτές τις αλλαγές, διατηρώντας την αναγνωσιμότητα. Ο βασικός κανόνας: χρησιμοποιήστε πολλαπλασιαστές χωρίς διάσταση (unitless), όχι σταθερές τιμές σε px ή pt, ώστε το line-height να κλιμακώνεται μαζί με το font-size.

Κατά τη χρήση Dynamic Type (iOS) ή fontScale (Android), το μέγεθος γραμματοσειράς μπορεί να αυξηθεί κατά 20–50% σε σχέση με το βασικό. Το line-height που ορίζεται μέσω πολλαπλασιαστή κλιμακώνεται αυτόματα. Εάν το line-height ορίζεται ως σταθερή τιμή (π.χ., 24 px σε font-size 16 pt), κατά την αύξηση της γραμματοσειράς σε 22 pt, το σχετικό line-height θα μειωθεί στο 1.09 — που είναι ήδη κάτω από το όριο αναγνωσιμότητας.

// iOS: προσαρμοστικό line height με Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Υπολογισμός line-height ως πολλαπλασιαστής από δυναμική γραμματοσειρά
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

Σύμφωνα με το Material Design — Responsive Typography (2025), για tablet και μεγάλες οθόνες (πλάτος άνω των 600 dp), το line-height του κύριου κειμένου συνιστάται να αυξάνεται κατά 0.1–0.2 σε σχέση με τα τηλέφωνα, καθώς το μήκος γραμμής γίνεται μεγαλύτερο. Για συσκευές foldable, όπου το πλάτος οθόνης αλλάζει δυναμικά, το line-height πρέπει να υπολογίζεται εκ νέου σε κάθε αλλαγή διαμόρφωσης.