עיצוב אתרים תמיד לווה מנהלים והגדרות מעולם העיצוב הגרפי והדפוס. זה נכון במיוחד כשמדובר טיפוגרפיה באינטרנט ואת האופן שבו אנו מקבלים letterforms על דפי האינטרנט שלנו. הקבלות אלה אינן תמיד 1 עד 1 תרגומים, אבל אתה בהחלט יכול לראות איפה משמעת אחת השפיעה על אחרים. זה בולט במיוחד כאשר אתה מחשיב את הקשר בין המונח טיפוגרפיה מסורתית "מוביל" ואת המאפיין CSS המכונה "גובה קו".
מטרת מוביל
כאשר אנשים השתמשו באופן ידני מתכת או אותיות עץ כדי ליצור את טיפוגרפיה עבור דף מודפס, חתיכות דקות של עופרת היו ממוקמים בין שורות אופקיות של טקסט על מנת ליצור מרווח בין שורות אלה. אם אתה רוצה שטח גדול יותר, היית להכניס חתיכות גדולות יותר של עופרת. כך הוטבע המונח "מוביל". אם חיפשת את המונח "מוביל" בספר על עיצוב טיפוגרפי ומנהלים, הוא היה קורא משהו להשפעה של "המרחק בין קווי הבסיס של שורות עוקבות מסוג".
מובילים בעיצוב אתרים
ב עיצוב דיגיטלי, המונח המוביל עדיין מתייחסים כדי להתייחס המרווח בין שורות של טקסט. תוכניות רבות להשתמש מונח זה מדויק, למרות להוביל בפועל הוא כמובן לא בשימוש באותן תוכניות. זה הוא דוגמה מצוינת של צורות חדשות של עיצוב לשאול רעיונות מסורתיים, למרות יישום מדויק של עיקרון זה השתנה.
כאשר מדובר בעיצוב אתרים, אין מאפיין CSS עבור "מוביל". במקום זאת, המאפיין CSS שיטפל בתצוגה חזותית זו של טקסט נקרא גובה גובה. אם אתה רוצה את הטקסט יש רווח נוסף בין שורות אופקיות של טקסט, אתה תשתמש זה מאפיין. לדוגמה, נניח שרצית להגדיל את גובה השורה עבור כל הפיסקאות בתוך האלמנט
זה יהיה עכשיו פי 1.5 גובה קו נורמלי, על בסיס גודל הגופן ברירת המחדל של הדף (שהוא בדרך כלל 16px).
מתי להשתמש בגובה קו
כמפורט לעיל, קו גובה מתאים להשתמש בחלל שורות טקסט בפסקאות או בלוקים אחרים של טקסט. אם יש רווח קטן מדי בין השורות, הטקסט יכול להיות מעורבב וקשה לקריאה עבור הצופים לאתר שלך. באופן דומה, אם השורות מחולקות רחוק מדי על הדף, את זרימת הרגיל של הקריאה יופסק הקוראים יתקשו עם הטקסט שלך מסיבה זו. זו הסיבה שאתה רוצה למצוא את הכמות המתאימה של המרווח גובה קו לשימוש. אתה יכול גם לבדוק את העיצוב שלך עם משתמשים בפועל כדי לקבל משוב על הקריאות של הדף .
כאשר לא להשתמש בגובה קו
אל תבלבל גובה קו עם הריפוד או השוליים שבהם תשתמש כדי להוסיף רווח לבן לעיצוב הדף שלך, כולל כותרת מתחת או פסקאות. ריווח זה אינו מוביל, ולכן הוא אינו מטופל על ידי גובה קו.
אם ברצונך להוסיף רווח תחת רכיבי טקסט מסוימים, תשתמש בשוליים או בריפוד. אם נחזור לדוגמת CSS הקודמת שבה השתמשנו, נוכל להוסיף זאת:
ראשי p {line-height: 1.5; margin-bottom: 24px; } זה עדיין יהיה גובה קו 1.5 בין שורות של טקסט לפסקה של הדף שלנו (אלה בתוך אלמנט
כמעט בכל המקרים, זה יהיה להציג את הקוד הקודם.
נניח שאתה רוצה להוסיף ריווח מתחת לרשימה פריטים שהיו בתוך רשימה עם סוג של "תפריט שירותים", היית משתמש בשוליים או ריפוד לעשות זאת, לא גובה קו. אז זה יהיה מתאים.
.services-menu li {