Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

Typography: เมื่อไหร่ควรใช้ Bold vs Italic?

ใน Typography มี emphasis techniques หลายอย่าง italic และ bold เป็น common สุด Italic และ bold เป็น font variations ต่างๆ ของ original typeface design มาดูว่าเมื่อไหร่ควรใช้ italic หรือ bold และควรใช้ทั้งคู่ใน document เดียวกันไหม

Text ในบทความนี้ใช้ typeface Alegreya regular font-weight CSS default font-weight property = 400 (regular)

  • Bold font-weight = regular font style แต่ thicker letters
  • Italic font = left-to-right slanted version ของ regular font
  • Bold italic = slanted & thicker version

Set font-weight to bold in CSS:

p { font-weight: bold; }

ใช้ numeric values ได้ 700 มักเป็น bold

HTML tags: wrap words ที่ต้องการ emphasize ด้วย <strong> tags:

<strong>Text here</strong>

Set font-style to italic in CSS:

p { font-style: italic; }

HTML tags: wrap words ที่ต้องการ emphasize ด้วย <em> tags:

<em>Text here</em>

Set bold-italic in CSS:

p { font-style: italic; font-weight: bold; /*or 700*/ }

HTML bold-italic: wrap words ดังนี้

<strong><em>Text here</em></strong>

Side-by-side comparison: regular, bold, italic, bold-italic:

Text Text Text Text


When to use Italic vs Bold

School of thought 1: italic และ bold ใช้ emphasize ส่วนของ text block ควรใช้แค่ตัวหนึ่ง ใน text block เดียวกัน School of thought 2: italic สำหรับ mild emphasis bold สำหรับ strong emphasis

ผมว่าขึ้นอยู่กับ typeface (font-family) เพราะ emphasis level ของ bold หรือ italic จะ vary significantly จาก typeface ไป typeface

Typeface designs บางแบบ โดยเฉพาะ sans-serif มี italics อ่อน weak = hardly notice slanted/tilted ไมทำงานเป็น emphasis tool ถ้า typeface มี weak italic ใช้ bold

Typeface designs บางแบบ โดยเฉพาะ serif มี italics แข็งแรง noticeable เกือบเท่า bold font ในกรณีนี้ตัดสินใจเอง อยาก simple ใช้ หนึ่ง emphasis style ใน text block เดียวกัน กันสับสน reader

ถ้า typeface มี strong italic แต่ stronger bold ชัดเจน ใช้ italics สำหรับ mild emphasis bold สำหรับ strong emphasis ตัวอย่าง typeface นี้ = Alegreya (ที่คุณอ่านอยู่) สังเกต italic text ในย่อหน้านี้ noticeable แต่ไม่ถึง bold

Where ever มี pixels มากที่สุด ตาจะไปถึงก่อน นั่นคือ bold ด้วย thicker letter-strokes มักเป็น best option สำหรับ strong emphasis ในขณะที่ (well-designed) italics work well สำหรับ mild emphasis

When to use Bold-Italic?

บางครั้งอยาก combine bold และ italic extra-emphasize important text มี bold-italic

ความคิดเห็น: bold-italic fonts เป็น artistic choice มากกว่า practical design choice ถ้า typeface มี beautiful bold-italic font work good ใน documents ใช้ได้ แต่ลอง individual bold และ italic fonts ก่อน bold-italic อาจ too much of a good thing (too emphasized)

Alegreya has a beautiful italic

Alegreya has a beautiful bold

Alegreya has a beautiful bold-italic

ผมใช้ bold-italics sparingly สำหรับ one-off text elements

Explore Your Typeface's Options

ต้อง test typeface font variations จาก italic ถึง bold ก่อนตัดสินใจ จะได้ว่า some typefaces มี font-weights มาก "hair" (thinnest) ถึง "black" (thickest) สำหรับ context ของคุณ "medium" font-weight อาจดีที่สุด หรือ "extra-bold" Test, test, test!

ผมมักใช้ italic สำหรับ mild emphasis บน single words บางครั้ง bold บน multiple words เช่น if I strongly want to highlight part of a sentence พบว่า style นี้ work well สำหรับ Alegreya — แตะอาจไม่ใช่สำหรับของคุณ

ไม่เคยใช้ bold และ italic interchangeably — มีเหตุผล และ stay consistent กับ chosen style ใน document เดียวกัน ไม่ว่าจะทำอะไร จำว่า less emphasis = always better

ถ้า emphasize ทุกอย่าง = ไม่ได้ emphasize อะไรเลย