15 Online טיפוגרפיה כלים כל המעצבים צריכים לדעת

טיפוגרפיה היא הבסיס של כל עיצוב, כי הקריאה היא אחד הדברים הבסיסיים ביותר שאנחנו עושים באינטרנט. לטיפוגרפיה שתבחר יש השפעה על היבטים מרובים של אתר אינטרנט, כולל הקריאות, מצב הרוח, ואת חוויית המשתמש הכוללת. זה חיוני עבור מעצבים ומפתחים מכיר את העקרונות הבסיסיים של טיפוגרפיה ל ליצור עיצובים נעים לקריאה.

אנחנו כבר מדברים על כלי זיווג גופן לפני, והיום אנחנו הולכים לחלוק עם לך סוג כלים שאתה יכול להשיג חוויית קריאה טובה יותר באתרים שאתה בונה ו / או עיצוב.

הנה plugins, כלים מקוונים, סקריפטים אשר יעזור לך ליצור כותרות מדהים ו טקסט קריא נקי.

תבנית

זה לא יעשה בחירות עיצוב בשבילך, אבל יהיה להגדיר את הסימון הנכון עם סגנון עבור תבניות טיפוגרפיות נפוצים. זה יכול גם לתת לך טיפים על איך סגנון הטקסט להעתיק כראוי.

לבדוק: הדגמה תיעוד

גוטנברג

גוטנברג הוא סטרטר גמיש וקל לשימוש למתחילים ולמעצבים. זה יעזור לך להגדיר גודל סוג הבסיס, קו גובה רוחב מקסימלי. גוטנברג הוא פרויקט קוד פתוח, לכן אל תהסס לתרום, להתאים ולשנות אותו.

לבדוק: הדגמה תיעוד

מכתבים

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 הוא סקריפט פשוט אשר מפצל כותרות לשורות כדי למלא באופן מושלם את החלל האופקי זמין. התסריט מחשב מספר אידיאלי של תווים כדי להגדיר בכל שורה על ידי חלוקת רוחב זמין על ידי גודל גופן פיקסל.

לבדוק: הדגמה תיעוד

הקלד קנה מידה

עם סוג קנה מידה אתה יכול לצפות בתצוגה מקדימה ולבחור את הסולם סוג הנכון עבור הפרויקט שלך. אין כללים - פשוט לשחק עם גודל גופן, קנה מידה וגופני אינטרנט שונים.

לבדוק: הדגמה תיעוד

טיפוגרפי

טיפוגרפי עוזר לך לעשות טיפוגרפיה תגובה. כל מה שאתה צריך לעשות הוא פשוט לבחור כמה גופנים, להגדיר כמה הגדרות ואתה תקבל טיפוגרפיה תגובה תגובה.

לבדוק: הדגמה תיעוד

טיפוסי

טיפוסי הוא תמהיל saas אתה יכול להשתמש כדי לעשות טיפוגרפיה תגובה בקלות. הוא יוצר גודל גופן וגבהים לקו עבור HTML ואלמנטים אחרים. כמו כן, טיפוסי יש פונקציה קצב אנכי לחשב קו גובה.

לבדוקתיעוד

Lining.js

עם תוסף Lining.js, תקבל שליטה מלאה על טיפוגרפיה אינטרנט. הוא נתמך בדפדפנים הפופולריים ביותר כגון Safari, Google Chrome, Opera ו- Mozilla Firefox.

לבדוק: הדגמה תיעוד

בונוס: 2 כלים נוספים!

מצב האינטרנט

מדינת האינטרנט סוג הוא אתר אינטרנט המציע עדכני נתונים על תמיכה בסוג ותכונות ברחבי האינטרנט. ניתן להשתמש בחיפוש או בקטגוריות, כגון צימוד אותיות, ריווח הון, טעינת גופן CSS ועוד כדי למצוא בדיוק את מה שאתה צריך.

טיפוגרפיה

טיפוגרף הוא אינטרנט מדהים תוסף סקיצה אשר מאפשר לך לשים רווחים לא שבירת אחרי אות אחת מילים, לחבר את המספר ואת היחידה. זה גם מסיר רווחים כפולים, נכנס, נקודות וטעויות כתיב אחרות, כך שתוכל להשיג טיפוגרפיה יפה נקי כי הוא קל לקריאה.

לבדוקתיעוד