15 เครื่องมือทำตัวพิมพ์แบบออนไลน์ผู้ออกแบบทุกคนควรรู้

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

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

นี่คือปลั๊กอินเครื่องมือออนไลน์และสคริปต์ที่จะช่วยคุณ สร้างหัวข้อที่ยอดเยี่ยม และ ข้อความที่อ่านได้ง่าย.

Typeplate

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

เช็คเอาท์: การสาธิต | เอกสาร

กูเทนเบิร์ก

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

เช็คเอาท์: การสาธิต | เอกสาร

Lettering.js

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

เช็คเอาท์: การสาธิต | เอกสาร

Typebase.css

Typebase.css เป็นสไตล์ชีทพิมพ์ที่ปรับแต่งได้ มันมีทั้ง saas และรุ่นที่น้อยกว่าและปรับเปลี่ยนได้ง่ายในโครงการเว็บที่ทันสมัย.

เช็คเอาท์: การสาธิต | เอกสาร

FitText

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

เช็คเอาท์: การสาธิต | เอกสาร

Kerning.js

Kerning.js ช่วยให้คุณแปลงปรับขนาดและแก้ไขตัวพิมพ์ของคุณโดยอัตโนมัติด้วย CSS การเริ่มต้นกับ Kerning.js เป็นเรื่องง่าย.

เช็คเอาท์: การสาธิต | เอกสาร

Typesettings.css

Typesettings.css เป็นสนามเด็กเล่นของคุณสำหรับการสร้างโครงการหรือบล็อกบนเว็บที่เรียบง่าย สไตล์การพิมพ์ทั้งหมดที่ใช้ที่นี่ได้รับแรงบันดาลใจจากพื้นฐานการออกแบบกราฟิก.

เช็คเอาท์: การสาธิต | เอกสาร

เครื่องหลังของนักไต่เขา

ด้วย Rucksack คุณสามารถสร้างตัวอักษรที่น่าอัศจรรย์ได้ด้วยคุณสมบัติใหม่ที่ตอบสนองต่อขนาดตัวอักษร การสร้างตัวอักษรที่ตอบสนองได้นั้นง่ายมาก.

เช็คเอาท์: การสาธิต | เอกสาร

FlowType.JS

ตัวอักษรที่อ่านได้มากที่สุดมีความยาวระหว่าง 45 ถึง 75 ตัวอักษรต่อบรรทัด แต่การหาสมดุลนั้นเป็นงานที่ท้าทายสำหรับนักพัฒนา FlowType.JS เปลี่ยนขนาดตัวอักษรและจากนั้นความสูงบรรทัดตามความกว้างขององค์ประกอบเฉพาะ.

เช็คเอาท์: การสาธิต | เอกสาร

Blast.js

Blast.js จะช่วยให้คุณแยกข้อความเพื่อให้ง่ายต่อการจัดการตัวพิมพ์ มันมีตัวคั่น 4 ตัวที่สร้างขึ้น: ตัวอักษรคำประโยคและองค์ประกอบ นอกจากนี้ยังสามารถจับคู่การแสดงออกและวลีที่กำหนดเอง.

เช็คเอาท์: การสาธิต | เอกสาร

slabText

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

เช็คเอาท์: การสาธิต | เอกสาร

เครื่องชั่งประเภท

ด้วยเครื่องชั่งประเภทคุณสามารถดูตัวอย่างและเลือกเครื่องชั่งประเภทที่เหมาะสมสำหรับโครงการของคุณ ไม่มีกฎ - แค่เล่นด้วยขนาดตัวอักษรขนาดและแบบอักษรบนเว็บที่แตกต่างกัน.

เช็คเอาท์: การสาธิต | เอกสาร

เกี่ยวกับวิชาการพิมพ์หรือทำตัวพิมพ์

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

เช็คเอาท์: การสาธิต | เอกสาร

Typi

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

เช็คเอาท์: เอกสารประกอบ

Lining.js

ด้วยปลั๊กอิน Lining.js คุณจะสามารถควบคุมการพิมพ์เว็บได้อย่างสมบูรณ์ รองรับเบราว์เซอร์ยอดนิยมเช่น Safari, Google Chrome, Opera และ Mozilla Firefox.

เช็คเอาท์: การสาธิต | เอกสาร

โบนัส: 2 เครื่องมือเพิ่มเติม!

สถานะของประเภทเว็บ

State of the Web Type เป็นเว็บไซต์ที่ให้ข้อมูลล่าสุดเกี่ยวกับการสนับสนุนประเภทและคุณสมบัติต่างๆในเว็บ คุณสามารถใช้การค้นหาหรือหมวดหมู่เช่นการปรับระยะห่างระหว่างตัวพิมพ์ใหญ่การโหลดแบบอักษร CSS และอื่น ๆ เพื่อค้นหาสิ่งที่คุณต้องการ.

Typograph

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

เช็คเอาท์: เอกสารประกอบ