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

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

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

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

הבדלים באינטרנט של היום

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

עכשיו זה אפשרי לחלוטין לכלול גופנים שלך עם CSS @סוג גופן נכס. ניתן להשתמש בכל סוג נכון(.ttf) או OpenType(. utf) הקובץ ולאחסן עותק מקומי בשרת שלך. אז עם קצת CSS3 קסם לכלול את המשפחה בכל מקום בדף האינטרנט שלך!

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

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

שיטה זו היא קצת יותר אמין שכן אתה לא צריך דפדפן מודרני התומכים בתקני CSS3 כדי לגרום לזה לעבוד. אבל כמובן דפדפני מורשת כגון Internet Explorer 6 יהיה המאבק כדי להבהיר כראוי.

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

מטרת טיפוגרפיה דיגיטלית

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

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

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

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

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

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

כותרות דפי אינטרנט

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

ל

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

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

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

לדוגמה, שלך

תגים צריך בולט ביותר בין כל כותרות הדף שלך.

ו

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

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

בניית קישורים ייחודיים

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

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

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

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

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

בניית רשימות מעוצבות

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

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

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

כיצד ליצור ב- In-Page ציטוטים

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

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