Apa ukuran font yang diterjemahkan secara tepat?


81

Saya memiliki font 40 piksel yang saya coba terjemahkan menjadi gambar khusus. Saya mencoba mencocokkan ukuran gambar dengan tepat, tetapi saya mengalami beberapa masalah dalam mendapatkan ukuran yang tepat. Pada dasarnya, apa yang terjadi adalah ini. Ketika sebuah font mengatakan itu adalah piksel X, apa artinya ini secara fisik?


dalam font kita memiliki terminologi x tinggi, apakah Anda berbicara tentang hal yang sama ??
Jack

5
Jika Anda mengetik dokumen, ukuran font 12 biasanya digunakan. Apa artinya 12?
PearsonArtPhoto

12 = tipe 12pt (biasanya)
DA01

Jawaban:


67

Ini adalah pertanyaan yang sangat bagus, yang memiliki jawaban yang agak tidak memuaskan.

Ukuran jenis, apakah ditentukan dalam piksel, titik (1/72 ") atau milimeter, adalah ketinggian em-square, kotak tak terlihat yang biasanya sedikit lebih besar dari jarak dari ascender tertinggi ke descender terendah.

Mengingat ini adalah tindakan yang agak sewenang-wenang

  • tergantung pada desain teknis font yang tepat
  • tidak dapat diukur secara tepat dari sampel yang dicetak atau dirasterisasi

itu tidak terlalu berarti atau berguna, selain sebagai perkiraan.

Dalam kasus Anda, cari tahu ukuran apa yang perlu Anda tentukan di Photoshop untuk mencocokkan rendering browser dengan eksperimen. Anda harus menemukan ini menjadi rasio konstan untuk font apa pun, tetapi saya tidak akan mengharapkan ini menjadi kasus jika Anda mengubah browser atau OS.


49

Waktu ASCII! Berpura-pura dua kotak di bawah ini adalah potongan-potongan jenis timah dari tahun 1900 atau lebih. Saat itu, tipografi dilemparkan dalam timbal (atau diarahkan pada kayu). Untuk jenis yang akan diatur menjadi penguncian pencetakan, mereka harus terhubung ke blok padat. Di sinilah dimensi tipe (dalam poin) berasal:

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

Perhatikan bahwa dua huruf di atas memiliki ukuran yang berbeda, tetapi kotak pembatasnya sama. Dengan demikian, dalam hal poin, kedua font tersebut memiliki ukuran yang sama.

Saat ini, kami tidak membuat banyak jenis timah dan kayu dan sebagian besar adalah digital. Namun, konsep ukuran titik masih ada di bahwa ada kotak virtual dengan ketinggian yang sama untuk setiap huruf yang jenisnya ditempatkan. Sekali lagi, kotak virtual inilah yang menentukan ukuran titik daripada pengukuran fisik dari bentuk huruf itu sendiri. Ukuran sebenarnya dari bentuk huruf seringkali lebih kecil dari ukuran titik (tetapi juga bisa lebih besar juga).

Mengukur jenis piksel tidak berfungsi karena itu, namun, Anda dapat 'mengatur' ketik piksel dalam CSS dan sejenisnya. Peramban melakukan terjemahan sebaik mungkin di antara ukuran px yang dideklarasikan. Tapi itu selalu merupakan estimasi fuzzy.

Pada akhirnya, tidak ada cara yang akurat untuk mendapatkan dua bentuk huruf tipografi dengan ukuran yang sama persis tanpa melihatnya secara visual dan mengubah ukuran masing-masing hingga Anda melihatnya sebagai ukuran yang sama.


Di komputer Anda, Anda menghitung Poin ke Piksel seperti ini PX = Poin * SystemDPI / 72. DPI dalam dunia video (monitor) adalah nilai arbitrer murni yang diperkenalkan oleh Apple pada tahun 1984. Perangkat video hanya menggunakan piksel; DPI tidak ada di dunia video / gambar. Font modern didasarkan pada konsep ini di mana 1 poin, 1/72 didefinisikan sebagai 1/72 inci.

5
@AbdiasSoftware Ya, 1 poin telah dirata-rata menjadi 1/72 inci dan Mac pertama memiliki layar 72 ppi. Tetapi tidak yakin apa hubungannya dengan pertanyaan yang diajukan atau jawaban yang saya berikan. Faktanya tetap bahwa font, baik itu digital atau analog, memiliki kotak pembatas dan kotak pembatas itulah yang mengacu pada ukurannya.
DA01

41

"Ukuran font" font mengacu pada "tinggi em font", yang tidak harus sama dengan tinggi karakter tertentu dalam font.

Biasanya ketinggian font mematuhi ide dasar yang sama - ini akan secara kasar diatur ke jarak dari descender terendah (seperti bagian bawah huruf g) ke ascender tertinggi (seperti bagian atas huruf h):

Seperti yang Anda lihat, tidak ada satu pun huruf yang mencakup keseluruhan rentang itu.

Dengan font digital, "tinggi em" font adalah pilihan yang dibuat oleh perancang font, dan tidak harus sesuai dengan konvensi ini sama sekali: perancang tipe digital dapat memilih fondasi apa pun untuk ukuran em mereka. Namun, font masih cenderung mematuhi, setidaknya secara kasar, dengan jenis konvensi yang dijelaskan di atas. Di masa lalu ketika jenis terdiri dari balok-balok logam, "tinggi mereka" adalah ketinggian salah satu balok itu, yang perlu cukup tinggi tidak hanya untuk karakter apa pun dalam jenis huruf itu tetapi juga untuk setiap ascenders, descenders, dan aksen.

Sekarang, banyak tipografi modern memasukkan aksen pada huruf kapital juga (seperti Ć) - aksen ini melampaui luar ascending tipografi tradisional dan dengan demikian ini (dan mungkin karakter khusus lainnya) berada di luar bagian atas "em". Untuk alasan historis kami tidak menyesuaikan ukuran em untuk memungkinkan ini, kami menjaga ukuran em dan hanya memperpanjang ini - setiap tipografer yang menggunakan aksen seperti itu perlu memastikan ada ruang bagi mereka untuk memperluas, meskipun biasanya celah baris memadai dalam teks tubuh.

The garis kesenjangan dalam teks tubuh adalah ruang kosong antara descender dari satu baris teks dan ascender dari garis bawah itu - yaitu, "ukuran font" tidak termasuk pengukuran kesenjangan baris ini. Itu bisa dipengaruhi oleh bidang CSS line-height, di mana1.4berarti bahwa selisih baris adalah 0,4 kali tinggi em, dan dengan demikian seluruh baris teks isi akan memakan 1,4 kali tinggi em termasuk selisih garis. Dalam aplikasi lain celah baris dapat ditentukan secara berbeda: pengolah kata sering menentukan dalam hal kelipatan dari "spasi" baris, tetapi tidak seperti dalam CSS, biasanya spasi "tunggal" tidak berarti tidak ada kesenjangan baris, tetapi beberapa baris "default" celah, di mana aplikasi mencoba untuk datang dengan default berdasarkan metadata di file font. Ada beberapa standar untuk menentukan metrik dalam font (misalnya dalam Truetype, ada standar Mac dan Windows / OS2 yang berbeda) sehingga kesenjangan garis default dapat bervariasi antara aplikasi dan sistem operasi.

Sekarang, bahkan jika desainer tidak mengikuti konvensi diprediksi untuk tinggi em mereka, ini masih tidak memberitahu Anda ukuran huruf (cap-tinggi) atau ukuran mengatakan sebuah o(x-height atau garis tengah) seperti ini dapat bervariasi bebas antara tipografi dalam kaitannya dengan ketinggian ascender. Dalam keluarga font, ini biasanya akan konsisten. Jadi misalnya, Times New Roman Bold dan Times New Roman Regular akan memiliki ukuran karakter yang sama untuk ukuran em yang sama, yang harus mencakup ascenders, descenders, cap-height, dan x-height.


2
Ya - ada konvensi (seperti mereka dari bawah 'g' ke atas 'h') tetapi masih ada varians, dan format font tidak membawa desainer ke konvensi ini sama sekali.
thomasrutter

7

Coba ketikkan karakter bilah vertikal ('|') dan ukurlah. Jika saya menggandakan situasi Anda dengan benar dan antialiasing Anda tidak mengaburkannya terlalu banyak, itu seharusnya 22px.

22px mewakili ketinggian blok tipe. Tetapi setiap karakter mengisi blok secara berbeda. A 'g' atau 'q' akan menempati bagian bawah dari 22px itu, sedangkan huruf kapital dan huruf kecil seperti 'b' atau 'd' akan menempati bagian atas. '|' adalah satu-satunya karakter (jika bukan satu - satunya) yang sepenuhnya akan mengisi ruang 22px.

Saya tidak tahu tentang cara membandingkan dengan pengaturan CSS Anda, tetapi itu menjelaskan bagaimana Photoshop menginterpretasikan tinggi teks.


1
Selain itu, Anda dapat mengatur dua font pada ukuran yang sama dan Anda akan sering melihat bahwa bentuk huruf itu sendiri. Mereka hanya memiliki ukuran 'blok' yang sama.
DA01

3
Pipa tidak selalu memenuhi total ruang yang dialokasikan. Ini murni preferensi oleh perancang tipe. Ini akan sering cocok dengan bagian atas ascenders dan bottom of descenders, tetapi meskipun begitu, ruang yang dialokasikan untuk karakter masih bisa jauh lebih besar.
DA01

2
Karakter bilah vertikal tidak selalu sama dengan ukuran em (mis. "Ketinggian penuh") font, tidak. Bahkan, biasanya akan lebih sedikit.
thomasrutter

2
Karakter kotak gambar vertikal secara teoritis harus mencakup seluruh ketinggian em (dan mungkin tumpang tindih dengan jumlah kecil). Tetapi sangat sedikit font termasuk karakter ini. Bilah vertikal normal ( |) biasanya TIDAK akan sama dengan ukuran em. Bahkan tidak melakukan ini di font inti Microsoft (Arial, Georgia dll).
thomasrutter

2
Karakter bilah vertikal tidak memenuhi seluruh ketinggian. Aksen untuk karakter huruf besar, misalnya "Á" diposisikan lebih tinggi. Bandingkan diri Anda: "Á" "|"
znq

0

Apakah Anda yakin font Anda diukur dalam piksel? Sebagian besar font waktu diukur dalam poin. Titik adalah 1/72 inci. Jadi font 40 pt tingginya 40/72 "atau 5/9". Penendang adalah bahwa itu adalah dimensi dari atas ascenders pada huruf tinggi ke bagian bawah descenders pada huruf yang menggantung di bawah garis dasar. Karena itulah ketinggian x terkadang digunakan, seperti yang disebutkan di atas. Itu adalah ketinggian huruf kecil yang tidak menempel ke atas atau ke bawah.

Either way, pengukuran tidak pernah tepat, sayangnya. Anda hanya perlu melakukan pengukuran dan perhitungan (dan / atau coba-coba) untuk mencapai apa yang Anda coba.


Tetapi poin hanya relevan dengan jenis fisik (cetak, ukiran, ukiran dll).
e100

Tidak sepenuhnya benar. Jenis tidak diukur dari atas ascenders ke bawah descenders, melainkan diukur dengan kotak pembatas yang mungkin berkorelasi dengan tinggi ascend / descender. Ini kembali ke hari-hari jenis timah dan kayu di mana jenis diletakkan di sebuah blok. Ketinggian blok inilah yang menentukan ukuran jenis apa yang dilabeli. Dengan demikian, dua font, keduanya diatur pada 12pt mungkin ukuran yang sangat berbeda dibandingkan satu sama lain. (Saya tidak akan membahas fakta bahwa 1pt tidak secara tradisional = 1/72 inci ...;)
DA01
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.