บทที่ 5 ตัวพิมพ์/ตัวอักษรที่ใช้บนเว็บ Chapter 5 Web Typography

บทที่ 5 ตัวพิมพ์/ตัวอักษรที่ใช้บนเว็บ Chapter 5 Web Typography
Typography [n.] : การพิมพ์, ตัวพิมพ์, วิชาทำตัวพิมพ์ Letter : ตัวอักษร Type : ตัวพิมพ์ Font : ชุดตัวพิมพ์ที่มีขนาดและลักษณะเป็นชุดเดียวกัน ในแง่ของการพิมพ์ตัวพิมพ์ Type Face คือ ชื่อของตัวพิมพ์ เช่น Times New Roman หรือ Futura และ Font จะสื่อถึงแบบอักษรและในทางด้านการออกแบบเว็บ สามารใช้สองคำสื่อแทนกันได้

1. หลักการออกแบบตัวพิมพ์ Type Design Principles
ตัวอักษร/ตัวพิมพ์นั้น มีความยืดหยุ่นสูง สามารถแสดงถึงอารมณ์ ระดับและโครงสร้าง ได้

ANXIOUS: วิตกกังวล

ขนาดของตัวอักษร/ ตัวพิมพ์ มีผลต่อความรู้สึกที่จะสื่อสารเช่นกัน

ผู้ใช้ในปัจจุบันเข้าใช้งานเว็บผ่านอุปกรณ์สื่อสารขนาดเล็ก ยิ่งทำให้ตัวอักษร/ตัวพิมพ์ มีความสำคัญมากขึ้น

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

ใช้ตัวอักษรที่สะอาด (Clean) อ่านง่าย (Legible font) ร่วมกับการพาดหัว (Descriptive headline) ตัวอักษร/สี ที่แตกต่าง เพื่อสร้างความโดดเด่น (Distinctive Font)

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

ใช้แบบอักษรและขนาดของอักษรให้มีความหลากหลายน้อยที่สุด

ใช้แบบอักษรที่สามารถใช้งานได้บนเครื่อง/อุปกรณ์ที่หลากหลาย และไม่ละเมิดลิขสิทธิ์/กรรมสิทธิ์แบบอักษรของผู้อื่น

ใช้การออกแบบอักษรเพื่อความชัดเจน และสามารถแสดงผลบน เว็บเบราเซอร์ได้หลากหลาย

หลีกเลี่ยงการใช้ข้อความที่เป็นกราฟิก

2. หน่วยมาตรวัดในสไตล์ชีต (Style Sheet) CSS Measurement Units
ชื่อหน่วย ตัวย่อ คำอธิบายหน่วย คือ หน่วยแบบกำหนดตายตัว (Fixed)

คือ หน่วยแบบแปรผัน (Flexible/Relative)

การกำหนดขนาดโดยใช้ em นั้นจะเป็นการกำหนดแบบแปรผัน (Relative) กล่าวคือเมื่อเรากำหนดขนาดของข้อความด้วย em ผู้ใช้งานก็จะสามารถปรับลดขนาดของข้อความได้ด้วยฟังก์ชั่นที่มีอยู่ใน Browser ซึ่งการกำหนดขนาดแบบ em นั้นจะคิดจากค่าเดิมของ Element ที่เป็น Parent ที่ใกล้กับมันมากที่สุด หรือค่าเริ่มต้นที่แต่ละ Browser กำหนด ซึ่งโดยส่วนใหญ่แล้ว ตัวอักษรเริ่มต้นจะมีขนาดเท่ากับ 16px โดย 1em จะเท่ากับ 100% หรือคิดเป็น 1เท่า ของค่าเริ่มต้นนั่นเอง เช่น body {font-size: 62.5%; } กำหนดให้ค่าเริ่มต้น 10px หากไม่กำหนดจะเท่ากับ 16px ซึ่งก็คือค่าเริ่มต้น (Default) ของ Web Browser h1 {font-size: 2.4em; } 24px p {font-size: 1.4em; } px

แต่ในการใช้หน่วยแบบ em นั้นก็ยังมีข้อเสียอยู่บ้าง กล่าวคือในบาง Browser ยังมีปัญหาซึ่งจะแสดงผลออกมาไม่เหมือนกัน เล็กบ้าง ใหญ่บ้าง ซึ่งไม่เหมาะกับการอ่าน และอย่าลืมว่าการใช้งาน em นั้นจะทำการกำหนดขนาดเป็น 1 เท่าของ Element ที่เป็น Parent ที่ใกล้กับมันเสมอ เช่น body {font-size: 62.5%; } .content {font-size:1.6em; } อยากได้ 16px แสดงผล 16px ได้ถูกต้อง (10x1.6=16) .content h1 {font-size:2.4em; } อยากได้ 24px แต่กลับแสดงผล 38.4px (16x2.4=38.4) .content p {font-size:1.6em; } อยากได้ 16px แต่กลับแสดงผล 25.6px (16x1.6=25.6) Font ปกติขนาด 16px แต่กำหนดให้เหลือเพียง 62.5% ซึ่งเทียบได้เท่ากับ 10 px (16*62.5/100) Relative Relative Relative

จากปัญหาในการกำหนดขนาดด้วย em นั้น ใน CSS3 จึงออกหน่วยใหม่นั้นก็คือ rem (Root em) เพิ่มเข้ามา โดยหน่วย rem นี้ จะมีคุณสมบัติเหมือนกับหน่วย em แทบทุกประการ เพียงแต่ rem จะเทียบขนาดกับ Root Element ซึ่งก็คือ HTML เสมอครับ จึงทำให้เราได้ขนาดที่ต้องการซึ่งก็คือ 1 เท่าของ Root Element นั้นเอง เช่น html { font-size: 62.5%; } เทียบเท่า 10px มาจาก 16px * 62.5/100 body { font-size: 1.4rem; } 14px มาจาก 10px * 1.4em h1 { font-size: 2.4rem; } 24px มาจาก 10px * 2.4em

ดังนั้นในการเขียน CSS เพื่อกำหนดขนาดเราต้องคำนึงถึงข้อจำกัดตรงนี้ด้วย โดยสามารถแก้ไขปัญหาดังกล่าวโดยการกำหนดขนาดแบบ px (Pixel) ให้มันก่อนค่อยกำหนดแบบ rem เช่น html { font-size: 62.5%; } เทียบเท่า 10px มาจาก 16px * 62.5/100 body { font-size: 14px; font-size: 1.4rem; } 14px h1 { font-size: 24px; font-size: 2.4rem; } px

คุณลักษณะที่ให้เรียกใช้ Properties
3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties คุณลักษณะที่ให้เรียกใช้ Properties ตัวอย่างการกำหนด CSS font-family font-face font-size font-style font-variant font-weight font (shorthand property) 1. <head> <style> p { font-family: sans-serif; } 6. </style> 7. </head>

font-family: sans-serif;
3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties การกำหนดสกุลอักษร (Specifying Font Family) ในการให้เว็บเพจแสดงผลตัวอักษรให้มีลักษณะเป็นไปตามที่ผู้ออกแบบได้ออกแบบไว้นั้น จำต้องมีการกำหนดสกุลให้แก่อักษร เพื่อทราบว่าลักษณะอักษรนั้นจะมีรูปแบบอย่างไร การกำหนดสกุลอักษร (font family) มีรูปแบบพื้นฐาน ดังนี้ font-family: sans-serif;

1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ-
3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ- หาก font family มีชื่อหลายคำ ให้กำหนด “” ครอบ เช่น “Times New Roman” และ หากมีการกำหนด font family ลำดับรอง ให้ขั้นด้วย เครื่องหมาย Comma more than one word

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties
1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ- การกำหนดสกุลอักษร โดยใช้ชื่อสกุลสามัญ (generic names) ซึ่งชื่อสกุลสามัญ คือ font family ที่สามารถนำมาใช้ได้ทันที และเป็นที่ทราบโดยทั่วกันว่าจะสามารถแสดงผลบนเว็บเบราเซอร์ได้หลากหลาย Serif แปลว่า เส้นเล็กๆ ของตัวพิมพ์ที่ทำให้เด่นชัด Sans แปลว่า ปราศจาก Sans-Serif แปลว่า ปราศจากเส้นเล็กๆของตัวพิมพ์

Serif fonts are the traditional letter form, with strokes (or serifs) that finish off the top and bottom of the letter. The most common serif font is Times. Sans-serif fonts have no serifs. They are block letters. The most common sans-serif fonts are Helvetica and Arial. Monospace fonts are fixed-width fonts. Every letter has the same horizontal width. Monospace is commonly used to mimic typewritten text or for programming code. The style rules and HTML code in this book are printed in Courier, a monospace font. Cursive fonts are designed to resemble handwriting. This font is often displayed as Comic Sans, but be aware that this choice can provide inconsistent results. Fantasy fonts are primarily decorative. Fantasy is not a widely used choice.

1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ-
3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ- ตัวอย่าง การกำหนดสกุลอักษรสามัญ Generic Font Families p { font-family: sans-serif; } การระบุเจาะจงสกุลอักษรด้วย “” Specific Font Families p { font-family: "lucida console"; } การระบุสกุลอักษรแบบลำดับ Font Fallbacks p { font-family: arial, helvetica; }

2. การกำหนดสกุลอักษรจากภายนอก rule ช่วยให้สามารถนำ Font จากภายนอกแสดงผลบนเว็บเบราเซอร์ได้ คุณสมบัติของ font-face ช่วยให้สามารถกำหนดชื่อสกุลและตำแหน่งสกุลอักษรได้ โดยสกุลอักษรที่จะนำมาใช้นั้น จะต้องเป็นนามสกุลTrueType format (TTF)

2. การกำหนดสกุลอักษรจากภายนอก (@Font-Face Rule) –ต่อ-
3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 2. การกำหนดสกุลอักษรจากภายนอก Rule) –ต่อ- @font-face { font-family: generica; src: url( } h1 { font-family: generica, serif; กำหนดชื่อสกุล Font ขึ้นเอง ตำแหน่งสกุลอักษร นามสกุล ttf การเรียกใช้

3. การระบุขนาด (Specifying Font Size) ตัวอย่างการระบุขนาดแบบ em และ px blockquote { font-family: arial, sans-serif; font-size: 1.5em; } body { font-family: arial, sans-serif; font-size: 16px; }

3. การระบุขนาด (Specifying Font Size) ตัวอย่างการระบุขนาดแบบ Absolute Font Size Keywords xx-small x-small small medium large x-large xx-large

4. การกำหนดสกุลอักษรแบบ Class .note { font-style: italic; } <p class="note">A note to the reader:</p> CSS HTML

5. การกำหนดความหลากหลายของลักษณะ Font (Specifying Font Variant) –ต่อ-

5. การกำหนดความหลากหลายของลักษณะ Font (Specifying Font Variant) –ต่อ- span.small { font-variant: small-caps } <p><span class="small">The type choices you make for your web site</span> provide the foundation for...</p> CSS HTML

6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property)
3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property) ตัวอย่าง p { font: 12pt arial, sans-serif; } h1 { font: 2em sans-serif; }

6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property)
3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property) ตัวอย่าง p { font-weight: bold; font-size: .85em; line-height: 1em; font-family: arial; } p { font: bold .85em/1em arial; }

4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties
text-indent text-align line-height vertical-align letter-spacing word-spacing text-decoration text-transform text-shadow

text-indent = การเยื้อง
4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-indent = การเยื้อง p {text-indent: 2em;} blockquote {text-indent: −2em;}

text-align = ตำแหน่งข้อความในแนวนอน
4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-align = ตำแหน่งข้อความในแนวนอน p {text-align: justify;}

line-height = ระยะช่องไฟระหว่างบรรทัด
4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties p {line-height: 150%;} line-height = ระยะช่องไฟระหว่างบรรทัด

vertical-align = ตำแหน่งข้อความในแนวตั้ง

vertical-align = ตำแหน่งข้อความในแนวตั้ง
4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties vertical-align = ตำแหน่งข้อความในแนวตั้ง ชื่อคลาสหรืออิลิเม้นท์ {vertical-align: ________;}

letter-spacing = การกระจายตัวของข้อความ
4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties letter-spacing = การกระจายตัวของข้อความ ชื่อคลาสหรืออิลิเม้นท์ { letter-spacing: _____px; }

word-spacing = การกระจายตัวของคำ
4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties word-spacing = การกระจายตัวของคำ ชื่อคลาสหรืออิลิเม้นท์ {word-spacing: ______px;}

text-decoration การแต่งข้อความ
4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-decoration การแต่งข้อความ ชื่อคลาสหรืออิลิเม้นท์ {text-decoration: _________;}

text-transform การปรับอักษร
4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-transform การปรับอักษร ชื่อคลาสหรืออิลิเม้นท์ {text-transform: _________;} Capitalize Uppercase Lowercase none

text-shadow = เงา ชื่อคลาสหรืออิลิเม้นท์ {text-shadow: ___px ___px ___px #____;}

บทที่ 5 ตัวพิมพ์/ตัวอักษรที่ใช้บนเว็บ Chapter 5 Web Typography

งานนำเสนอที่คล้ายกัน

งานนำเสนอเรื่อง: "บทที่ 5 ตัวพิมพ์/ตัวอักษรที่ใช้บนเว็บ Chapter 5 Web Typography"— ใบสำเนางานนำเสนอ:

งานนำเสนอที่คล้ายกัน

เรื่องโครงการ

การติดต่อกลับ

เข้าสู่ระบบ

ลงทะเบียนผ่านเครือข่ายสังคม:

บทที่ 5 ตัวพิมพ์/ตัวอักษรที่ใช้บนเว็บ Chapter 5 Web Typography

งานนำเสนอที่คล้ายกัน

งานนำเสนอเรื่อง: "บทที่ 5 ตัวพิมพ์/ตัวอักษรที่ใช้บนเว็บ Chapter 5 Web Typography"— ใบสำเนางานนำเสนอ:

งานนำเสนอที่คล้ายกัน

เรื่องโครงการ

การติดต่อกลับ