Haruskah spasi di sekitar teks tebal dibuat tebal juga?

18

Pada gambar berikut, teks atas memiliki spasi reguler di sekitar kata tebal bar, sedangkan teks bawah menyertakan spasi dalam gaya tebal:

Saya menambahkan garis penanda vertikal merah sehingga lebih mudah untuk melihat bahwa kata-kata tidak berbaris dengan sempurna. Untuk beberapa font, ini sepertinya tidak membuat perbedaan, namun bagi yang lain (seperti Avenir) itu penting.

Apakah ada aturan umum yang harus saya pilih? Jika saya membuat kata tebal , haruskah saya membuat kedua spasi di sekitarnya tebal?

(dan jika itu tidak memperluas pertanyaan terlalu banyak, bagaimana dengan teks miring dan bukan teks tebal )?

typography text

— Batang jagung
sumber

Apakah penggambaran Anda dari html / css? Saya cukup yakin html / css memberikan lebar persis sama untuk kedua markup Anda. Pada dasarnya tidak ada ruang tebal dalam html / css yang saya sadari tapi saya sama sekali tidak seorang desainer web (CC: @ZachSaucier)

— Ryan

Pertanyaan ini tidak spesifik untuk web. Saya baru saja menambahkan HTML yang setara dengan teks untuk mencoba memperjelas bahwa spasi dimasukkan dalam gaya tebal; Saya terbuka untuk cara yang lebih baik untuk memperjelasnya.

— Cornstalks

4

@Cornstalks jujur saya akan mengedit dan menghapus markup dari pertanyaan, saya pikir itu mengganggu orang dari titik :)

— Cai

1

Sebenarnya saya tidak berpikir HTML seharusnya dihapus. Saya pikir markup lainnya harus ditambahkan. Atau seluruh pertanyaan ditulis ulang. Lihat jawaban saya yang semoga koheren

— Ryan

3

Jika ini ditanyakan pada garis bawah, alih-alih huruf tebal, semua orang akan setuju tentang apa yang harus dilakukan ... Namun, dalam kasus ini, Anda mungkin ingin mempertimbangkan ini: bagaimana jika huruf tebal memiliki (secara signifikan) ruang yang lebih luas menurut desain? Sebuah tunggal kata masih akan terlihat baik-baik saja, tapi ruang di dua kata dalam teks biasa akan terlihat aneh - dan kemudian saya mungkin akan menggantikan ruang dengan satu non-tebal, dan cadangan "berani" ruang untuk seluruh kalimat tebal saja.

— usr2564301

11

Tidak, spasi tidak boleh tebal karena itu akan menjadi semantik yang buruk. Sebuah kata atau serangkaian kata dapat dicetak tebal, tetapi spasi di sekitar kata tidak dapat.

Ini terpisah dari pemikiran desain visual, dan independen dari implementasi apa pun. Semantik berasal dari penulis. Mereka tidak bergantung pada desainer. Perancang memiliki alat desain visual untuk melakukan desain visual mereka. Sekali lagi, dalam implementasi apa pun.

Dalam contoh Anda, penulis menulis:

foo **bar** baz

... ditampilkan di sini dalam Markdown, tetapi ini berlaku dalam lingkungan penulisan apa pun .

Seorang penulis tidak akan memiliki alasan untuk berani spasi karena tidak ada alasan semantik untuk tebal spasi. Teks tebal berasal dari pikiran penulis. Mereka menebalkan sebuah kata (atau menjalankan kata-kata) bukan huruf tebal spasi.

Jadi contoh HTML adalah dalam HTML karena contoh Anda dalam HTML, tetapi ini berlaku untuk implementasi apa pun - dari Penurunan harga di atas adalah:

foo <b>bar</b> baz

... dan setelah itu ketika desain visual dimulai.

Jika karena alasan tertentu Anda ingin ruang ekstra di sekitar teks tebal - dan Anda bekerja dalam HTML seperti yang ditunjukkan oleh contoh Anda - Anda menggunakan CSS atau JavaScript untuk memodifikasi DOM, Anda tidak merusak semantik HTML. Jika Anda bekerja di InDesign atau Illustrator atau lingkungan desain visual apa pun, hal yang sama berlaku.

Jika Anda melihat contoh menggunakan tulisan sebenarnya lebih jelas:

Bahaya tidak memakan isi paket.

… Itu adalah kata “Bahaya” yang memiliki penekanan yang berani. Tidak ada lagi.

— Simon White
sumber

2

OP bertanya tentang situasi ini dalam hal desain visual , jadi jawaban Anda tentang preferensi markup tidak relevan

— Zach Saucier

2

Saya membahas desain visual - Anda menambahkan spasi tambahan jika Anda menginginkannya melalui aturan CSS, Anda tidak menambahkannya dalam HTML. Sama seperti Anda tidak menambahkan spasi kata dengan meletakkan banyak spasi tanpa putus di HTML. Jika pertanyaannya adalah "apakah saya menambahkan spasi-kata dengan meletakkan banyak spasi tanpa putus?" Jawabannya akan terstruktur sama - HTML tetap semantik, desain visual dilakukan dengan aturan CSS.

— Simon White

3

Zach benar bahwa markup tidak ada hubungannya dengan pertanyaan. Markup hanya digunakan untuk menggambarkan apa arti OP. Saya setuju itu semantik akan menjadi markup buruk tapi itu tidak relevan.

— Cai

1

Saya pikir mungkin Anda melihat kata "semantik" dan berpikir itu adalah istilah khusus HTML. Bukan itu. Itu berlaku untuk semua tulisan. Contoh yang saya gunakan dilakukan dalam HTML karena itu adalah contoh yang digunakan penanya. Tetapi itu berlaku untuk implementasi apa pun. Jika Anda bekerja di InDesign, Anda masih memiliki naskah dari seorang penulis, Anda masih memodifikasi spasi dengan alat spasi desain visual di InDesign daripada monyet dengan semantik teks.

— Simon White

1

Di luar HTML atau pemrograman lain, saya tidak berpikir semantik - cara Anda membicarakannya - sangat penting. Saya sering menambahkan jeda paragraf atau spasi ekstra saat bekerja di media cetak. Secara semantik tidak benar, tetapi jauh lebih cepat dan lebih mudah jika Anda kekurangan waktu, dan tidak benar-benar memengaruhi apa pun.

— Cai

6

Jujur saya pikir itu tidak masalah. Perbedaan jarak akan diabaikan dan tidak terlihat. Namun, ini adalah sesuatu yang biasa saya lakukan.

Perbedaan jarak akan tergantung pada font. Jika ada perbedaan, perancang font membuat keputusan sadar untuk membuat perbedaan itu, jadi gunakan. Huruf tebal menurut definisi lebih luas dari pada pasangan berat regulernya, oleh karena itu jarak apa pun, yang mungkin telah dihitung dengan hati-hati agar sesuai dengan font tersebut secara alami harus sama-sama lebih lebar. Ruang ekstra akan (dalam teori) meningkatkan keterbacaan dan keseimbangan teks.

Satu hal yang perlu diingat adalah konsisten. Jika Anda menggunakan ruang tebal di satu sisi, gunakan juga di sisi lain. Tidak melakukan hal itu dapat membuat teks tampak tidak seimbang. Dalam banyak program jika Anda mengklik dua kali untuk memilih kata, itu akan memilih kata dan spasi tambahan, jadi jika Anda mengklik dua kali dan mengubah font menjadi huruf tebal, Anda akan berakhir dengan ruang normal sebelum dan ruang tebal sesudahnya.

Orang lain telah membuat titik tentang hal itu secara semantik salah. Ini benar jika Anda bekerja dengan kode sumber atau markup yang harus sama benar dengan output visual, tetapi itu tidak penting.

Singkatnya - Tidak mungkin ada orang yang akan memerhatikannya, tetapi jika Anda peduli - gunakan font yang dimaksud oleh perancangnya, gunakan spasi tebal, dan gunakan secara konsisten.

— Cai
sumber

"Setiap perbedaan dalam jarak akan diabaikan" - tetapi di mana ada perbedaan, mungkinkah cukup untuk mengubah fitur lain, seperti pembungkus kata?

— MrWhite

5

"... jika kamu benar-benar peduli - gunakan font seperti yang dimaksudkan oleh perancangnya, gunakan spasi tebal" Tentu, desainer memilih untuk membuat spasi tebal lebih besar - tapi itu untuk spasi dalam teks tebal, yaitu antara dua kata yang dicetak tebal. Kami tidak tahu jarak apa yang mungkin dipilih desainer untuk spasi antara satu kata tebal dan satu kata tidak tebal.

— Peter LeFanu Lumsdaine

5

Sebenarnya ini penting dan ini pertanyaan yang bagus. Saya memiliki pengalaman dengan beberapa perangkat ketika ruang kosong tidak dipaksa sebagai entitas dengan  itu akan membuat konten salah jika ruang ada dalam sesuatu seperti tag rentang.

Misalnya foo barmerender foobarketika dikodekan sebagai:

<span class="bold">foo </span>bar

Beberapa aplikasi, misalnya InDesign, pada HTML dan CSS mengekspornya sebagai:

<span class="bold">This is Friday</span>

Secara keseluruhan, ini bisa sampai ke perancang tetapi harus diadopsi dalam alur kerja untuk paritas. Saya akan mendorong Anda menguji bagaimana itu akan diperlakukan pada produk jadi karena dapat memainkan faktor dalam pengembangan Anda. Jadi untuk menjawab pertanyaan Anda, ketika saya mengembangkan menggunakan HTML saya tidak menyertakan akhir atau mulai spasi di dalam tag rentang saya karena saya sudah berpengalaman dengan mereka diabaikan oleh mesin rendering dari beberapa perangkat.

Jika Anda memilih untuk memasukkan spasi di bagian akhir atau bagian dalam tag Anda, saya sarankan Anda untuk membuat kode seperti itu:

<span class="bold">foo&#160;</span>bar

Dari sisi perkembangan, Anda harus mempertimbangkan perilaku parsing dan kegunaan. Misalnya, jika Anda mengembangkan kamus dan berencana untuk memilah elemen tertentu yang dapat digabungkan bagian tertentu jika Anda menyertakan spasi awal dan akhir dalam sesuatu seperti tag rentang atau dalam suatu elemen itu bisa memiliki hasil yang drastis pada bagian akhir.

Setelah downvote

Anda dapat downvote jika Anda pikir itu tepat tetapi faktanya tetap bahwa ini tidak dapat dikutip sebagai preferensi. Beberapa perangkat di pasar mengabaikan bagaimana spasi dilakukan, dan tujuan dari jawaban saya adalah untuk menyebutkan bahwa jalan yang akan dilihat konten harus menjadi faktor dalam keputusan dan bagaimana itu dibuat. Secara pribadi, ketika saya mengembangkan konten, saya mempertimbangkan bagaimana itu dilihat dalam aplikasi, dicetak, atau di situs, dan OP harus mempertimbangkan itu juga.

Setelah saya diberitahu ini bukan untuk web itu masih turun ke media di mana akan menghasilkan masalah. Jika tidak maka lakukan saja tetapi mengadopsi paritas. Jika ya, maka lakukan dengan cara yang benar.

— DᴀʀᴛʜVᴀᴅᴇʀ
sumber

1

Apakah saya setidaknya mendapatkan penjelasan mengapa downvote?

— DᴀʀᴛʜVᴀᴅᴇʀ

Saya akan menganggap itu dari fokus pada sisi implementasi

— Zach Saucier

1

Sisi implantasi harus selalu menjadi faktor dalam produk akhir karena dapat menggambarkan bagaimana produk tersebut dikembangkan.

— DᴀʀᴛʜVᴀᴅᴇʀ

1

Sepakat! Meskipun saya tidak berpikir itu adalah fokus dari pertanyaan ini

— Zach Saucier

1

Jika ada perbedaan dalam jarak antara regular dan bold, itu karena desainer font secara sadar membuat keputusan untuk membuat perbedaan itu, jadi gunakan itu. Jika Anda tidak bisa karena Anda perlu memikirkan semantik markup dari batasan teknis, itu masalah tersendiri. Masalah penting, tetapi berbeda.

— Cai

4

Ini tergantung pada perancang, tetapi pada akhirnya sangat sedikit penting dalam kebanyakan kasus.

Dalam hal desain, tidak banyak bedanya apakah bagian-bagian yang memimpin atau membuntuti huruf tebal (atau miring) tebal atau tidak. Satu-satunya efek yang dimilikinya adalah jarak antar kata (Saya percaya istilah desainnya masih spasi huruf tapi saya suka menyebutnya jarak kata ). Jumlah ruang memengaruhi "frekuensi" (lihat artikel ini ) dari hasil cetak. Namun, dalam kebanyakan kasus, perbedaan ini hanya disebabkan pada bagian yang mengarah atau membuntuti bagian tebal atau miring sangat diabaikan sehingga dapat diabaikan dengan aman.

Apakah ruang tebal membutuhkan lebih banyak ruang daripada ruang tidak tebal tergantung pada font yang digunakan. Beberapa font membuat semuanya dengan ukuran yang sama, yang lain membuat spasi lebih luas. Anda harus menguji untuk melihat apa font yang Anda gunakan (jika Anda peduli).

Satu-satunya kasus saya dapat berpikir di sana itu benar-benar penting adalah dalam kasus ukuran font yang sangat besar, seperti yang ada di pos. Dalam hal ini jumlah perbedaan dapat lebih signifikan karena skala yang lebih besar. Namun, dengan teks besar seperti ini, perancang harus tetap melihatnya dan dapat melakukan penyesuaian sesuai kebutuhan.

Saya sarankan pergi dengan apa pun yang lebih mudah tetapi yang paling penting tetap konsisten . Cenderung menambah lebih banyak ruang (termasuk mereka dalam huruf tebal).

Dengan itu dikatakan, jika Anda menggunakan beberapa bahasa markup seperti HTML lebih semantik untuk menambahkan ruang tambahan ini memimpin atau mengikuti bagian tebal menggunakan bahasa gaya seperti CSS alih-alih memasukkan ruang di dalam tag yang dibuat tebal.

— Zach Saucier
sumber

Jika seseorang memberi saya HTML dengan spasi tebal di sekitar setiap teks tebal, saya akan menganggapnya sebagai bug dan membuatnya memperbaikinya.

— Simon White

2

@SimonWhite Pertanyaannya adalah tentang desain visual, bukan markup

— Zach Saucier

Anda tidak melakukan desain visual dalam HTML. Itulah gunanya CSS. Pertanyaannya termasuk contoh markup yang merupakan contoh markup buruk.

— Simon White

2

@SimonWhite Dia tidak bertanya tentang HTML atau CSS. Dia bertanya tentang ruang tebal dalam hal desain yang merupakan tujuan dari situs ini

— Zach Saucier

Contoh implementasinya adalah dalam HTML. Itulah bagaimana HTML diperkenalkan. Jika contohnya ada di Illustrator, kita bisa bicara dengan istilah itu. Namun, jawabannya tetap sama: Anda tidak perlu spasi tebal karena tidak ada hal semantik dalam penulisan sebagai ruang tebal . Penulis tidak menulisnya. Jika Anda ingin mengubah spasi kata - dalam implementasi apa pun - Anda tidak membaca teks dan menambahkan spasi tambahan di antara setiap kata, Anda menggunakan alat desain visual Anda untuk menambah jarak kata. Hal yang sama berlaku untuk spasi di sekitar teks tebal, apakah HTML, InDesign, Illustrator, atau implementasi apa pun.

— Simon White

3

Baiklah, saya pikir saya mengerti sekarang dan ini adalah pertanyaan yang menarik namun rumit yang mengapa jawabannya ada di semua tempat. Semoga dengan kebijaksanaan saya yang tak terbatas (baca: kurang tidur) saya bisa mengklarifikasi

Markup, HTML, LaTeX --- ini penting tetapi sekarang bagaimana Anda saat ini memikirkannya.

Sebagai contoh yang kami miliki, seperti yang Anda gunakan dalam contoh awal Anda:

HTML: The <b>cat</b> died last night!
Markup: The **cat** died last night!
BBCode: The [b]cat[/b] died last night!

Atau Anda dapat memiliki:

HTML: The<b> cat </b> died last night!
Markup: The** cat **died last night!
BBCode: The[b] cat [/b]died last night!

Sekarang Anda mengatakan Anda tidak bertanya tentang desain HTML saja. Tapi di situlah ini agak membingungkan jadi saya akan mencoba menjelaskan. Bold adalah fungsi semantik (seperti Simon juga mencoba menjelaskan). Tidak peduli sistem apa pun yang Anda gunakan, Anda harus mengatakannya dengan berani.

Apa yang benar-benar ingin Anda tanyakan: Haruskah ruang ditingkatkan saat menggunakan font yang lebih kuat?

Jadi, haruskah ruang ditingkatkan saat menggunakan font yang lebih tebal?

Terserah desainer. Perluas banyak surat dalam aplikasi yang Anda pilih dan atur sesuka Anda. Tidak ada aturan ketat tentang ini.

Lihat tidak ada spasi tebal karena tidak ada karakter spasi sama sekali di sini, hanya ada huruf yang dilemparkan pada halaman:

Sedikit lebih dekat, sedikit lebih jauh, sama ... itu semua tergantung pada sang desainer.

— Ryan
sumber

1

Lebar setiap mesin terbang (termasuk spasi) ditentukan oleh perancang font di dalam jenis huruf. Dalam kasus Avenir, perancang memilih untuk menambah lebar ruang untuk menjaga jarak relatif antara dua kata ketika berat naik, tetapi perancang hampir pasti tidak merancang font dengan bobot campuran dalam satu kalimat dalam pikiran.

Jadi karena itu tidak ada jawaban yang benar; ruang adalah lebarnya untuk melihat antara kata-kata dengan berat font yang sama. Anda harus menggunakan penilaian Anda sendiri tentang apa yang harus dilakukan dalam kasus spesifik Anda karena juru ketik tidak melakukannya untuk Anda. Satu-satunya hal yang harus Anda lakukan adalah menggunakan spasi tebal di antara kata-kata tebal.

Mungkin tepat untuk membayangkan menggunakan dua tipografi yang sama sekali berbeda, masing-masing dengan jarak yang sangat berbeda; Anda dapat memberi tahu di sana bahwa tidak ada jawaban benar yang jelas tentang metrik font mana yang digunakan antara kedua kata tersebut.

— Kit Grose
sumber