Apakah ada aturan kanonik bagaimana cara memusatkan teks secara vertikal di dalam kotak? Atau, dengan kata lain, bagaimana cara menyelaraskan kotak di sekitar teks? Saya dapat membayangkan tiga opsi berdasarkan metrik tipografi (lihat ilustrasi tidak tepat saya):
- Sejajarkan di tengah ketinggian x
- Sejajarkan di tengah ketinggian topi (" garis rata-rata ")
- Sejajarkan di tengah topi + tinggi descender
Saya sebagian besar seorang programmer, tetapi saya sering harus melakukan ini, dan ingin tahu apakah ada aturan bersama yang sama, atau jika Anda desainer melakukan apa yang Anda inginkan. Saya lebih suka tautan ke buku desain grafis daripada pendapat pribadi.
typography
text
alignment
best-practice
ernesto
sumber
sumber
Jawaban:
Pertanyaan bagus!
Saya sangat suka, dan setuju dengan, jawaban yang diberikan sejauh ini. Jawaban saya lebih fokus pada teknik pragmatis daripada penalaran ilmiah atau matematika. : D
Dengan itu, preferensi saya adalah menggunakan garis dasar dan tinggi-x (lihat bagian Ketentuan Jenis di bawah) sebagai titik awal untuk garis atas dan bawah kotak saya masing-masing. Semoga GIF ini membantu menjelaskan:
Setelah saya mendapatkan jalur untuk sejajar dengan garis dasar atau x-height, saya kemudian menggunakan tombol SHIFT+ UPatau DOWNpanah untuk membuat visual padding (secara default, di Photoshop, setiap kenaikan adalah
10px
, jadi pada contoh di atas, saya menambahkan40px
padding di atas dan bawah).Dalam contoh ini Anda dapat melihat apa yang dilakukan alat pelurus jika saya mengambil kotak / teks yang sama dan melakukan “Align Vertical Centers” (teks merah adalah hasil dari menggunakan alat pelurusan):
Seperti yang Anda lihat, itu cukup dekat (
2px
perbedaan).Untuk meringkas / menyimpulkan:
Teknik yang saya gunakan:
1px
perbedaan adalah sisa ... Saya akan menggeser teks1px
(atau lebih) ke atas, bukan ke bawah.Membingkai gambar
… dan di sini:
Ketik Ketentuan
- https://www.supremo.tv/typeterms/
BONUS!
Berikut adalah GIF yang membandingkan tinggi topi, descender, ascender dengan semua huruf kecil tanpa descender / ascenders:
Saya pikir kedua versi berbaris cukup baik di dalam kotak.
sumber
Bobot visual sangat dinamis sehingga benar-benar tidak dapat ditentukan oleh x-tinggi, tinggi topi, dll ...
Elemen-elemen tertentu dalam desain Anda mungkin menarik mata ke satu arah di atas yang lain meskipun secara matematis menjadi "tengah", dari kiri ke kanan dibandingkan dengan kanvas, misalnya.
"Pusat visual" adalah tempat semua elemen bobot seimbang secara visual meskipun tidak berada di tengah yang tepat.
Anda mungkin ingin mencoba bereksperimen dengan alat ini: http://javier.xyz/visual-center/
sumber
Desain tidak selalu merupakan ilmu pasti. Seringkali apa yang terlihat benar, mungkin bukan apa yang menjadi pusat sebenarnya atau apa yang secara matematis benar.
Khususnya, dalam pertanyaan Anda, hal itu akan tergantung pada ascenders dan descenders dalam teks untuk menentukan yang terbaik dari penyelarasan optik. Jika tidak ada ascenders atau descenders, keberpihakan yang ideal dapat berubah. Dalam contoh Anda, nomor tiga tampaknya merupakan pilihan terbaik karena ada baik ascenders dan descenders dan memusatkan mereka terlihat paling enak dipandang.
sumber