Apa ukuran font yang diterjemahkan secara tepat?

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?

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.

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.

"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.

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.

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.