הבנת טיפוגרפיה 10 כלים שימושיים ומשאבים

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

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

קריאה מומלצת: הבנת טיפוגרפיה: כתיבה עבור האינטרנט

מטריקס גופן

מדריך מקוון זה פורסם על ידי הבלוג 24ways עיצוב. הוא כולל שולחן מטריצה ​​של כל גופני אינטרנט סטנדרטיים תמצאו כברירת מחדל של ספקי תוכנה שונים. כותרות פופולריות כוללות את Windows, Mac OS X, Microsoft Office ו- Adobe Creative Suite.

בדיקת ניגודיות צבעים

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

HTML-Ipsum

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

Typechart

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

PX-to-EM.com

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

הגדרת סוג CSS

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

מרפרף טיפוסי

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

רשת טיפוגרפית

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

מה הפונט!

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

קו בסיס / קו גובה

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