Ερώτηση σχετικά με line-height και font-size

[rafinos]

Καλησπέρα παιδιά!

 

Υπάρχει τρόπος, αν γνωρίζουμε το line-height ενός div να δώσουμε το μεγαλύτερο δυνατό μέγεθος στο font-size;

 

Π.χ. αν το line-height είναι 20px τότε ποιο μπορεί να είναι το μεγαλύτερο font-size;

 

Από όσο γνωρίζω το line-height δημιουργεί περιθώριο πάνω και κάτω στη γραμμή ίσο (στο σύνολο του πάνω και του κάτω) με τη διαφορά από το font-size. Ωστόσο, ποιο είναι το μεγαλύτερο επιτρεπτό font-size;

[Predatorkill]

Τι προσπαθεις να κανεις; Να αλλαζεις μεγεθος γραμματοσειρας αναλογα την αναλυση του χρηστη, responsive δλδ;

[rafinos]

Τι προσπαθεις να κανεις; Να αλλαζεις μεγεθος γραμματοσειρας αναλογα την αναλυση του χρηστη, responsive δλδ;

 

Ναι αλλά όχι με άμεσο resize του browser. Επαναφόρτωση της σελίδας. 

 

Αυτό που κάνω είναι το εξής, απλά δεν είμαι σίγουρος αν είναι τελείως σωστό. 

//Η κάθε γραμμή θέλω να είναι ίση με το 1/4 του height από το div
var question_height = Math.floor($('#question').height()/4);
$('#question').css({
   'line-height': question_height + "px",
   'font-size': (question_height - 2) + "px" //με λίγα λόγια να αφήνει ένα pixel πάνω και ένα κάτω
});

[Predatorkill]

Τσεκαρε αυτο:

https://css-tricks.com/viewport-sized-typography/

 

Κι αυτο:

http://simplefocus.com/flowtype/

 

Edit: δες και αυτο:

http://fittextjs.com

Επεξ/σία 29 Ιανουαρίου 2017 από Predatorkill

[dominotrix]

Απλα δηλωσε το font-size σε vw αντι για px  (vw = visual width) Ετσι γλιτωνεις @media queries και ειναι responsive με την σμικρυνση της οθονης αναλογικα και οχι με breakpoints.

 

font-size:2.3vw;

[XPHSTOS_]

Ας τα πάρουμε τα πράγματα από το τέλος προς την αρχή.

1) Δεν υπάρχει μέγιστο επιτρεπτό όριο γραμματοσειράς.
Ότι προστάζει το δημιουργικό. Υπάρχουν όμως best practices για τίτλους και κείμενα.

2) To line-height είναι αυτό που λέμε baseline στην γραφιστική.
Το line-height ιδανικά θα πρέπει να χρησιμοποιείται για να διατηρείται ο κάθετος ρυθμός (vertical-rhythm) σε μια σύνθεση.
πχ.
Ορίζεις ένα default font size για το σώμα του κειμένου.
Base font -> 16px
Για να βρεις το baseline σου (line-height) επιλέγεις μια αναλογία όπως 1.5 ή 1.618 (Golden Ration)
Οπότε έχουμε base font * αναλογία (scalar) = line-height -> 16px * 1.5 = 24px
Οπότε για να διατηρηθεί ο ρυθμός οι τα ύψη των γραμμών των κειμένων, των τίτλων των εικόνων κλπ.
Θα πρέπει να είναι πολλαπλάσια του 24.
Ένα πρόχειρο παράδειγμα είναι αυτό:  Site: http://codepen.io/xphstos/pen/MJrYvG
Google it για περισσότερα info. Είναι απίστευτο πόσα site στις μέρες παραβλέπουν το vertical rhythm εντελώς.
Είναι απίστευτα δύσκολο να το διατηρήσεις αλλά προσφέρει μεγαλύτερο readability κάτι που είναι σημαντικό για τον τελικό χρήστη.

3) Τέλος, δεν υπάρχει μέγιστο μέγεθος κειμένου με line-height 20px.
Θα μπορούσες να βάλεις ότι θέλεις εσύ.



 

[rafinos]

Σας ευχαριστώ όλους παιδιά. 

 

Ξέχασα να αναφέρω πως το συγκεκριμένο είναι html app για android (ανανεώνω σιγά σιγά το design στο Movie QUIZ της υπογραφής) και όχι website. Τελικά η λύση που χρησιμοποίησα ήταν πολύ ευκολότερη καθώς είδα ότι με έπαιρνε να δίνω ένα πιο στάνταρ μέγεθος στο κείμενο χωρίς να ορίζω height στο div (αρχικά είχα στάνταρ ύψος στο div) που είχα το θέμα (ανάλογα με το μέγεθος της οθόνης βγαίνει) και το κάνω με παρόμοιο τρόπο όπως και παραπάνω. 

 

Απλά στον παραπάνω κώδικα πόσο λάθος είναι που το line-height δίνει μόνο ένα pixel πάνω και ένα pixel κάτω περιθώριο στο κείμενο;

 

Για να δείτε για τι πράγμα δείτε την εικόνα. 

 

 

 

[XPHSTOS_]

Αν μιλάμε για τον τίτλο. Είναι λάθος.
Ο τίτλος εμφανίζεται κολλημένος στο box κάτι που χαλάει την ισορροποία της σύνθεσης.
Επειδή δεν γνωρίζω, δυνατότητα για margins & paddings δεν υπάρχει?
Γιατί αποκλειστικά με line-height?

[rafinos]

Δεν κατάλαβα τι ακριβώς εννοείς. Για ποιο σημείο μιλας;

[XPHSTOS_]

"Σε ποια ταινία κινουμένων σχεδίων..."

Εκεί αναφέρομαι.
Εσύ σε ποιο κομμάτι αναφέρεσαι όταν λες ότι αφήνει 1px πάνω κάτω?

[rafinos]

Από το "Ερώτηση 1" (και αυτό μέσα) και κάτω.

 

Το πρόβλημα το είχα στις επικεφαλίδες. Η ερώτηση θέλω να χωράει μέχρι τέσσερις σειρές κείμενο και αρκετά εμφανές για αυτό το έκανα έτσι. Θεωρείτε πως είναι τόσο πρόβλημα το 1px;

[XPHSTOS_]

Καλά κατάλαβα λοιπόν.

Δεν μπορείς να χρησιμοποιήσεις paddings για να έχεις μια σταθερή απόσταση πάνω και κάτω?
Γιατί να πρέπει να βάλεις line-height.
Το line height δεν χρησιμοποιείται για αυτό τον σκοπό.
Αν θέλεις να χωράς μέχρι 4 γραμμές κειμένου.
Μέτρα πόσοι χαρακτήρες είναι και βάλε τους καρφωτά για να κάνεις δοκιμές.

Από κει και πέρα προσπάθησε να το ξεκολλήσεις πάνω και κάτω με paddings/margins για να υπάρχει μια ομοιογένεια.

Κάτι τέτοιο δηλαδή θέλεις: Site: http://codepen.io/xphstos/pen/mRpjej

[rafinos]

Τις 4ις γραμμές που λες καρφωτά όμως, αν ένα κινητό έχει ανάλυση 640*480 και ένα άλλο έχει 1920*1080 έχουν τεράστιες διαφορές και στο πως φαίνεται, αλλά μπορεί στην πρώτη περίπτωση οι 4ις γραμμές να είναι δύο γιατί καλύπτουν μεγαλύτερο εύρος από pixels. 

 

Εγώ παίζω χωρίς καθόλου overflow και με ποσοστά.

 

Εσύ παίζεις με δυναμικό height στο div που εμφανίζεται η ερώτηση. Εγώ το έχω στάνταρ και με βάση αυτό θέλω 4ις γραμμές. 

[XPHSTOS_]

Το πρόβλημα σου δεν είναι οι μεγάλες αναλύσεις αλλά οι μικρές.

Μέτρα τους χαρακτήρες που χρειάζεσαι για τις 4 γραμμές στις μικρές αναλύσεις.
Φέρ'το όμορφα με paddings ώστε να χωράνε οι 4 γραμμές και οι απαντήσεις και ας φαίνεται σαν 2 γραμμές στις μεγαλύτερες αναλύσεις.
Από την στιγμή που παίζεις με πολλές αναλύσεις απλά κατα προσέγγιση θα το πας.

Αν πάλι θέλεις να έχεις standard height ντε και καλά...
1) Μπορείς να δώσεις display table στο parent element και display table-cell & vertical-align middle στο child element που περιέχει το κείμενο.  Παράδειγμα:  Site: http://codepen.io/xphstos/pen/mRpjej
 

2) Μπορείς να δώσεις στο child element position relative, top 50% & transform translateY(-50%) και να έρθουν στη μέση...

Hack-ιές για vertical alignment.

3) Αν δεν μας ενδιαφέρουν και πολύ οι παλιές συσκευές και οι windows συσκευές 
Τότε μπορείς (και καλό θα ήταν) να χρησιμοποιήσεις το flexboxes
Παράδειγμα:  Site: http://codepen.io/xphstos/pen/qRpQrV


Πάντως ότι και αν επιλέξεις... μην κολλάς τους τίτλους με τα container τους.
Δίνε τους λίγο αέρα, έστω 10px πάνω κάτω.
Αλλιώς "πνίγονται"
 

[rafinos]

Το πρόβλημα σου δεν είναι οι μεγάλες αναλύσεις αλλά οι μικρές.

 

Μέτρα τους χαρακτήρες που χρειάζεσαι για τις 4 γραμμές στις μικρές αναλύσεις.

Φέρ'το όμορφα με paddings ώστε να χωράνε οι 4 γραμμές και οι απαντήσεις και ας φαίνεται σαν 2 γραμμές στις μεγαλύτερες αναλύσεις.

Από την στιγμή που παίζεις με πολλές αναλύσεις απλά κατα προσέγγιση θα το πας.

 

Αν πάλι θέλεις να έχεις standard height ντε και καλά...

1) Μπορείς να δώσεις display table στο parent element και display table-cell & vertical-align middle στο child element που περιέχει το κείμενο.  Παράδειγμα:  Site: http://codepen.io/xphstos/pen/mRpjej

 

2) Μπορείς να δώσεις στο child element position relative, top 50% & transform translateY(-50%) και να έρθουν στη μέση...

 

Hack-ιές για vertical alignment.

 

3) Αν δεν μας ενδιαφέρουν και πολύ οι παλιές συσκευές και οι windows συσκευές 

Τότε μπορείς (και καλό θα ήταν) να χρησιμοποιήσεις το flexboxes

Παράδειγμα:  Site: http://codepen.io/xphstos/pen/qRpQrV

 

 

Πάντως ότι και αν επιλέξεις... μην κολλάς τους τίτλους με τα container τους.

Δίνε τους λίγο αέρα, έστω 10px πάνω κάτω.

Αλλιώς "πνίγονται"

 

 

Οκ! Θα το κοιτάξω! Ευχαριστώ πολύ για τον κόπο και τις συμβουλές!