"Benar" teks tengah secara vertikal dalam kotak

16

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

masukkan deskripsi gambar di sini

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.

ernesto
sumber
1
Hubungan antara modal dan huruf kecil merupakan faktor penting di sini. Jawabannya mungkin "itu tergantung" - pada font.
usr2564301
seseorang baru saja mengajukan pertanyaan serupa hari ini, tetapi yang ini lebih lengkap dan ditulis dengan lebih baik
Luciano
2
Ini telah ditanyakan dan tidak ada solusi yang benar-benar baik untuk itu, bahkan kata-kata individual cenderung ingin memusatkan di tempat yang berbeda di banyak font. Tidak ada solusi matematika yang sepenuhnya benar.
joojaa

Jawaban:

5

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:

masukkan deskripsi gambar di sini

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 menambahkan 40pxpadding 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):

masukkan deskripsi gambar di sini

Seperti yang Anda lihat, itu cukup dekat ( 2pxperbedaan).

Untuk meringkas / menyimpulkan:

Teknik yang saya gunakan:

  1. Sejajarkan jalur atas / bawah kotak ke tinggi x / garis dasar masing-masing (dan kemudian SHIFTtombol panah ke luar untuk lapisan visual.
  2. Demikian pula, kadang-kadang saya akan mengarahkan tombol teks ke atas dan ke bawah sampai garis dasar dan x-tinggi memenuhi batas bawah dan atas kotak; dari sana, saya akan menghitung piksel dan kemudian menyebarkan sisanya di antara dua arah saat saya memusatkan teks.
  3. Pilih kotak dan teks, lalu lakukan “Align Vertical Centers” dan “Align Horizontal Centers”.
  4. Terakhir, ada saat-saat ketika saya mengamati penempatan. Biasanya, saya naik ke atas vs. ke bawah untuk menghindari "sag" visual (ini berkaitan dengan pembingkaian gambar, lihat bagian Membingkai Gambar di bawah); ini terutama benar jika ukuran font adalah angka ganjil dan 1pxperbedaan adalah sisa ... Saya akan menggeser teks 1px(atau lebih) ke atas, bukan ke bawah.

Membingkai gambar

Anyaman yang digunakan paling umum memiliki margin yang sama di semua jalan. Pada karya seni dengan pusat visual lebih rendah dari pusat sebenarnya,. [8] Bobot bawah, atau off-set sering digunakan dalam anyaman. Margin bawah dibuat lebih besar dari margin samping dan atas. Saat melihat gambar, mata cenderung ke pusat lebih tinggi dari pusat fisik gambar. Dengan membuat margin bawah yang lebih besar dan mengatur matras Anda menarik mata ke pusat fisik gambar. Top Center adalah subset dari pembobotan bawah di mana margin atas dan samping sama, yang menciptakan efek yang menyenangkan secara visual. Ini khususnya benar di tikar di mana batas tidak sama, seperti 11x14 dengan bukaan 8x10.
- WikiPedia: Mat (pembingkaian gambar)

… dan di sini:

Tikar 'tertimbang' di bagian bawah karena mata / otak kita merasakan tarikan gravitasi. Jika matras memiliki lebar yang sama di sekitar, otak kita akan 'mendaftarkan' bagian bawahnya sedikit lebih sempit (gambar tidak secara visual terpusat di matras)
- WetCanvas> Pusat Pembelajaran> Tip dan Pembingkaian Studio> Diskusi Membingkai Reload this Page Weighting bagian bawah matras

Ketik Ketentuan

masukkan deskripsi gambar di sini
- https://www.supremo.tv/typeterms/

BONUS!

Berikut adalah GIF yang membandingkan tinggi topi, descender, ascender dengan semua huruf kecil tanpa descender / ascenders:

masukkan deskripsi gambar di sini

Saya pikir kedua versi berbaris cukup baik di dalam kotak.

mhulse
sumber
4

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/

Brewer Badai
sumber
Selamat Datang di Desain Grafis! Sementara ini secara teoritis dapat menjawab pertanyaan, akan lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini, dan menyediakan tautan untuk referensi.
Luciano
Terima kasih Luciano, saya harap hasil edit saya menjelaskan pemikiran saya lebih jauh
Storm Brewer
Apa yang terjadi jika teks ini dinamis sehingga ascenders dan descenders bervariasi? Aturan apa yang Anda ikuti?
Zach Saucier
Saya hanya peduli dengan teks Latin. Tapi terima kasih telah membuat saya berpikir tentang berat badan. Itu akan menjadi argumen untuk versi 1, karena sebagian besar kegelapan berada di dalam ketinggian x, dengan beberapa ascenders dan descenders kadang-kadang keluar.
ernesto
3

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.

ispaany
sumber
Apa yang terjadi jika teks ini dinamis sehingga ascenders dan descenders bervariasi? Aturan apa yang Anda ikuti?
Zach Saucier
Zach, jika tipografi adalah yang paling penting Anda ingin menyesuaikan setiap kotak secara manual ke tempat pikiran / mata Anda memberi tahu Anda itu seimbang (saya telah menghabiskan banyak waktu mengutak-atik detail desain yang bagus). Jika Anda perlu membuat gaya yang akan sering diulang, Anda dapat membuat 3 gaya: ascender heavy, descender heavy, dan neutral (tidak yakin perangkat lunak apa yang Anda gunakan). Ini juga tidak akan tepat, tetapi harus menjadi agak seimbang. Jika satu gaya dipilih untuk semua teks, itu mungkin membuat pekerjaan itu lebih mudah tetapi, tipografi akan menderita.
ispaany
Saya juga lebih tertarik pada kasus di mana teks dinamis dan gaya harus dapat digunakan kembali (seperti bilah navigasi atau tombol). Tidak perlu sempurna seperti ketika Anda mendesain logo atau ikon. Tetapi bagaimana saya membuat gaya "netral" yang Anda sebutkan? Hanya dengan mata?
ernesto
@untuk Anda harus membuat kompromi, Anda memilih satu tempat yang berfungsi dalam satu contoh dan kemudian mengabaikan semua kasus di mana tidak. Begitulah cara kerjanya. Anda hanya harus menerima bahwa Anda tidak dapat menang dalam semua kasus.
joojaa