การทำความเข้าใจวิชาการพิมพ์ 10 เครื่องมือและทรัพยากรที่มีประโยชน์

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

สิ่งเหล่านี้สามารถช่วยสร้างกริด HTML และพื้นที่เนื้อหาสร้างสไตล์ CSS สร้างชื่อแบบอักษรและสิ่งดีๆอื่น ๆ ลองใช้ลิงค์ด้านล่างและอย่าลืมแจ้งให้เราทราบความคิดเห็นของคุณในส่วนของการโพสต์การสนทนา.

อ่านหนังสือที่แนะนำ: ทำความเข้าใจเกี่ยวกับวิชาการพิมพ์: การเขียนสำหรับเว็บ

เมทริกซ์แบบอักษร

คู่มือออนไลน์นี้ถูกโพสต์โดยบล็อกการออกแบบ 24ways มันมีตารางเมทริกซ์ของแบบอักษรเว็บมาตรฐานทั้งหมดที่คุณจะพบโดยค่าเริ่มต้นจากผู้จำหน่ายซอฟต์แวร์ต่างๆ ชื่อที่ได้รับความนิยม ได้แก่ Windows, Mac OS X, Microsoft Office และโปรแกรม Adobe Creative Suite.

การตรวจสอบความคมชัดของสี

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

HTML-Ipsum

คุณต้องการเครื่องมือ Lorem Ipsum ที่สามารถทำได้มากกว่าแค่การแสดงผลข้อความหรือไม่? เครื่องมือสร้าง HTML ออนไลน์นี้จะสร้างบล็อคโค้ดสำหรับองค์ประกอบของหน้าเว็บที่พบบ่อยที่สุด ตัวอย่างบางรายการ ได้แก่ รายการที่ไม่เรียงลำดับรายการคำนิยามฟอร์มเว็บตารางและโซลูชันอื่น ๆ มากมาย.

Typechart

Typechart เป็นหนึ่งในเครื่องมือที่ฉันโปรดปรานในฐานะนักพัฒนา CSS ฉันมักจะมองหาการจับคู่แบบอักษรเฉพาะในระบบของฉันกับโครงการเว็บ แต่ฉันไม่มีเวลาที่จะพลิกดูคอลเลกชันทั้งหมดของฉัน เครื่องมือที่ยอดเยี่ยมนี้ช่วยให้คุณสามารถเลือกแบบอักษรที่เป็นที่นิยมและดาวน์โหลดโค้ด CSS ที่เหมาะสม!

PX-to-EM.com

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

ชุดประเภท CSS

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

พลิกทั่วไป

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

Grid Typographic

มีการพูดคุยกันมากมายเกี่ยวกับการออกแบบรอบตารางใน HTML และ CSS คุณอาจเข้าใจแนวคิดของการทำงานของกริดและการวัดเว็บไซต์เป็นพิกเซลไม่แตกต่างกัน กวดวิชากริดนี้โดย CSS-Tricks เป็นเหมือนความพยายามที่แนะนำเพื่อแนะนำพื้นฐานของวิชาการพิมพ์สำหรับยุคดิจิทัล มันเป็นหัวข้อขั้นสูงมากขึ้นในขอบเขตของการออกแบบเว็บ แต่ถ้าคุณมีความอดทนฉันแนะนำให้ทำตามรายละเอียดเพื่อดูว่าคุณสมบัติกริดเหล่านี้สามารถส่งผลกระทบต่อการจัดวางหน้าของคุณได้อย่างไร.

WhatTheFont!

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

เครื่องคำนวณพื้นฐาน / ความสูงบรรทัด

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