TypefacesEach typeface has a unique

Typefaces

Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of html, web authors had no control over typefaces (“fonts” in personal computer terminology). Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. Modern versions of html and css allow designers to specify typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one typeface may not format correctly in another.

In specifying typefaces you should choose from the resident default fonts for most operating systems. If you specify a font that is not on the user’s machine, the browser will display your pages using the user-specified default font. Bear in mind, too, that users can set their browser preferences to display all pages in their favorite font.

Legibility on-screen
Some typefaces are more legible than others on the screen. A traditional typeface such as Times Roman is considered one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Screen legibility is most influenced by the x-height (the height of a lowercase “x”) and the overall size of the typeface.

Adapted traditional typeface
Times New Roman is a good example of a traditional typeface that has been adapted for use on computer screens. A serif typeface like Times New Roman is about average in legibility on the computer screen and has a moderate x-height. Times New Roman is a good font to use in text-heavy documents that will probably be printed by readers rather than read from the screen. The compact letter size of Times New Roman also makes it a good choice if you need to pack a lot of words into a small space.

Designed for the screen
Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very robust compared to more traditional typefaces in the same point size. These screen fonts offer excellent legibility for web pages designed to be read directly from the screen. However, the exaggerated x-heights and heavy letterforms of Georgia and Verdana sometimes look massive when transferred to the high-resolution medium of paper.

Typefaces for other media
Much of our attention is focused on the screen version of our pages, but we also have control over how a page looks when printed on paper. Print offers a far richer palette of options when it comes to selecting a typeface; many more typefaces look good on paper than the relatively few that are readable and attractive on-screen. In contrast, there is no point specifying a typeface for handheld styling since most devices have only one font.

Choosing typefaces

The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Arial as a contrast for headlines. Various studies purport to show that serif type is more legible than sans serif type, and vice versa. You can truly judge type legibility only within the context of the situation—on the screen, on paper—as users will see your web page.

You may use either a variation of the serif font or a contrasting sans serif face for the display type. It is safest to use a single typographic family and vary its weight and size for display type and emphasis. If you choose to combine serif and sans serif faces, select fonts that are compatible, and don’t use more than two typefaces (one serif, one sans serif) on a page.

The most useful fonts that ship with the Apple Macintosh and Microsoft Windows operating systems are reproduced here, differentiated by their effectiveness on-screen and on paper. Remember that many Macintosh users who have installed Microsoft Office will have Windows fonts installed on their systems (fig. 8.9).

Examples of short text blocks of common screen and print fonts. The screen fonts include: Georgia, Lucida Bright, Verdana, Arial, and Trebuchet. The commonly used print fonts shown are: Times New Roman, Times, Arial, and Helvetica.
Figure 8.9 — Common Apple Macintosh and Microsoft Windows screen and print fonts.

Specifying typefaces
You can specify any typeface for your web pages, but many computers have only the default operating system fonts installed. If the typeface you specify is not available on the user’s computer, the browser will switch to the default font (generally Times New Roman or Times). To increase the chances that the reader will see your preferred typeface, you can specify multiple fonts for each style. The browser will check for the presence of each font (in the order given), so you can specify three or four alternates before the browser applies the default font, for example, “Verdana, Geneva, Arial, Helvetica.” As a last-ditch effort you can end your font declaration with a generic font designation such as “serif.” That way, if the browser cannot find any of the listed fonts, it will display the text in an available serif font:

p { font-family: "Times New Roman", Georgia, Times, serif }

Notice that multiword font names such as Times New Roman must appear within quotation marks in your specification. Also note in the font example below that although “Trebuchet” and “Trebuchet ms” are the same typeface, the exact name you specify in the font list matters. If you want both Macintosh and Windows users to see the typeface Trebuchet, then use both names in your font declaration:

p { font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif }

A good way to make sure that your type settings are functioning correctly is to set your browser’s default proportional font setting to something that is obviously different from your intended font. For example, set your browser’s default font to Courier if you are not using Courier in your document. When you view your page, anything that appears in Courier must not be marked up properly.

Type size

Scalable text is essential to the goals of universal usability. To ensure scalability, use relative units to control the typography—type size, margins and indents, leading—on the page. Use graphic text sparingly, and always offer a text equivalent. Text rendered to graphic form is no longer text but image and thus cannot be manipulated—enlarged, colored—as plain text can. Graphic text is also invisible to search engines, so without alternate text the most important words on your page may be invisible to search.

With css, designers have many methods for setting type size. We recommend setting the body text to the default text size defined in users’ browser settings and setting all text variants (such as headings, captions, and links) using relative units, such as ems or percentages. An em in the web context is the same as the font height, which makes it a relative unit and therefore flexible. For example, if the user-set default is 16 pixels, than a two-em text indent would be double, or 32 pixels. But if the user used the text zoom feature of the browser to change the text size to 18 pixels, the indent would change to 36 pixels to reflect the larger type size:

p { font-size: 1em; text-indent: 2em; }

As you might imagine, this flexibility can send page layouts into disarray. Most web page layouts are not designed with large type in mind. For example, fixed layouts that limit the text column to a specified width are typically designed to accommodate standard or small type. Indeed, at large type sizes a fixed-width column may contain only a few words, which makes the text awkward to read. For best results with resizable text, use a flexible layout that transforms gracefully to accommodate larger type sizes (fig. 8.10). (For more on fixed and flexible layouts, see chapter 7, Page Frameworks.)

ผลลัพธ์ (ไทย) 1:

Typefaces

แต่ละแบบตัวพิมพ์มีเสียงเฉพาะที่ควรเหมาะสมกลมกลืนระหว่างการไหลด้วยวาจา และการแสดงผลของเนื้อหา รุ่นแรกของ html ผู้เขียนเว็บได้ไม่สามารถควบคุม typefaces ("แบบอักษร" ในคำศัพท์ของคอมพิวเตอร์ส่วนบุคคล) แบบอักษรกำหนด โดยเบราว์เซอร์ เพื่อให้หน้าไม่ดูแบบอักษรใดที่ผู้ใช้ที่ระบุในการตั้งค่าเบราว์เซอร์ของเขา หรือเธอ Html และ css รุ่นทันสมัยให้นักออกแบบเพื่อระบุแบบตัวพิมพ์ นี้ไม่มีประโยชน์เหตุผลความงามแต่เนื่องจาก มีขนาดแตกต่างกันของ typefaces โครงร่างที่ถูกออกแบบอย่างพิถีพิถันโดยใช้แบบตัวพิมพ์ที่หนึ่งอาจไม่จัดรูปแบบอย่างถูกต้องอีก

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

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

แบบตัวพิมพ์แบบ Adapted
เวลาโรมันใหม่เป็นตัวอย่างที่ดีของแบบตัวพิมพ์แบบดั้งเดิมที่ได้รับการดัดแปลงสำหรับใช้งานบนหน้าจอคอมพิวเตอร์ แบบตัวพิมพ์ serif เช่น Times New Roman เป็นเกี่ยวกับค่าเฉลี่ยในการอ่านบนจอคอมพิวเตอร์ และมี x-height ปานกลาง เวลาโรมันใหม่เป็นแบบอักษรที่ดีที่จะใช้ในเอกสารข้อความหนักที่จะคงจะถูกพิมพ์ออกมาอ่าน แทนที่อ่านจากหน้าจอ ขนาดตัวอักษรขนาดกะทัดรัดของ Times New Roman ยังทำให้ทางเลือกที่ดีถ้าคุณต้องการแพ็คของคำเป็นมีขนาดเล็กพื้นที่

ออกแบบมาสำหรับหน้าจอ
Typefaces จอร์เจียและ Verdana ถูกออกแบบโดยเฉพาะสำหรับการอ่านบนหน้าจอคอมพิวเตอร์ พวกเขาได้พูดเกินจริง x-heights และมีประสิทธิภาพมากเมื่อเทียบกับ typefaces มากกว่าขนาดจุดเดียวกัน แบบอักษรเหล่านี้หน้าจอให้อ่านดีสำหรับหน้าเว็บที่ออกแบบมาให้สามารถอ่านได้โดยตรงจากหน้าจอ อย่างไรก็ตาม exaggerated x-heights และ letterforms หนักจอร์เจียและ Verdana บางครั้งดูยิ่งใหญ่เมื่อถูกโอนย้ายไปสื่อความละเอียดสูงของกระดาษ

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

เลือก typefaces

โครงร่างแบบเดิมมากที่สุดสำหรับการใช้ typefaces จะใช้หน้า serif เช่นจอร์เจียหรือ Times New Roman ตัวข้อความและหน้า sans serif เช่น Verdana หรือ Arial เป็นความคมชัดสำหรับพาดหัว ศึกษาต่าง ๆ purport เพื่อแสดงว่า ชนิด serif เป็นสามารถเข้าใจมากขึ้น กว่าชนิด sans serif และในทางกลับกัน คุณสามารถตัดสินอ่านชนิดเฉพาะในบริบทของสถานการณ์จริง — บนหน้าจอ บนกระดาษซึ่งผู้ใช้จะเห็นหน้าเว็บของคุณได้

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

แบบอักษรมีประโยชน์มากที่สุดที่มาพร้อมกับระบบปฏิบัติการ Microsoft Windows และ Apple Macintosh พิมพ์ได้ที่นี่ การณ์ประสิทธิภาพบนหน้าจอ และ บนกระดาษ จำได้ว่า ผู้ใช้ Macintosh หลายที่ได้ติดตั้ง Microsoft Office จะมีแบบอักษรของ Windows ที่ติดตั้งบนระบบของพวกเขา (8.9 นอก fig.)

ตัวอย่างของบล็อกข้อความสั้นของหน้าจอทั่วไปและแบบอักษรที่พิมพ์ รวมแบบอักษรของหน้าจอ: จอร์เจีย Lucida Bright, Verdana, Arial และ Trebuchet แบบอักษรพิมพ์โดยทั่วไปใช้แสดง: Times New Roman เวลา Arial กเฮลเวติกา
8.9 นอกรูป – หน้าจอทั่วไปแอปเปิ้ลแมคอินทอชและและพิมพ์อักษรได้

ระบุ typefaces
คุณสามารถระบุแบบตัวพิมพ์ใด ๆ ในเว็บเพจ แต่คอมพิวเตอร์หลายเครื่องมีเฉพาะแบบอักษรเริ่มต้นระบบปฏิบัติการติดตั้ง ถ้าแบบตัวพิมพ์ที่คุณระบุไม่มีอยู่บนคอมพิวเตอร์ของผู้ใช้ เบราว์เซอร์จะเปลี่ยนแบบอักษรเริ่มต้น (โดยทั่วไป Times New Roman หรือครั้ง) เพื่อเพิ่มโอกาสที่ผู้อ่านจะเห็นแบบตัวพิมพ์ที่ต้องการของคุณ คุณสามารถระบุแบบอักษรหลายแบบในแต่ละรูปแบบ เบราว์เซอร์ที่จะตรวจสอบสถานะของแต่ละแบบอักษร (ในลำดับที่กำหนด), ดังนั้นคุณสามารถระบุทางเลือกที่สาม หรือสี่ก่อนเบราว์เซอร์ใช้แบบอักษรเริ่มต้น เช่น "Verdana เจนีวา Arial เฮลเวติกา" เป็นความพยายาม last-ditch คุณสามารถสิ้นสุดรายงานอักษรของคุณ มีการกำหนดแบบอักษรทั่วไปเช่น "serif" วิธี ถ้าเบราว์เซอร์ไม่พบใด ๆ ที่แสดงรายการแบบอักษร มันจะแสดงข้อความแบบอักษรมี serif:

p {ตระกูลแบบอักษร: "Times New Roman" จอร์เจีย เวลา serif }

สังเกตอักษรที่ multiword ชื่อเป็น Times New Roman ต้องปรากฏอยู่ภายในเครื่องหมายอัญประกาศในสเปคของคุณ โปรดสังเกตตัวอย่างแบบอักษรด้านล่างที่แม้ว่า "Trebuchet" และ "Trebuchet ms " เป็นแบบตัวพิมพ์เดียวกัน ชื่อที่ถูกต้องที่คุณระบุในเรื่องรายการแบบอักษร คุณผู้ใช้ Macintosh และ Windows เมื่อต้องการดูแบบตัวพิมพ์ Trebuchet แล้วใช้ทั้งชื่อในรายงานของคุณอักษร:

p {ตระกูลแบบอักษร: "Trebuchet MS", Trebuchet, Verdana, Arial นอยซานส์-serif }

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

พิมพ์ขนาด

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

กับ css นักออกแบบได้หลายวิธีสำหรับการตั้งค่าขนาด เราขอแนะนำการตั้งค่าข้อความเนื้อหาขนาดเริ่มต้นของข้อกำหนดในการตั้งค่าเบราว์เซอร์ของผู้ใช้ และการตั้งค่าตัวแปรข้อความทั้งหมด (เช่นหัวเรื่อง คำอธิบาย และการเชื่อมโยง) ใช้หน่วยสัมพัทธ์ เช่น ems หรือเปอร์เซ็นต์ ความยาวในเว็บเป็นเหมือนกับความสูงอักษร ซึ่งทำให้หน่วยความสัมพันธ์ และมีความยืดหยุ่นดังนั้นการ ตัวอย่างเช่น ถ้าค่าเริ่มต้นผู้ใช้ตั้งค่า พิกเซล 16 กว่าข้อความยาวสอง ย่อหน้าจะเป็นคู่ หรือ 32 พิกเซล แต่ถ้าผู้ใช้ใช้ในการย่อ/ขยายของเบราว์เซอร์เพื่อเปลี่ยนขนาดข้อความพิกเซล 18 เยื้องจะเปลี่ยนพิกเซล 36 ถึงชนิดขนาดใหญ่:

p {ขนาดแบบอักษร: 1em เยื้องข้อความ: 2em; }

เป็นคุณอาจจินตนาการ ความยืดหยุ่นนี้สามารถส่งเค้าโครงเป็น disarray โครงร่างหน้าเว็บส่วนใหญ่จะไม่ได้รับการออกแบบชนิดขนาดใหญ่ในจิตใจ ตัวอย่าง เค้าโครงคงที่จำกัดคอลัมน์ข้อความให้มีความกว้างที่ระบุถูกออกแบบมาโดยทั่วไปเพื่อรองรับมาตรฐาน หรือขนาดเล็ก แน่นอน ขนาดใหญ่ชนิดคอลัมน์ความกว้างคงที่อาจประกอบด้วยเพียงไม่กี่คำ ซึ่งทำให้ข้อความรวมไปถึงอ่าน ผลลัพธ์ข้อความปรับขนาดได้ ใช้เค้าโครงแบบยืดหยุ่นที่เว้าเพื่อรองรับขนาดชนิดใหญ่ (fig. 8.10) (เพิ่มเติมรูปแบบคงที่ และมีความยืดหยุ่น ดูบทที่ 7 กรอบหน้า)

ผลลัพธ์ (ไทย) 2:

รูปแบบอักษรแต่ละแบบอักษรที่มีน้ำเสียงเป็นเอกลักษณ์ที่ควรผลิตแบบที่กลมกลืนกันระหว่างการไหลวาจาและภาพของเนื้อหาของคุณ กับรุ่นแรกของ HTML, ผู้เขียนเว็บมีการควบคุมไม่เกินรูปแบบอักษร ("แบบอักษร" ในคำศัพท์คอมพิวเตอร์ส่วนบุคคล) แบบอักษรที่ถูกกำหนดโดยเบราว์เซอร์เพื่อให้หน้าถูกมองในสิ่งที่ตัวอักษรที่ผู้ใช้ที่ระบุในการตั้งค่าเบราว์เซอร์ของเขาหรือเธอ รุ่นที่ทันสมัยของ HTML และ CSS ช่วยให้นักออกแบบในการระบุอักษร นี้จะเป็นประโยชน์ไม่เพียง แต่เพื่อความสวยงาม แต่ยังเพราะขนาดที่แตกต่างกันของรูปแบบอักษร รูปแบบที่ถูกออกแบบมาอย่างระมัดระวังโดยใช้แบบอักษรอาจจะไม่ถูกต้องในรูปแบบอื่นในการระบุรูปแบบอักษรที่คุณควรเลือกแบบอักษรเริ่มต้นที่อยู่อาศัยสำหรับระบบปฏิบัติการมากที่สุด ถ้าคุณระบุตัวอักษรที่ไม่ได้อยู่บนเครื่องของผู้ใช้เบราว์เซอร์จะแสดงหน้าเว็บของคุณโดยใช้แบบอักษรเริ่มต้นที่ผู้ใช้ระบุ จำไว้เช่นกันว่าผู้ใช้สามารถตั้งค่าเบราว์เซอร์ของพวกเขาที่จะแสดงทุกหน้าในตัวอักษรที่ชื่นชอบความชัดเจนบนหน้าจอรูปแบบอักษรที่บางคนมีความชัดเจนมากขึ้นกว่าคนอื่น ๆ บนหน้าจอ แบบอักษรแบบดั้งเดิมเช่นไทม์โรมันถือเป็นหนึ่งในที่สุดชัดเจนบนกระดาษ แต่ที่ความละเอียดหน้าจอที่ขนาดของมันมีขนาดเล็กเกินไปและรูปร่างของลักษณะผิดปกติ ความสวยที่หน้าจอได้รับอิทธิพลมากที่สุดโดย x ความสูง (ความสูงของตัวพิมพ์เล็ก "x") และขนาดโดยรวมของอักษรดัดแปลงแบบอักษรแบบTimes New Roman เป็นตัวอย่างที่ดีของแบบอักษรแบบดั้งเดิมที่ได้รับการปรับให้เหมาะสมกับการใช้งานบนเครื่องคอมพิวเตอร์ หน้าจอ แบบอักษร serif เช่น Times New Roman เป็นเรื่องเกี่ยวกับค่าเฉลี่ยในความชัดเจนบนหน้าจอคอมพิวเตอร์และมีปานกลาง x ความสูง Times New Roman เป็นแบบอักษรที่ดีที่จะใช้ในเอกสารข้อความหนักที่อาจจะได้รับการพิมพ์จากผู้อ่านมากกว่าอ่านจากหน้าจอ ตัวอักษรขนาดกะทัดรัดของ Times New Roman ยังทำให้มันเป็นทางเลือกที่ดีถ้าคุณต้องการที่จะแพ็คมากของคำในพื้นที่ขนาดเล็กที่ออกแบบมาสำหรับหน้าจอรูปแบบอักษรเช่นจอร์เจียและ Verdana ได้รับการออกแบบเฉพาะสำหรับความชัดเจนบนหน้าจอคอมพิวเตอร์ พวกเขาได้พูดเกินจริง x ความสูงและมีประสิทธิภาพมากเมื่อเทียบกับรูปแบบอักษรแบบดั้งเดิมมากขึ้นในขนาดที่จุดเดียวกัน อักษรบนหน้าจอเหล่านี้มีความชัดเจนที่ดีสำหรับหน้าเว็บที่ออกแบบมาเพื่ออ่านได้โดยตรงจากหน้าจอ แต่โอ้อวด-x ความสูงและ letterforms หนักของจอร์เจียและ Verdana บางครั้งดูขนาดใหญ่เมื่อย้ายไปอยู่ที่กลางความละเอียดสูงของกระดาษรูปแบบอักษรสำหรับสื่ออื่น ๆมากของความสนใจของเรามุ่งเน้นไปที่รุ่นหน้าจอของหน้าเว็บของเรา แต่เรายังมี ควบคุมวิธีการที่หน้าดูเมื่อพิมพ์ลงบนกระดาษ พิมพ์มีจานสีที่ไกลยิ่งขึ้นของตัวเลือกเมื่อมันมาถึงการเลือกแบบอักษร; รูปแบบอักษรอื่น ๆ อีกมากมายดูดีกว่าบนกระดาษค่อนข้างไม่กี่คนที่สามารถอ่านได้และน่าสนใจบนหน้าจอ ในทางตรงกันข้ามมีจุดระบุแบบอักษรสำหรับการจัดแต่งทรงผมมือถือตั้งแต่อุปกรณ์ส่วนใหญ่มีเพียงหนึ่งตัวอักษรไม่มีการเลือกรูปแบบอักษรรูปแบบเดิมมากที่สุดสำหรับการใช้รูปแบบอักษรที่จะใช้ใบหน้า serif เช่น Times New Roman หรือจอร์เจียสำหรับข้อความร่างกายและ serif ซอง เผชิญเช่น Verdana หรือ Arial เป็นตรงกันข้ามสำหรับหัวข้อ การศึกษาต่างๆตั้งใจที่จะแสดงให้เห็นว่าประเภทเส้นเป็นชัดเจนมากขึ้นกว่าซองประเภท serif และในทางกลับกัน คุณอย่างแท้จริงสามารถตัดสินประเภทความสวยเพียงในบริบทของสถานการณ์บนหน้าจอบนกระดาษตามที่ผู้ใช้จะเห็นหน้าเว็บของคุณคุณอาจจะใช้อย่างใดอย่างหนึ่งรูปแบบของตัวอักษร serif หรือซองตัดกัน serif ใบหน้าสำหรับประเภทการแสดงผล มันเป็นที่ปลอดภัยที่สุดที่จะใช้การพิมพ์ครอบครัวเดี่ยวและแตกต่างกันไปน้ำหนักและขนาดของมันสำหรับประเภทการแสดงและให้ความสำคัญ หากคุณเลือกที่จะรวม serif และซอง serif ใบหน้าแบบอักษรเลือกที่เข้ากันได้และไม่ได้ใช้มากกว่าสองรูปแบบอักษร (หนึ่งเส้นหนึ่งซอง serif) บนหน้าแบบอักษรที่มีประโยชน์มากที่สุดที่มาพร้อมกับแอปเปิ้ลแมคอินทอชและไมโครซอฟท์ ระบบปฏิบัติการจะทำซ้ำที่นี่แตกต่างจากที่มีประสิทธิภาพของพวกเขาบนหน้าจอและบนกระดาษ โปรดจำไว้ว่าผู้ใช้แมคอินทอชหลายคนที่มีการติดตั้ง Microsoft Office จะมีแบบอักษรที่ติดตั้งบนระบบของพวกเขา (รูปที่ 8.9) ตัวอย่างของบล็อกข้อความสั้นของหน้าจอที่พบบ่อยและแบบอักษรพิมพ์ อักษรบนหน้าจอรวมถึงจอร์เจีย, Lucida สดใส Verdana, Arial, และ Trebuchet ที่ใช้กันทั่วไปแบบอักษรพิมพ์ที่แสดงเป็น: Times New Roman, ไทม์, Arial, Helvetica และรูปที่ 8.9 - หน้าจอทั่วไป Apple Macintosh และ Microsoft Windows และแบบอักษรพิมพ์ระบุรูปแบบอักษรที่คุณสามารถระบุแบบอักษรใด ๆ สำหรับหน้าเว็บของคุณ แต่เครื่องคอมพิวเตอร์จำนวนมากมีเพียง ตัวอักษรสำหรับระบบปฏิบัติการเริ่มต้นการติดตั้ง ถ้าแบบอักษรที่คุณระบุไม่สามารถใช้ได้ในคอมพิวเตอร์ของผู้ใช้เบราว์เซอร์จะเปลี่ยนไปแบบอักษรเริ่มต้น (โดยทั่วไป Times New Roman หรือไทม์) เพื่อเพิ่มโอกาสที่ผู้อ่านจะเห็นแบบอักษรที่คุณต้องการคุณสามารถระบุหลายแบบอักษรสำหรับแต่ละลักษณะ เบราว์เซอร์จะตรวจสอบสำหรับการแสดงของแต่ละตัวอักษร (ตามลำดับที่กำหนด) เพื่อให้คุณสามารถระบุสามหรือสี่สลับกันไปมาก่อนที่เบราว์เซอร์ที่ใช้ตัวอักษรเริ่มต้นตัวอย่างเช่น "Verdana, เจนีวา, Arial, Helvetica." ในฐานะที่เป็นครั้งสุดท้าย ความพยายามที่คุณสามารถสิ้นสุดการประกาศตัวอักษรของคุณด้วยการกำหนดตัวอักษรทั่วไปเช่นวิธีนี้ถ้าเบราว์เซอร์ไม่สามารถหาใด ๆ ของแบบอักษรที่จดทะเบียนในตลาดหลักทรัพย์ก็จะแสดงข้อความในตัวอักษร serif "อยู่ serif.": พี {font-family: "Times New Roman", จอร์เจีย, ไทม์, serif} สังเกตว่าชื่อตัวอักษร multiword เช่น Times New Roman จะต้องปรากฏอยู่ในเครื่องหมายคำพูดในรายละเอียดของคุณ ยังทราบในตัวอย่างตัวอักษรด้านล่างที่แม้ว่า "Trebuchet" และ "นางสาว Trebuchet" เป็นอักษรเดียวกันชื่อที่แน่นอนที่คุณระบุในเรื่องรายการแบบอักษร ถ้าคุณต้องการให้ทั้งผู้ใช้แมคอินทอชและ Windows เพื่อดู Trebuchet อักษรแล้วใช้ทั้งสองชื่อในการประกาศตัวอักษรของคุณ: พี {font-family: "Trebuchet MS" Trebuchet, Verdana, Arial, sans-serif-} วิธีที่ดีเพื่อให้แน่ใจว่า ที่ตั้งค่าชนิดของคุณจะทำงานอย่างถูกต้องคือการตั้งค่าเริ่มต้นตั้งค่าแบบอักษรเบราว์เซอร์สัดส่วนกับสิ่งที่จะเห็นได้ชัดที่แตกต่างจากตัวอักษรที่คุณตั้งใจ ตัวอย่างเช่นการตั้งค่าแบบอักษรเริ่มต้นเบราว์เซอร์ของคุณเพื่อ Courier ถ้าคุณไม่ได้ใช้หนังสือในเอกสารของคุณ เมื่อคุณดูหน้าเว็บของคุณสิ่งที่ปรากฏในหนังสือจะต้องไม่ถูกทำเครื่องหมายขึ้นอย่างถูกต้องพิมพ์ขนาดข้อความ Scalable เป็นสิ่งจำเป็นเพื่อเป้าหมายของการใช้งานสากล เพื่อให้แน่ใจว่า scalability, ใช้หน่วยที่เกี่ยวข้องกับการควบคุมขนาดพิมพ์ประเภทอัตรากำไรขั้นต้นและการเยื้องชั้นนำในหน้า ข้อความที่ใช้กราฟิกเท่าที่จำเป็นและมักจะให้เทียบเท่าข้อความ ข้อความที่แสดงผลในรูปแบบกราฟิกเป็นข้อความที่ไม่มีอีกต่อไป แต่ภาพและดังนั้นจึงไม่สามารถจัดการ-ขยายสีเป็นข้อความธรรมดาได้ ข้อความกราฟิกยังมองไม่เห็นเครื่องมือค้นหาเพื่อให้ได้โดยไม่ต้องสำรองข้อความคำที่สำคัญที่สุดในหน้าของคุณอาจจะมองไม่เห็นในการค้นหาด้วย CSS, นักออกแบบมีหลายวิธีสำหรับการตั้งค่าขนาดประเภท เราขอแนะนำการตั้งค่าข้อความที่ร่างกายต้องการขนาดตัวอักษรเริ่มต้นที่กำหนดไว้ในการตั้งค่าเบราว์เซอร์ของผู้ใช้และการตั้งค่าตัวแปรข้อความ (เช่นหัว, คำอธิบายและการเชื่อมโยง) โดยใช้หน่วยงานที่เกี่ยวข้องเช่น EMS หรือเปอร์เซ็นต์ em ในบริบทเว็บเป็นเช่นเดียวกับความสูงของตัวอักษรซึ่งทำให้หน่วยญาติและดังนั้นจึงมีความยืดหยุ่น ตัวอย่างเช่นถ้าเริ่มต้นที่ผู้ใช้ตั้งเป็น 16 พิกเซล, กว่าเยื้องข้อความสอง em-จะเป็นคู่หรือ 32 พิกเซล แต่ถ้าผู้ใช้ที่ใช้คุณสมบัติการซูมข้อความของเบราว์เซอร์ที่จะเปลี่ยนขนาดของข้อความถึง 18 พิกเซลเยื้องจะเปลี่ยนถึง 36 พิกเซลเพื่อสะท้อนให้เห็นขนาดใหญ่ประเภท: พี {font-size: 1em; ข้อความเยื้อง: 2em; } ที่คุณอาจคิดและความยืดหยุ่นนี้สามารถส่งรูปแบบหน้าในความระส่ำระสาย รูปแบบหน้าเว็บส่วนใหญ่จะไม่ได้ออกแบบมาด้วยรูปแบบที่มีขนาดใหญ่ในใจ ตัวอย่างเช่นรูปแบบคงที่ จำกัด คอลัมน์ข้อความที่มีความกว้างที่กำหนดได้รับการออกแบบโดยทั่วไปเพื่อรองรับประเภทมาตรฐานหรือขนาดเล็ก แท้จริงที่ประเภทขนาดใหญ่ขนาดคอลัมน์ความกว้างคงที่อาจจะมีเพียงไม่กี่คำที่ทำให้ข้อความอึดอัดใจที่จะอ่าน เพื่อผลลัพธ์ที่ดีที่สุดกับข้อความที่ปรับขนาดได้ใช้รูปแบบที่มีความยืดหยุ่นที่เปลี่ยนแปลงอย่างสง่างามที่จะรองรับขนาดประเภทขนาดใหญ่ (รูปที่ 8.10) (สำหรับข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบที่คงที่และมีความยืดหยุ่นให้ดูกรอบบทที่ 7, หน้า.)

ผลลัพธ์ (ไทย) 3:

ชนิด

แต่ละแบบมีเอกลักษณ์เสียงที่ควรจะผลิตพอดีกลมกลืนระหว่างทางวาจาและการมองเห็นของเนื้อหาของคุณ กับเวอร์ชันแรกของ html , เขียนเว็บได้ไม่มีการควบคุมเหนือ typefaces ( " แบบอักษร " ศัพท์คอมพิวเตอร์ส่วนบุคคล ) แบบอักษรที่ถูกตั้งโดยเบราว์เซอร์ , หน้าถูกแสดงในแบบอักษรใด ดังนั้นผู้ใช้ที่ระบุในการตั้งค่าเบราว์เซอร์ของเขาหรือเธอ .รุ่นที่ทันสมัยของ HTML และ CSS ช่วยให้นักออกแบบเพื่อระบุตัวอักษร . นี้จะเป็นประโยชน์ไม่เพียง แต่สำหรับเหตุผลที่สวยงาม แต่ยังเพราะของที่แตกต่างกันขนาดของชนิด . เค้าโครงที่ออกแบบมาอย่างรอบคอบ ใช้ตัวอักษรอาจจะไม่จัดรูปแบบได้อย่างถูกต้องในอีก

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


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


ตัวอักษรแบบดัดแปลงครั้งใหม่โรมัน เป็นตัวอย่างที่ดีของแบบดั้งเดิมที่ถูกดัดแปลงเพื่อใช้ใน หน้าจอ คอมพิวเตอร์ เป็นอักษร serif เช่น Times New Roman กำลังเฉลี่ยในการทดสอบบนหน้าจอคอมพิวเตอร์ และมี x-height ปานกลาง ครั้งใหม่โรมันเป็นแบบอักษรที่ดีเพื่อใช้ในเอกสารหนักที่อาจจะพิมพ์ข้อความ โดยผู้อ่าน มากกว่าอ่านจากหน้าจอขนาด ขนาดของตัวอักษร Times New Roman ยังทำให้มันเป็นทางเลือกที่ดีถ้าคุณต้องการที่จะแพ็คมากของคำลงในพื้นที่ขนาดเล็ก ที่ออกแบบมาสำหรับหน้าจอ

typefaces เช่นจอร์เจียและ Verdana ถูกออกแบบมาโดยเฉพาะสำหรับการทดสอบบนหน้าจอ คอมพิวเตอร์ มี x-heights ที่พูดเกินจริงและแข็งแกร่งมากเมื่อเทียบกับแบบดั้งเดิมมากขึ้นชนิดในจุดเดียวกันขนาดแบบอักษรที่หน้าจอนี้ให้ความชัดเจนที่ดีสำหรับหน้าเว็บที่ออกแบบให้สามารถอ่านได้โดยตรงจากหน้าจอ อย่างไรก็ตาม x-heights letterforms พูดเกินจริงและหนักของจอร์เจียและ Verdana บางครั้งดูใหญ่เมื่อย้ายไปที่ความละเอียดสูงกลางของกระดาษชนิดสำหรับสื่ออื่น ๆ .


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



รูปแบบปกติมากที่สุดสำหรับการใช้ไทป์เฟซคือการใช้หน้า serif เช่น Times New Roman หรือจอร์เจีย ตัวอักษร Sans serif ร่างกายและใบหน้าเช่น Verdana หรือ Arial เป็นส่วนข่าว การศึกษาต่างๆ มีความหมายแสดงชนิด Serif จะชัดเจนกว่าแบบ Sans Serif และในทางกลับกัน คุณอย่างแท้จริงสามารถตัดสินประเภทความชัดเจนเฉพาะในบริบทของสถานการณ์บนหน้าจอบนกระดาษที่ผู้ใช้จะเห็นหน้าเว็บของคุณ .

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

เป็นประโยชน์มากที่สุดแบบอักษรเรือกับ Apple Macintosh และระบบปฏิบัติการ Microsoft Windows จะทำซ้ำที่นี่แตกต่างจากประสิทธิภาพของพวกเขาบนหน้าจอและบนกระดาษ จำได้ว่าผู้ใช้แมคอินทอช หลายคนที่ได้ติดตั้ง Microsoft Office จะมีหน้าต่างแบบอักษรที่ติดตั้งในระบบ ( ภาพที่ 8 ) .

ตัวอย่างของบล็อกข้อความสั้น ทั่วไป หน้าจอและพิมพ์แบบอักษร หน้าจอแบบอักษรรวม : Georgia , lucida สดใส , Verdana , Arial และ Trebuchet . ที่ใช้กันทั่วไปพิมพ์แบบอักษรที่แสดง : ครั้งใหม่โรมันครั้ง , Arial , Helvetica , 8.9 และ .
รูปทั่วไป -- แอปเปิ้ลแมคอินทอชและ Microsoft Windows หน้าจอและพิมพ์แบบอักษรที่ระบุชนิด


คุณสามารถระบุตัวอักษรสำหรับหน้าเว็บของคุณแต่คอมพิวเตอร์มากมีเพียงระบบปฏิบัติการเริ่มต้นแบบอักษรที่ติดตั้ง ถ้าตัวอักษรที่คุณระบุจะไม่สามารถใช้ได้บนคอมพิวเตอร์ของผู้ใช้เบราว์เซอร์จะเปลี่ยนแบบอักษรเริ่มต้น ( โดยทั่วไปครั้งใหม่โรมันหรือครั้ง ) เพื่อเพิ่มโอกาสที่ผู้อ่านจะเห็นตัวอักษรที่คุณต้องการ คุณสามารถกำหนดแบบอักษรหลายสำหรับแต่ละสไตล์เบราว์เซอร์จะตรวจสอบสถานะของแต่ละตัวอักษรในคำสั่ง ) , เพื่อให้คุณสามารถระบุสามหรือสี่แบบก่อนที่จะใช้แบบอักษรเริ่มต้นเบราว์เซอร์ ตัวอย่างเช่น " Verdana , เจนีวา , Arial , Helvetica " เป็นความพยายามคลองสุดท้ายคุณสามารถสิ้นสุดการประกาศชื่อแบบอักษรของคุณด้วยตัวอักษรทั่วไปเช่น " serif " วิธีนี้ หากเบราว์เซอร์ไม่พบใด ๆของรายการแบบอักษรมันจะแสดงข้อความในแบบอักษร Serif ใช้ได้ :

p { font ครอบครัว : " Times New Roman " , จอร์เจีย , ครั้ง , serif }

สังเกตว่า multiword font ชื่อเช่น Times New Roman ต้องปรากฏภายในเครื่องหมายอัญประกาศในสเปค นอกจากนี้ยังทราบในแบบอักษรตัวอย่างด้านล่างว่า " เครื่องยิงหิน " และ " Trebuchet MS " เป็นแบบเดียวกัน ชื่อที่แน่นอนที่คุณระบุในรายการแบบอักษรที่สำคัญถ้าคุณต้องการทั้ง Macintosh และ Windows ผู้ใช้สามารถเห็นตัวอักษร Trebuchet นั้นใช้ชื่อทั้งสองในปฏิญญาแบบอักษรของคุณ :

p { font ครอบครัว : " Trebuchet MS " Trebuchet , Verdana Arial , Sans Serif }

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



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

กับ CSS , นักออกแบบมีหลายวิธีสำหรับการตั้งค่าขนาดพิมพ์เราขอแนะนำการตั้งค่าข้อความของร่างกายเพื่อเริ่มต้นข้อความขนาดที่กำหนดไว้ในการตั้งค่าเบราว์เซอร์ของผู้ใช้และการตั้งค่าตัวแปรข้อความทั้งหมด ( เช่น หัวเรื่อง คำอธิบายภาพและการเชื่อมโยง ) โดยใช้หน่วยสัมพัทธ์ เช่น EMS หรือร้อยละ การทำเว็บบริบท คือเหมือนกับตัวอักษรสูงซึ่งทำให้มันเป็นหน่วยสัมพัทธ์ และยืดหยุ่น ดังนั้น ตัวอย่างเช่นหากผู้ใช้ตั้งค่าเริ่มต้นคือ 16 พิกเซลกว่าสองเอ็มข้อความเยื้องจะเป็นคู่ หรือ 32 พิกเซล แต่ถ้าผู้ใช้ใช้ข้อความคุณสมบัติการซูมของเบราว์เซอร์เพื่อเปลี่ยนข้อความขนาด 18 pixel เยื้องจะเปลี่ยน 36 พิกเซลเพื่อสะท้อนขนาดใหญ่ ขนาด :

P { 1em ; ขนาดตัวอักษร : เยื้องข้อความ : 2em ; }

อย่างที่คุณจินตนาการได้ ความยืดหยุ่นนี้สามารถส่งในรูปแบบ หน้า ยับเยินเค้าโครงหน้าเว็บส่วนใหญ่ไม่ได้ออกแบบพิมพ์ใหญ่ในใจ ตัวอย่างเช่น การแก้ไขเค้าโครงที่กำหนดข้อความคอลัมน์ความกว้างที่ระบุโดยทั่วไปจะออกแบบมาเพื่อรองรับมาตรฐานหรือพิมพ์เล็ก จริงที่ชนิดขนาดใหญ่ขนาดความกว้างคอลัมน์คงที่อาจประกอบด้วยเพียงไม่กี่คำ ที่ทำให้ข้อความแปลกๆที่อ่าน สำหรับผลลัพธ์ที่ดีที่สุดกับข้อความปรับขนาดใช้ความยืดหยุ่นในรูปแบบที่เปลี่ยนแปลงอย่างสิ้นเชิง เพื่อรองรับขนาดพิมพ์ใหญ่ ( รูปที่ 8.10 ) ( สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขและรูปแบบยืดหยุ่นดูบทที่ 7 กรอบ หน้า )