Em / En (หน่วยวรรณศิลป์)
Em: ความกว้างเท่ากับขนาดฟอนต์ En: ครึ่งหนึ่งของ em ใช้กำหนดความกว้างของ em dash, em space, en space และหน่วย CSS (1em, 0.5em)
What are Em and En?
The em and en are typographic units of measurement that describe relative sizes and spacings within a font. Unlike absolute units (pixels, points, millimeters), the em and en are proportional — they scale with the font size, making them fundamental to responsive and harmonious typography.
An em is equal to the current font size. If you're setting text at 16px, 1 em = 16px. If the font size is 24pt, 1 em = 24pt. The name comes from the width of the uppercase letter "M," which was traditionally a square in metal type (meaning it was as wide as it was tall — one em square). Modern typefaces don't always make "M" exactly one em wide, but the unit retains the name.
An en is exactly half an em. Historically, the letter "N" was half the width of "M," hence the name.
Em and En in Typography
These units govern the width of key typographic elements:
| Element | Width | Unicode |
|---|---|---|
| Em dash | 1 em | U+2014 — |
| En dash | 1 en (½ em) | U+2013 – |
| Em space | 1 em | U+2003 |
| En space | 1 en | U+2002 |
| Thin space | ⅕ em | U+2009 |
| Hair space | 1/24 em (approx) | U+200A |
| Figure space | Width of a digit | U+2007 |
The em dash is named because it is (approximately) one em wide. The en dash is named because it is one en wide. This relationship holds even as font sizes change — at 8pt, an em dash is narrower than at 36pt, but it always fits within its font's em square.
Em in CSS
In CSS, the em unit is relative to the current element's font size:
h1 {
font-size: 2rem; /* 2× root em (absolute) */
margin-bottom: 0.5em; /* 0.5 × h1's own font-size */
padding: 0.25em 0.5em; /* relative to h1's font-size */
}
This creates a critical distinction from rem (root em), which is always relative to the <html> element's font size:
/* If html { font-size: 16px; } */
.parent { font-size: 20px; }
.child {
font-size: 1em; /* = 20px (parent's size) */
font-size: 1rem; /* = 16px (root size) */
}
Em in Other Contexts
CSS text-indent and letter-spacing: using em ensures the indent or spacing scales proportionally with font size changes.
Metal type: The em was a physical unit — the square body of a type block. Compositors used em quads (full em) and en quads (half em) as blank spacing pieces inserted between words and at line ends. This physical heritage is why the em is so fundamental: it was the basic unit of the typesetter's trade.
Print design: InDesign and Illustrator display em values in many spacing controls. An indent of 1 em in a 12pt paragraph = 12 points of indent.
Quick Facts
| Property | Value |
|---|---|
| 1 em | Equals current font size |
| 1 en | Equals ½ em |
| Origin of "em" | Width of capital M in metal type |
| Origin of "en" | Width of capital N (≈ half M) in metal type |
| Em dash Unicode | U+2014 |
| En dash Unicode | U+2013 |
| Em space Unicode | U+2003 |
| CSS em unit | Relative to current element's font-size |
| CSS rem unit | Relative to root element's font-size |
คำศัพท์ที่เกี่ยวข้อง
เพิ่มเติมใน การออกแบบตัวอักษร
CSS @font-face descriptor specifying which Unicode code points a font should cover. …
The mechanism by which a rendering engine substitutes glyphs from a secondary …
Modern font format developed by Microsoft and Adobe supporting up to 65,535 …
ทิศทางของข้อความที่อักขระไหลจากขวาไปซ้าย ใช้กับภาษาอาหรับ ฮีบรู Thaana และอักษรอื่นๆ ต้องใช้อัลกอริทึม Bidirectional เพื่อแสดงผลอย่างถูกต้อง
Fonts downloaded by the browser to render text, declared via CSS @font-face. …
การปรับระยะห่างระหว่างคู่อักขระเฉพาะเพื่อความสวยงามทางสายตา (เช่น AV, To, LT) เป็นคุณสมบัติของฟอนต์ ไม่ใช่แนวคิด Unicode แต่มีผลต่อการแสดงผลข้อความ Unicode
U+2026 HORIZONTAL ELLIPSIS (…) อักขระเดี่ยวที่แทนที่จุดสามจุด ถูกต้องตามหลักการพิมพ์และนับเป็น 1 อักขระแทนที่จะเป็น 3
U+00A0 ช่องว่างที่ป้องกันการขึ้นบรรทัดใหม่ที่ตำแหน่งนั้น HTML: ใช้ระหว่างตัวเลขและหน่วย (100 km) ในชื่อเฉพาะ (Mr. Smith) และหลังคำย่อ
รูปแบบตัวพิมพ์ใหญ่ที่มีความสูงเท่ากับตัวพิมพ์เล็ก CSS: font-variant: small-caps Unicode ยังมีตัวอักษรพิมพ์ใหญ่ขนาดเล็กจริงใน Latin Extended (ᴀ–ᴢ)
อักขระตั้งแต่สองตัวขึ้นไปที่รวมเข้าเป็น glyph เดียว อาจเป็นการเชื่อมแบบตัวพิมพ์ (fi → fi ผ่าน OpenType) หรืออักขระ Unicode (fi …