ขนาดของแบบอักษรแปลเป็นเท่าไร

ฉันมีตัวอักษร 40 พิกเซลที่ฉันพยายามจะแปลเป็นภาพที่กำหนดเอง ฉันพยายามที่จะจับคู่ขนาดของภาพให้ถูกต้อง แต่ฉันมีปัญหาบางอย่างเพื่อให้ได้ขนาดที่เหมาะสม โดยพื้นฐานแล้วสิ่งที่เกิดขึ้นคือสิ่งนี้ เมื่อแบบอักษรระบุว่าเป็นพิกเซล X สิ่งนี้มีความหมายทางกายภาพอย่างไร

นี่เป็นคำถามที่ยอดเยี่ยมซึ่งมีคำตอบที่ค่อนข้างน่าพอใจ

ขนาดของประเภทไม่ว่าจะระบุเป็นพิกเซล, จุด (1/72 ") หรือมิลลิเมตรเป็นความสูงของ em-square ซึ่งเป็นกล่องที่มองไม่เห็นซึ่งโดยทั่วไปแล้วจะมีขนาดใหญ่กว่าระยะทางจากตำแหน่งที่สูงที่สุดไปจนถึงระดับล่างสุด

ให้นี้เป็นมาตรการที่ค่อนข้างโดยพลการ

• ขึ้นอยู่กับการออกแบบทางเทคนิคที่แน่นอนของตัวอักษร
• ไม่สามารถวัดได้อย่างแม่นยำจากตัวอย่างที่พิมพ์หรือ rasterized

มันไม่ได้มีความหมายหรือมีประโยชน์อย่างอื่นนอกจากเป็นการประมาณ

ในกรณีของคุณกำหนดขนาดที่คุณต้องระบุใน Photoshop เพื่อให้ตรงกับการแสดงผลของเบราว์เซอร์โดยการทดลอง คุณควรพบว่านี่เป็นอัตราส่วนคงที่สำหรับแบบอักษรใด ๆ แต่ฉันไม่คิดว่ามันจะเป็นกรณีนี้หากคุณเปลี่ยนเบราว์เซอร์หรือระบบปฏิบัติการ

เวลา ASCII! แกล้งทำเป็นสองกล่องด้านล่างเป็นชิ้นประเภทตะกั่วจาก 1900 หรือมากกว่านั้น ย้อนกลับไปในขณะนั้นแบบอักษรถูกหล่อด้วยตะกั่ว (หรือส่งเป็นไม้) สำหรับประเภทที่จะตั้งเป็นล็อคการพิมพ์พวกเขาจะต้องเชื่อมต่อกับบล็อกที่เป็นของแข็ง นี่คือที่มาของมิติประเภท (เป็นคะแนน) จาก:

+--------------+  +-------------+  <----+
|              |  |             |       |
|      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  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

โปรดทราบว่าตัวอักษรสองตัวด้านบนมีขนาดแตกต่างกัน แต่กล่องที่มีขอบเขตเหมือนกัน ดังนั้นในแง่ของคะแนนฟอนต์ทั้งสองนั้นจึงมีขนาดเท่ากัน

ทุกวันนี้เราไม่ทำตะกั่วและไม้มากนักและส่วนใหญ่เป็นดิจิตอล อย่างไรก็ตามแนวคิดของการกำหนดขนาดจุดยังคงมีอยู่ในกล่องเสมือนที่มีความสูงเท่ากันสำหรับตัวอักษรทุกตัวที่วางไว้ อีกครั้งมันคือกล่องเสมือนจริงที่กำหนดขนาดพอยต์มากกว่าการวัดทางกายภาพของตัวอักษร ขนาดที่แท้จริงของรูปแบบตัวอักษรมักจะมีขนาดเล็กกว่าขนาดของจุด (แต่อาจมีขนาดใหญ่กว่าเช่นกัน)

การวัดประเภทพิกเซลไม่ทำงานเนื่องจากสิ่งนั้นคุณสามารถ 'ตั้งค่า' ประเภทพิกเซลใน CSS และสิ่งที่คล้ายกัน เบราว์เซอร์ทำการแปลให้ดีที่สุดเท่าที่จะทำได้ระหว่างขนาด px ที่ประกาศ แต่มันก็เป็นการประมาณที่คลุมเครืออยู่เสมอ

ในที่สุดก็ไม่มีวิธีที่ถูกต้องที่จะได้รับรูปแบบตัวอักษรสองแบบที่มีขนาดเท่ากันสั้น ๆ เมื่อมองไปที่มันและเปลี่ยนขนาดของแต่ละรูปจนกว่าคุณจะเห็นว่ามันมีขนาดเท่ากัน

"ขนาดตัวอักษร" ของตัวอักษรหมายถึง "ความสูง em" ของตัวอักษรซึ่งไม่จำเป็นต้องเหมือนกับความสูงของอักขระบางตัวในแบบอักษร

โดยทั่วไปแล้วความสูง em ของฟอนต์จะยึดตามแนวคิดพื้นฐานเดียวกัน - มันจะถูกตั้งค่าเป็นระยะทางจากตัวสืบทอดที่ต่ำที่สุด (เช่นด้านล่างของตัวอักษรg) ไปยังลิสต์สูงสุด (เช่นด้านบนของตัวอักษรh):

อย่างที่คุณเห็นไม่มีจดหมายแต่ละฉบับครอบคลุมทั้งช่วงนั้น

ด้วยแบบอักษรดิจิทัล "ความสูง em" ของแบบอักษรเป็นตัวเลือกที่สร้างขึ้นโดยผู้ออกแบบตัวอักษรและไม่จำเป็นต้องปฏิบัติตามอนุสัญญานี้เลย: นักออกแบบประเภทดิจิทัลสามารถเลือกรากฐานสำหรับขนาด em ได้ อย่างไรก็ตามแบบอักษรยังคงมีแนวโน้มที่จะยึดมั่นอย่างน้อยกับประเภทของการประชุมที่อธิบายไว้ข้างต้น ในสมัยก่อนเมื่อประเภทประกอบด้วยบล็อกโลหะ "em สูง" เป็นความสูงของหนึ่งในบล็อกเหล่านั้นซึ่งจะต้องสูงพอไม่เพียง แต่สำหรับตัวละครในแบบอักษรนั้น แต่ยังสำหรับ ascenders, สืบทอดและสำเนียงใด ๆ

ตอนนี้แบบอักษรสมัยใหม่จำนวนมากรวมถึงการเน้นตัวอักษรใหญ่เกินไป (เช่นĆ) - สำเนียงเหล่านี้ขยายออกไปด้านนอกของตัวพิมพ์แบบดั้งเดิมและดังนั้นสิ่งเหล่านี้ (และอาจเป็นอักขระพิเศษอื่น ๆ ) จึงตกอยู่ด้านบนของ ด้วยเหตุผลทางประวัติศาสตร์เราไม่ได้ปรับขนาด em เพื่อให้สิ่งเหล่านี้เรารักษาขนาด em และเพียงแค่ขยายออกไปมัน - นักพิมพ์ที่ใช้สำเนียงดังกล่าวจะต้องตรวจสอบให้แน่ใจว่ามีพื้นที่ให้ขยายช่องว่างบรรทัดเพียงพอในเนื้อความ

ช่องว่างบรรทัดในข้อความของร่างกายเป็นพื้นที่ที่เหลือระหว่างสืบทอดของหนึ่งบรรทัดของข้อความและครองตำแหน่งของเส้นด้านล่างนี้ค่ะ - นั่นคือการ "ขนาดตัวอักษร" ไม่รวมถึงช่องว่างนี้การวัดเส้น มันสามารถได้รับอิทธิพลจากเขตข้อมูล CSS line-heightที่ไหน1.4หมายความว่าช่องว่างของเส้นคือ 0.4 เท่าของความสูง em และดังนั้นข้อความทั้งหมดของบรรทัดจะใช้เวลา 1.4 เท่าของความสูงของ em รวมถึงช่องว่างของเส้น ในแอปพลิเคชันอื่น ๆ ช่องว่างของบรรทัดสามารถระบุได้แตกต่างกัน: โปรแกรมประมวลผลคำมักจะระบุในแง่ของการเว้นวรรคบรรทัด "เดี่ยว" หลายครั้ง แต่แตกต่างจากใน CSS ระยะห่างปกติ "เดี่ยว" ไม่ได้หมายความว่าไม่มีช่องว่างของบรรทัด ช่องว่างที่แอปพลิเคชันพยายามหาค่าเริ่มต้นโดยยึดตามข้อมูลเมตาในไฟล์แบบอักษร มีหลายมาตรฐานสำหรับการระบุตัวชี้วัดในแบบอักษร (เช่นใน Truetype มีมาตรฐาน Mac และ Windows / OS2 ที่แตกต่างกัน) ดังนั้นช่องว่างบรรทัดเริ่มต้นอาจแตกต่างกันระหว่างแอปพลิเคชันและระบบปฏิบัติการ

ตอนนี้แม้ว่านักออกแบบจะปฏิบัติตามแบบแผนที่คาดการณ์ได้สำหรับความสูง em ของพวกเขา แต่ก็ยังไม่ได้บอกขนาดของตัวอักษรใหญ่ (cap-height) หรือขนาดของการพูดo(x-height หรือ midline) เนื่องจากสิ่งเหล่านี้อาจแตกต่างกัน อิสระระหว่างอักษรในความสัมพันธ์กับความสูงขึ้น ภายในตระกูลฟอนต์เหล่านี้มักจะสอดคล้องกัน ตัวอย่างเช่น Times New Roman Bold และ Times New Roman Regular จะมีขนาดอักขระที่เหมือนกันสำหรับขนาด em ที่เหมือนกันซึ่งควรรวมถึง ascenders, descenders, cap-height และ x-height

ลองพิมพ์ด้วยอักขระแถบแนวตั้ง ('|') แล้ววัดค่า หากฉันทำซ้ำสถานการณ์ของคุณอย่างถูกต้องและการลดรอยหยักของคุณไม่เบลอมากเกินไปก็ควรเป็น 22px

22px แสดงถึงความสูงของบล็อกประเภท แต่ตัวละครแต่ละตัวเติมบล็อกแตกต่างกัน A 'g' หรือ 'q' จะครอบครองพื้นที่ด้านล่างของ 22px ในขณะที่ตัวพิมพ์ใหญ่และตัวพิมพ์เล็กเช่น 'b' หรือ 'd' จะครอบครองส่วนบน '|' เป็นหนึ่งในเพียง (ถ้าไม่เท่านั้น) ตัวละครที่ทั้งหมดจะเติมช่องว่าง 22px

ฉันไม่รู้เกี่ยวกับวิธีเปรียบเทียบกับการตั้งค่า CSS ของคุณ แต่นั่นอธิบายถึงวิธี Photoshop ตีความความสูงของข้อความ

คุณแน่ใจหรือว่าแบบอักษรของคุณวัดเป็นพิกเซล แบบอักษรเวลาส่วนใหญ่วัดเป็นคะแนน จุดคือ 1/72 ของนิ้ว ดังนั้นแบบอักษร 40 pt จึงสูง 40/72 "หรือ 5/9" นักเตะคือสิ่งนั้นคือมิติจากด้านบนของตัวขึ้นบนตัวอักษรสูงถึงด้านล่างของตัวเรียงในตัวอักษรที่ห้อยอยู่ใต้เส้นฐาน นั่นเป็นสาเหตุที่บางครั้งใช้ความสูง x ดังกล่าวข้างต้น นั่นคือความสูงของตัวอักษรตัวพิมพ์เล็กที่ไม่ติดขึ้นหรือลง

ไม่ว่าจะด้วยวิธีใดการวัดก็ไม่แน่นอน คุณเพียงแค่ต้องทำการวัดและคำนวณ (และ / หรือการทดลองและข้อผิดพลาด) เพื่อให้บรรลุสิ่งที่คุณต้องการ