הכרת טיפוגרפיה כתיבה עבור האינטרנט

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

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

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

למדוד את הסעיפים שלך

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

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

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

מובילים מובנים

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

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

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

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

השתמש בגופני גופן טבעיים

יש עדיין קומץ אתרי אינטרנט בוחרים להישאר עם גודל גופן קטן יותר מהממוצע. 11px-12px יכול להיראות הרבה יותר “מקצועי רגיל” עבור פריסות עסקיות. אבל הגדלים האלה לא עוזרים לרוב המבקרים שמחפשים מידע ספציפי.

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

תגובה לסביבת המשתמש

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

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

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

סגנון מבוסס על הקשר

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

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

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

משחק עם ריווח אותיות

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

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

לעתים קרובות אני משתמש בכמה פיקסלים / נקודות של ריווח אותיות בכותרות עם כל הבירות. זה שובר את הדמויות בודדים עם תוספת שטח נוסף וגם מופיע מאוד מוגדר “כותרת” תראה. ריווח אות שלילי גם עובד נהדר בהקשר הנכון. אני בדרך כלל מקל על יחידות קטנות יותר, אולי -0.03em או 0.1-0 לכל היותר.

שילוב ושטף

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

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

בנוסף, גופני Sans-serif הם נקיים יותר וקלים יותר לסקור יחד במשפטים. זה לא אומר גופני serif לא יעבוד בפסקאות. למעשה יש הרבה דוגמאות נהדר! אבל מושג ידוע בשם X- גובה חשוב ביותר להבדיל את המורכבות של גופן. מאת מסתכל על הבסיס של כמה מילים תוכל להרים על איך גופנים כאלה יהיה “להשתלב” אחד עם השני.

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

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

סיכום

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

שבוע הבא: תישאר מכוון כפי שנביט לתוך כמה כלים ומשאבים מועילים עבור טיפוגרפיה אינטרנט טוב יותר - -.

יותר…

הנה עוד הודעות הקשורות טיפוגרפיה:

• ראווה של עיצובים עם טיפוגרפיה יפה
• טיפוגרפיה טובה יותר עבור אתרי אינטרנט מודרניים
• מדריך מהיר טיפוגרפיה: למד ולהיות השראה