Apa rasio standar untuk tipografi di web?

25

Dalam membuat desain web, saya sering mencoba memastikan tipografi saya proporsional dan konsisten. Namun, saya belum dapat menemukan artikel atau sumber daya yang pasti tentang rasio dan ukuran apa yang harus digunakan. Secara khusus, apa yang direkomendasikan atau praktik standar untuk:

  • Ukuran huruf
  • Tinggi garis
  • Lebar garis
  • Penspasian garis

Harap pertimbangkan paragraf dan teks tajuk dalam jawaban Anda. Juga, setiap studi tentang efektivitas berbagai rasio atau metrik akan sangat berguna.

Virtuosi Media
sumber

Jawaban:

18

Elemen Gaya Tipografi Robert Bringhurst adalah referensi yang menyeluruh dan bagus untuk hal-hal seperti ini. Itu panjang tapi sangat berharga.

Banyak desainer merekomendasikan grid garis standar sehingga garis + padding akan selalu masuk dalam, katakanlah, 16 piksel. Jadi apapun yang kurang dari itu akan memiliki tinggi garis 16, semua yang di atas itu akan memiliki tinggi garis 32.

Panjang ideal baris untuk membaca teks adalah 45 karakter oleh sebagian orang dan 55-75 oleh sumber lain.

Ada beberapa rata-rata umum situs web di sini: Pola Desain Tipografi dan Praktik Terbaik

Damon
sumber
1

Saya akan mengatakan mulai dengan paragraf di 16px dan gunakan deret Fibonacci untuk menghitung sisanya. Sepertinya browser utama menggunakan logika ini. Selama bertahun-tahun (untuk penelitian di masa depan, menggunakan "The Elements of Typographic Style: Versi 4.0" dari Robert Bringhurst, Hartley dan Marks) yang terkemuka diatur ke 12pt untuk font 10pt.

Mengubah 12pt menjadi piksel, kami memperoleh font dasar 16px.

Sebagian besar Stylesheet default Browser menggunakan 16 piksel untuk teks paragraf mereka aktif karena Anda dapat memeriksa sendiri DOM atau dengan membaca https://www.w3.org/TR/CSS21/sample.html dan http: // daftar. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

Masalah yang kita hadapi saat ini adalah tepatnya kita berbicara tentang tipografi jenis baru. Tipografi web saat ini yang perlu masuk ke dalam perangkat yang berbeda sama sekali berbeda dari konsep-konsep sebelumnya seperti yang digambarkan pada Elemen Gaya Tipografi Robert Bringhurst. Meskipun ini adalah buku yang bagus, kenyataannya adalah bahwa perancang modern membutuhkan kode. Saya biasanya mempertimbangkan matriks standar dari stylesheet browser utama dengan membuat kerangka file HTML dengan h1 dasar, h2, h3, h4, h5, h5, h6, paragraf, footer. Saya memeriksa lembar gaya peramban untuk memahami ukuran ukuran piksel standar yang mereka gunakan ketinggian garis, dan hierarki pada judul. Sebelum ukuran tipografi web diatur oleh jenis logam / kayu yang dapat dipindahkan tetapi dari tahun 1985, dengan perjanjian antara Adobe dan Apple mulai berubah. Saya menganggap bahwa hari ini, regulator utama dari konsep tipografi adalah Apple, Safari, Windows, dengan Internet Explorer, Chrome, Firefox ... Anda harus melihat stylesheet browser mereka untuk mengakomodasi tipografi Anda untuk apa yang sebenarnya akan dirender dan di perangkat yang berbeda. Anda masih harus mengikuti praktik dari Elements of Typographic Style karya Robert Bringhurst, yang merupakan buku yang sangat bagus, atau mengikuti sistem urutan Fibonacci. Saya biasanya mengikuti perkembangan perubahan pada stylesheet browser dan membaca spesifikasi w3 di sini: Anda masih harus mengikuti praktik dari Elements of Typographic Style karya Robert Bringhurst, yang merupakan buku yang sangat bagus, atau mengikuti sistem urutan Fibonacci. Saya biasanya mengikuti perkembangan perubahan pada stylesheet browser dan membaca spesifikasi w3 di sini: Anda masih harus mengikuti praktik dari Elements of Typographic Style karya Robert Bringhurst, yang merupakan buku yang sangat bagus, atau mengikuti sistem urutan Fibonacci. Saya biasanya mengikuti perkembangan perubahan pada stylesheet browser dan membaca spesifikasi w3 di sini:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Saya pikir, bidang Desain perlu mempertimbangkan hal ini dan saya menemukan bahwa pendidikan ke dalam praktik tidak diperbarui dengan realitas saat ini. Anda juga dapat membaca lebih lanjut di sini di blog saya: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/

EstelaG
sumber
Hai @EstelaG dan selamat datang di GD.SE! Kami memiliki aturan ketat untuk spam dan jawaban di tautan. Saya benci melihat jawaban Anda ditandai. Anda harus mengedit pertanyaan Anda untuk merangkum poin-poin utama artikel.
penasaran