Chapter 5 Web Typography Typography n การพมพ ตวพมพ วชาทำ ตวพมพ Letter ตวอกษร Type ID: 782829
Download The PPT/PDF document "บทที่ 5 ตัวพิม..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Slide2บทที่ 5
ตัวพิมพ์/ตัวอักษรที่ใช้บนเว็บChapter 5 Web Typography
Typography
[n
.]
:
การพิมพ์, ตัวพิมพ์, วิชาทำ
ตัวพิมพ์
Letter
:
ตัวอักษร
Type
:
ตัวพิมพ์
Font
:
ชุดตัวพิมพ์ที่มีขนาดและลักษณะเป็นชุด
เดียวกัน
ใน
แง่ของการพิมพ์ตัวพิมพ์
Type Face
คือ ชื่อของตัวพิมพ์ เช่น
Times
New
Roman หรือ Futura
และ
Font
จะสื่อถึงแบบอักษรและในทางด้านการออกแบบเว็บ สามารใช้สองคำสื่อแทนกันได้
Slide31. หลักการออกแบบตัวพิมพ์
Type Design Principlesตัวอักษร/ตัวพิมพ์นั้น มีความยืดหยุ่นสูง สามารถแสดงถึงอารมณ์ ระดับและโครงสร้าง ได้
Slide41. หลักการออกแบบตัวพิมพ์
Type Design Principles
Slide51. หลักการออกแบบตัวพิมพ์
Type Design Principles
Slide6ANXIOUS:
วิตกกังวล
Slide71. หลักการออกแบบตัวพิมพ์
Type Design Principlesขนาดของตัวอักษร/ ตัวพิมพ์ มีผลต่อความรู้สึกที่จะสื่อสารเช่นกัน
Slide81. หลักการออกแบบตัวพิมพ์
Type Design Principlesผู้ใช้ในปัจจุบันเข้าใช้งานเว็บผ่านอุปกรณ์สื่อสารขนาดเล็ก ยิ่งทำให้ตัวอักษร/ตัวพิมพ์ มีความสำคัญมากขึ้น
Slide91. หลักการออกแบบตัวพิมพ์
Type Design Principlesผู้ใช้ในปัจจุบันเข้าใช้งานเว็บผ่านอุปกรณ์สื่อสารขนาดเล็ก ยิ่งทำให้ตัวอักษร/ตัวพิมพ์ มีความสำคัญ
มากขึ้น
เพื่อปรับอักษรบนหน้าเว็บให้
พอดี
กับสมาร์ทโฟน โดยข้อมูลที่เป็นภาพจะมักจะถูกซ่อน
หรือ
ลดขนาดลง เพื่อให้พื้นที่ส่วนใหญ่แสดงข้อความได้ชัดเจน
Slide101. หลักการออกแบบตัวพิมพ์
Type Design Principles
ตัวอักษร/สี ที่แตกต่าง
เพื่อสร้างความโดดเด่น
(Distinctive Font)
ใช้ตัวอักษรที่สะอาด (
Clean)
อ่านง่าย (
Legible font)
ร่วมกับการพาดหัว
(Descriptive headline)
Slide111. หลักการออกแบบตัวพิมพ์
Type Design Principlesหลักในการใช้แบบอักษร/ตัวพิมพ์ บนเว็บไซต์ใช้แบบอักษรและขนาดของอักษรให้มีความหลากหลายน้อยที่สุด ใช้
แบบอักษร
ที่สามารถใช้งานได้บนเครื่อง/อุปกรณ์ที่หลากหลาย และไม่ละเมิดลิขสิทธิ์แบบอักษรของผู้อื่น
ใช้การออกแบบอักษรเพื่อ
ความ
ชัดเจน
หลีกเลี่ยง
การใช้ข้อความเป็นกราฟิก
Slide121. หลักการออกแบบตัวพิมพ์
Type Design Principles
ใช้แบบอักษรและขนาดของอักษรให้มีความหลากหลายน้อยที่สุด
Slide131. หลักการออกแบบตัวพิมพ์
Type Design Principlesใช้แบบอักษรที่สามารถใช้งานได้บนเครื่อง/อุปกรณ์ที่หลากหลาย และไม่ละเมิดลิขสิทธิ์/กรรมสิทธิ์แบบ
อักษรของผู้อื่น
Slide141. หลักการออกแบบตัวพิมพ์
Type Design Principlesใช้การออกแบบอักษรเพื่อความชัดเจน และสามารถแสดงผลบนเว็บเบราเซอร์ได้หลากหลาย
Slide151. หลักการออกแบบตัวพิมพ์
Type Design Principlesหลีกเลี่ยงการใช้ข้อความที่เป็นกราฟิก
Slide162.
หน่วยมาตรวัดในสไตล์ชีต (Style Sheet)CSS Measurement Units
ชื่อหน่วย
ตัวย่อ
คำอธิบายหน่วย
คือ หน่วยแบบกำหนดตายตัว
(
Fixed)
Slide172.
หน่วยมาตรวัดในสไตล์ชีต (Style Sheet)CSS Measurement Units
คือ หน่วยแบบแปรผัน
(Flexible/Relative)
Slide182.
หน่วยมาตรวัดในสไตล์ชีต (Style Sheet)CSS Measurement Unitsการกำหนดขนาดโดยใช้ em นั้นจะเป็นการกำหนดแบบแปรผัน (Relative)
กล่าวคือเมื่อเรากำหนดขนาดของข้อความด้วย
em
ผู้ใช้งาน
ก็จะสามารถปรับลดขนาดของข้อความได้ด้วยฟังก์ชั่นที่มีอยู่ใน
Browser
ซึ่ง
การกำหนดขนาดแบบ
em
นั้น
จะคิดจากค่าเดิมของ
Element
ที่เป็น
Parent
ที่ใกล้กับมันมากที่สุด หรือค่าเริ่มต้นที่แต่ละ
Browser
กำหนด
ซึ่ง
โดยส่วนใหญ่แล้ว ตัวอักษรเริ่มต้นจะมีขนาดเท่ากับ 16
px
โดย 1
em
จะเท่ากับ 100% หรือคิดเป็น 1เท่า ของค่าเริ่มต้นนั่นเอง
เช่น
body {font-size: 62.5%; } กำหนดให้ค่าเริ่มต้น 10px
หากไม่กำหนดจะเท่ากับ 16px
ซึ่งก็คือค่าเริ่มต้น (Default)
ของ
Web Browser
h1
{font-size: 2.4em; }
24px
p
{font-size: 1.4em;
}
14px
Slide192.
หน่วยมาตรวัดในสไตล์ชีต (Style Sheet)CSS Measurement Unitsแต่ในการใช้หน่วยแบบ em นั้นก็ยังมีข้อเสียอยู่บ้าง กล่าวคือในบาง Browser ยังมีปัญหาซึ่งจะแสดงผลออกมาไม่เหมือนกัน เล็กบ้าง ใหญ่บ้าง ซึ่งไม่เหมาะกับการอ่าน และอย่าลืมว่าการใช้งาน
em
นั้นจะทำการกำหนดขนาดเป็น 1 เท่าของ
Element
ที่เป็น
Parent
ที่ใกล้กับมันเสมอ
เช่น
body {font-size: 62.5%; }
.content {font-size:1.6em; }
อยาก
ได้ 16
px
แสดงผล 16
px
ได้ถูกต้อง
(
10
x1.6=16
)
.content h1 {font-size:2.4em; }
อยาก
ได้ 24px แต่กลับแสดงผล 38.4px
(
16x2.4=38.4
)
.
content p {font-size:1.6em; }
อยาก
ได้ 16
px
แต่กลับแสดงผล 25.6
px
(16x1.6=25.6)
Font
ปกติขนาด 16
px
แต่กำหนดให้เหลือเพียง 62.5
%
ซึ่งเทียบได้เท่ากับ 10
px (16*62.5/100)
Relative
Relative
Relative
Slide202.
หน่วยมาตรวัดในสไตล์ชีต (Style Sheet)CSS Measurement Unitsจากปัญหาในการกำหนดขนาดด้วย em นั้น ใน CSS3 จึงออกหน่วยใหม่นั้นก็คือ
rem (
Root
em
)
เพิ่ม
เข้ามา โดยหน่วย
rem
นี้ จะมีคุณสมบัติเหมือนกับหน่วย
em
แทบทุกประการ เพียงแต่
rem
จะเทียบขนาดกับ
Root Element
ซึ่งก็คือ
HTML
เสมอครับ จึงทำให้เราได้ขนาดที่ต้องการซึ่งก็คือ 1 เท่าของ
Root Element
นั้นเอง
เช่น
html { font-size:
62.5%
; }
เทียบเท่า
10px มาจาก 16px * 62.5/100body { font-size: 1.4rem; } 14px
มาจาก 10px * 1.4emh1 { font-size:
2.4rem; } 24px มาจาก 10
px *
2.4em
Slide212.
หน่วยมาตรวัดในสไตล์ชีต (Style Sheet)CSS Measurement Unitsดังนั้นในการเขียน CSS เพื่อกำหนดขนาดเราต้องคำนึงถึงข้อจำกัดตรงนี้ด้วย โดยสามารถแก้ไขปัญหาดังกล่าวโดยการกำหนดขนาดแบบ px (Pixel) ให้มันก่อนค่อยกำหนดแบบ
rem
เช่น
html { font-size: 62.5%; }
เทียบเท่า
10
px
มาจาก
16px * 62.5/100
body
{ font-size: 14px; font-size: 1.4rem; }
14px
h1 { font-size: 24px; font-size: 2.4rem; }
24px
Slide222.
หน่วยมาตรวัดในสไตล์ชีต (Style Sheet)CSS Measurement Units
Slide233.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Propertiesfont-familyfont-facefont-size
font-style
font-variant
font-weight
font (shorthand property)
1. <head>
2. <style>
3.
p {
4.
font-family
: sans-serif
;
5.
}
6. </style>
7. </head
>
คุณลักษณะที่ให้เรียกใช้
Properties
ตัวอย่างการกำหนด
CSS
Slide243.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Propertiesการกำหนดสกุลอักษร (Specifying Font Family)
ในการให้เว็บเพจแสดงผลตัวอักษรให้มีลักษณะเป็นไปตามที่ผู้ออกแบบได้ออกแบบไว้นั้น จำต้องมีการกำหนดสกุลให้แก่อักษร เพื่อทราบว่าลักษณะอักษรนั้นจะมีรูปแบบอย่างไร การกำหนดสกุลอักษร
(font family)
มีรูปแบบพื้นฐาน ดังนี้
font-family
: sans-serif;
Slide253.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties1. การกำหนดสกุลอักษร (Specifying Font Family)
-ต่อ-
หาก
font
family
มีชื่อหลายคำ ให้กำหนด
“”
ครอบ
เช่น
“Times
New
Roman”
และ
หากมีการกำหนด
font family
ลำดับรอง ให้ขั้นด้วย เครื่องหมาย
Comma
more than one word
Slide263.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ-
การกำหนดสกุลอักษร
โดยใช้ชื่อสกุลสามัญ
(generic names)
ซึ่งชื่อสกุลสามัญ คือ
font family
ที่สามารถนำมาใช้ได้ทันที และเป็นที่ทราบโดยทั่วกันว่าจะสามารถแสดงผลบนเว็บเบราเซอร์ได้หลากหลาย
Serif
แปลว่า เส้นเล็กๆ ของตัวพิมพ์ที่ทำให้เด่นชัด
Sans
แปลว่า ปราศจาก
Sans-Serif
แปลว่า ปราศจากเส้นเล็กๆของตัวพิมพ์
Slide273.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font PropertiesSerif 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.
Slide283.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties
Slide293.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties1. การกำหนดสกุลอักษร (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; }
Slide303.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties2. การกำหนดสกุลอักษรจากภายนอก (@Font-Face Rule) @font-face rule
ช่วยให้สามารถนำ
Font
จากภายนอกแสดงผลบนเว็บเบราเซอร์ได้
คุณสมบัติของ
font-face
ช่วยให้สามารถกำหนดชื่อสกุลและตำแหน่งสกุลอักษรได้ โดยสกุลอักษรที่จะนำมาใช้นั้น จะต้องเป็นนามสกุล
TrueType
format (TTF
)
Slide313.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties2. การกำหนดสกุลอักษรจากภายนอก (@Font-Face Rule) –ต่อ-
@
font-face
{ font-family
:
generica
;
src
:
url
(http://www.generic.com/fonts/generica.ttf
)
}
h1 { font-family
:
generica
, serif
;
}
กำหนดชื่อสกุล
Font
ขึ้นเอง
ตำแหน่งสกุลอักษร นามสกุล
ttf
การเรียกใช้
Slide323.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties3. การระบุขนาด (Specifying Font Size)
ตัวอย่างการระบุขนาดแบบ
em
และ
px
blockquote
{ font-family
:
arial
, sans-serif; font-size: 1.5em
; }
body
{ font-family
:
arial
, sans-serif; font-size:
16px; }
Slide333.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties3. การระบุขนาด (Specifying Font Size)
ตัวอย่างการระบุขนาดแบบ
Absolute Font Size
Keywords
xx-small
x-small
small
medium
large
x-large
xx-large
Slide343.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties4. การกำหนดสกุลอักษรแบบ Class .
note
{ font-style
: italic
; }
<p class="
note
">A note to the reader:</p>
CSS
HTML
Slide353.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties5. การกำหนดความหลากหลายของลักษณะ Font (Specifying Font Variant)
–
ต่อ-
Slide363.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties5. การกำหนดความหลากหลายของลักษณะ Font (Specifying Font Variant)
–
ต่อ-
Slide373.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties5. การกำหนดความหลากหลายของลักษณะ 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
Slide383.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property)ตัวอย่าง
p {
font
:
12pt
arial
, sans-
serif
;
}
h1 {
font
:
2em sans-serif
; }
Slide393.
การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS Font Properties6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property)ตัวอย่าง
p
{ font-weight
: bold;
font-size
: .85em;
line-height
: 1em;
font-family
:
arial
;
}
p
{ font
: bold .85em/1em arial
; }
Slide404.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiestext-indent
text-align
line-height
vertical-align
letter-spacing
word-spacing
text-decoration
text-transform
text-shadow
Slide414.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiestext-indent = การเยื้อง
p {text-indent: 2em;}
blockquote
{text-indent: −2em;}
Slide424.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiestext-align = ตำแหน่งข้อความในแนวนอน
p {text-align:
justify
;}
Slide434.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiesline-height = ระยะช่องไฟระหว่างบรรทัด
p {line-height: 150%;}
Slide444.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiesvertical-align = ตำแหน่งข้อความในแนวตั้ง
Slide454.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiesvertical-align = ตำแหน่งข้อความในแนวตั้ง
ชื่อคลาสหรืออิลิเม้นท์
{vertical-align: ________;}
Slide464.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiesletter-spacing = การกระจายตัวของข้อความ
ชื่อคลาสหรืออิลิเม้นท์
{ letter-spacing
:
_____
px
; }
Slide474.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiesword-spacing = การกระจายตัวของคำ
ชื่อคลาสหรืออิลิเม้นท์
{
word-spacing:
______
px
;}
Slide484.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiestext-decorationการแต่งข้อความ
ชื่อคลาสหรืออิลิเม้นท์
{text-decoration:
_________;}
Slide494.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiestext-transformการปรับอักษร
ชื่อคลาสหรืออิลิเม้นท์
{text-transform:
_________;}
Capitalize
Uppercase
Lowercase
none
Slide504.
การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษรUsing the CSS TEXT Propertiestext-shadow = เงา
ชื่อคลาสหรืออิลิเม้นท์
{text-shadow:
___
px
___
px
___
px
#____;}