تایپوگرافی وب بهترین شیوه های وب سایت مدرن

راهنما برای تایپوگرافی وب پاسخگو که بهترین روش ها را در بر می گیرد & برای اطمینان از میزان خواندن محتوای سایت ، قواعد اندازه یک ظاهر طراحی شده را می خواند & شادی برای دیدن.


تایپوگرافی بهترین روشها

نقاشان قلم موهای خود را دارند. مجسمه ها رس های خود را دارند. طراحان وب فونت های خود را دارند؟ همانطور که اکنون الیور ریشنشتاین است معروف نوشته شده: “95٪ از اطلاعات موجود در وب به زبان مكتوب است.” پس از توجه دقیق شما به گرافیک های سفارشی سایت ، نمادها ، منوهای زیبا و رابط های تمیز – این یک گناه است که بعد از آن به اجزای حیاتی تایپوگرافی وب بپردازید..

نگران نباشید – لازم نیست شما یک طراح اصلی باشید تا بتوانید متن براق و موثری را تهیه کنید. با رعایت برخی از دستورالعمل ها و اصول معتبر ، تایپوگرافی وب شما اطلاعاتی را که کاربران از آن میل می کنند به شیوه ای که به راحتی قابل خواندن و با فکر باشد طراحی می کند..

ایجاد سلسله مراتب بصری

مهمترین هدف تایپوگرافی خوب وب ایجاد یک است سلسله مراتب مطالبی که بصری از یک عنصر به عنصر دیگر جریان می یابد. تمایز مناسب بین عنوانها ، زیرنویسها و متن متن ، انواع مختلفی از وزن ها و سبک های فونت ، و داشتن فضای سفید کافی بین بلوک های متن ، همه عواملی هستند که باعث می شوند یک تجربه خواندن بی دردسر باشد..

نمونه سلسله مراتبی بصری تایپوگرافی

ساختن بدن قوی

اولین سفارش کار شما این است که اصلی ترین سایت را خراب کنید بدن متن ، زیرا این همان چیزی است که بازدید کنندگان شما بیشتر وقت خود را صرف خواندن می کنند. هدف شما ایجاد متن است که به طور طبیعی در پاراگرافهای بزرگ سرازیر می شود و باعث ایجاد ریتم سالم برای امتداد طولانی خواندن می شود.

  • متداول ترین اندازه قلم برای متن بدن است 16pxیا بهتر است, 1em (بعداً در این مورد بیشتر).
  • از تراز وسط قرار دادن متن خود خودداری کنید ، زیرا لبه های ناهموار هر دو طرف باعث ایجاد منظره ناخوشایند می شوند. در عوض ، چپ و راست را تنظیم کنید لبه ظرف متن به خودکار برای رسیدن به یک اثر مطلوب تر.
  • تعدیل شده متن برای روزنامه ها مفید است ، نه صفحات وب. ماهیت طرح بندی های سیال می تواند شکاف های غیرقابل پیش بینی ای از فاصله بین کلمات ایجاد کند.
  • انتخاب کنید کنتراست کم فونت های بالاتر. فونت ها مانند دیدوت به خوبی برای عناوین جامبو یا برای چاپ با فرمت بزرگ کار کنید ، اما تضاد زیاد آن بین خطوط ضخیم ضخیم و نازک باعث می شود خواندن در اندازه های کوچک در وب سایت ها مشکل باشد.
  • مراقب باشید خوانایی. در بسیاری از فونت های sif-serif پایتخت “I” و حروف کوچک “l” دقیقاً یکسان هستند ، که می تواند سردرگمی غیر ضروری ایجاد کند.
  • مطلوب ارتفاع خط متن پاراگراف بین 1.25-1.5 × اندازه فونت است. بر این اساس بر اساس نوع انتخابی خود تنظیم کنید.

عناوین برای موفقیت

برای بهتر یا بدتر ، بیشتر خوانندگان احتمالاً از صفحه صفحه شما کم می شوند عناوین حتی بدون اینکه با متن اصلی زحمت بکشید. بنابراین ، توجه به این نکته ضروری است که با اطمینان از تایپوگرافی سرفصلهای شما ، توجه بیشتری به آنها جلب شود.

  • اندازه متوسط ​​فونت برای متن عنوان در جایی است 36 پیکسلیا بهتر است ، اطراف 2.25em (ما قصد داریم به این برسیم).
  • توجه باید همیشه به سر قبل از بدن برود. اطمینان حاصل کنید که متن عنوان شما از اندازه قلم خیلی ضخیم در بدن غافل نیست.
  • اطمینان حاصل کنید که عناوین شما انتظارات خوانندگان را برآورده می کند. متن قابل توجهی بزرگتر با فاصله کافی بین پاراگراف فرزندش نشانگر تغییر در موضوع است ، در حالی که عناوین کوچکتر بسیار نزدیک به پاراگراف ها دلالت بر ارتباط بودن محتوا دارند.
  • در صورتی که عنوان شما به خط بعدی پیچیده شود ، توجه داشته باشید که مطلوب است ارتفاع خط برای عنوان است کمتر از آنچه برای متن بدن است.

فضای بین

میزان فضای عناصر صفحه شما در مورد رابطه آنها با یکدیگر بسیار زیاد است و این یک اصل طراحی است که نمی توان از آن غافل شد. هدرهای مسلط که توسط یک اقیانوس سفید رنگ احاطه شده اند ، زمینه ای بسیار متفاوت از هدرهای کوچکتر که به پاراگرافها وصل شده اند فراهم می کنند (به یاد داشته باشید که ما در حال ساخت سلسله مراتب بصری).

به طور کلی ، بهتر است در کنار داشتن فضای سفید بیش از حد کافی اشتباه کنیم. پوسته های تمیز با فضای سفید سخاوتمندانه چیزی است که در وب مدرن ترجیح داده می شود.

افتادن در خط

تصور کنید که متن را روی مانیتور 27 اینچی با وضوح بالا خود می خوانید که تمام راه را در هر دو لبه صفحه نمایش می دهد. چشمان شما فقط بعد از یک بند خسته می شوند!

مهم است که هر خط از متن اصلی خود را به تعداد مشخصی از کاراکترها محدود کنید تا چشم ها روی یک نقطه مرکزی متمرکز شوند. اجماع عمومی این است که این اقدام جادویی برای دسک تاپ است 60-75 کاراکتر طولانی است. برای صفحه های موبایل, در جایی که می خواهیم از چشمان چشمان و متن بیش از حد متراکم جلوگیری کنیم ، این تعداد در اطراف قرار دارد 35-40 کاراکتر در هر خط.

اوج مقیاس

چیزهای زیادی نوشته شده است در موضوع مقیاس گذاری بین اندازه قلم Body و Heading. اندازه متن کامل H2 اگر متن بدن شما مثلاً 1EM باشد ، چیست؟ تعیین زیبایی های دلپذیر نسبت ها بین متن بدن و عناوین H1-H6 خوشبختانه چیزی است که بسیاری از نگارگران قبلاً رمزگشایی کرده اند. علاوه بر این ، این نسبت های ریاضی باید بر اساس اندازه صفحه کاربر نیز سازگار شوند.

طراح جیسون پومنتال ارائه می دهد نمودار مفید برای آنچه او معتقد است بهینه ترین اندازه قلم در دستگاه های مختلف رسانه ای است – و من تمایل دارم که با او موافقم. در واقع ، حتی اگر اندازه ایده آل H1 در یک دسک تاپ ممکن است 3 × اندازه بدن باشد ، در صفحه تلفن همراه این به نظر بیش از حد اغراق آمیز خواهد رسید it بنابراین باید برای کوچکتر کردن منطقه مشاهده کوچکتر شود..

نمودار اندازه فونت بهینه در دستگاههای مختلف رسانه ای

توجه سریع: چگونه می توانید بگویید که آیا شما دارای سلسله مراتب بصری خوبی هستید یا خیر? لمس کردن روی صفحه نمایش شما تا زمانی که تمام متن مبهم شود. اگر طرح به عنوان حفره آمورف و بدون تمایز بین بخش ها ظاهر شود ، ممکن است سلسله مراتب شما از کار بیفتد. با این حال ، اگر به راحتی می توانید جدایی بین بلوک های متن ، عناوین را تشخیص داده و به وضوح بدانید که چشم ها باید به کجا سفر کنند ، در این صورت به شکلی عالی هستید!

پاسخگو نگه داشتن متن

طراحی وب پاسخگو این روزها یک عمل اساسی است – به ویژه هرچه تعداد بیشتری از افراد از دستگاه های تلفن همراه به عنوان وسیله اصلی خود برای مرور اینترنت استفاده می کنند. در حالی که طراحی با درصد و نه پیکسل ها باعث تغییر انقلابی در نحوه تطابق تصاویر و حاشیه ها با عرض سیال شده است ، متاسفانه تایپوگرافی وب پاسخگو متاسفانه یک تخم مرغ سفت تر باقی مانده است.

بهینه سازی اندازه فونت در دستگاه های مختلف می تواند بسیار زیاد شود زیرا باید از طریق چندین سؤال در رسانه حرکت کنید تا تمام متن در وب سایت خود را هدف قرار دهید. با این حال ، با تنظیم سریع واحد انتخابی خود ، می توانید به راحتی اندازه فونت های مناسب را برای استفاده از هر نوع صفحه کشف کنید.

Ems Over Pixels

برای ساده کردن تایپوگرافی سایت خود ، پیکسل را خندید و شروع به استفاده کنید ایمیل. Ems امکان درک آسان تر از مقیاس گذاری بین اندازه فونت سایت شما را فراهم می کند و واحدهای کوچکتر آنها از تعداد پیکسل های دو رقمی پیکسل ها قابل کنترل تر هستند.

مهمتر از همه ، با همه چیز نسبت به ظرف والدین است. اگر تنظیم کنید ارتفاع خط یک ظرف به 1.5em ، حتی اگر اندازه فونت آن ظرف را تغییر دهید ، ارتفاع خط به نسبت صحیح باقی می ماند. با پیکسل ها ، برای حفظ قوام بصری ، باید مرتباً ویژگی خط ارتفاع ظرف را برای هر تغییر اندازه در فونت آن تنظیم کنید.

این اصل صادق است لبه, لایه گذاری, فاصله بین حروف, و بیشتر سبکهای دیگری که برای متن سایت خود اعمال می کنید دیگر به پیکسل های مورد نیاز محتوای شما برای هر جستجوی رسانه توجه نکنید – فقط حالت اولیه خود را در ایمیل تنظیم کنید و به طور خودکار با نسبت های اصلی تنظیم می شود!

با استفاده از Ems

اولین کاری که باید انجام دهید تنظیم مرجع اصلی اندازه فونت سایت شما است. در خود ورق سبک, این را وارد کنید:

بدن {
اندازه قلم: 100٪؛
}

این اندازه فونت نسبی از محتوای سایت شما را تعیین می کند 1em, که اکثر مرورگرها آن را تعبیر می کنند 16px. اکنون تمام اندازه های عنوان شما: 2.25em ، 1.5em و غیره multip چند برابر مستقیم از پایه 1em هستند.

یادداشت مهم: Ems هستند آبشاربزرگنمایی اندازه آنها نسبت به مقدار تعیین شده والدین آن است. به عنوان مثال: اگر اندازه فونت بدن خود را بر روی 1.25 مایل تنظیم کنید و اندازه قلم یک کانتینر کودک را به 1.25 مایل برساند ، هر دو فونت به اندازه یکسان نیستند! در عوض ، متن ظرف کودک 1.25 × خواهد بود. اندازه اصلی والدین 1.25em.

نکاتی بیشتر برای تایپوگرافی عالی وب

چند نکته دیگر برای تایپوگرافی عالی وب در اینجا آمده است:

بیش از حد نکنید

شما باید تایپوگرافی وب سایت خود را محدود کنید 2-3 قلم حداکثر. به طور معمول این می تواند یک فونت برای عناوین شما ، یک قلم برای متن اصلی شما باشد ، و در صورت لزوم یک قلم زیرنویس. استفاده از فونت های زیاد می تواند یک طرح کثیف و مبهم ایجاد کند. همانطور که در مورد بعدی توضیح داده می شود ، زمان بارگذاری سایت شما نیز می تواند تأثیر بگذارد.

قراردادن فقط آنچه شما نیاز دارید

فقط موارد ضروری را برای سایت خود در نظر بگیرید و بقیه را کنار بگذارید. اگر می دانید نیاز دارید منظم, جسورانه و ایتالیایی یک ظاهر طراحی شده برای یک قلم داده شده ، سپس فقط آن گزینه ها را وارد کنید و گزینه را حذف کنید لاغر, سبک و سیاه سبک ها بارگیری سبک بیشتر از حد ضروری می تواند تأثیر بسزایی در منابع سایت شما بگذارد ، زیرا هر سبک جداگانه یک درخواست سرور جداگانه است.

اگر نمی خواهید خلاقیت خود را در مرحله طراحی محدود کنید ، پیش بروید و همه چیز را جاسازی کنید. فقط به یاد داشته باشید که قبل از اینکه سایت شما به صورت زنده انجام شود ، سبک های اضافی را حذف کنید.

اگر نمی توانید آن را بخوانید ، از آن استفاده نکنید

این یک شخص بزرگ است در حالی که گلدار است فونت دست نوشته ممکن است وسوسه برانگیز باشد ، اگر حتی کوچکترین سردرگمی وجود داشته باشد که آیا این یک “g” یا “y” است ، پس از آن استفاده نکنید! هیچ چیز برای خواننده ناامید کننده تر از تلاش برای رمزگشایی یک قلم غیرقابل توصیف است.

متن واقعی مورد علاقه بیش از “Lorem Ipsum”

هر طراح متکی است لورم اپیسوم متن ساختگی برای پر کردن مناطق با محتوای خالی هنگام برنامه ریزی یک طرح. با این وجود ، ممکن است تعجب کنید که چه مقدار از تأثیرگذاری با استفاده از محتوای واقعی می تواند بر ظاهر و احساس تایپوگرافی شما اثر بگذارد. “Lorem ipsum” کاملاً بی احساس و از نظر فکری توخالی است. هیچ سرنخ واقعی ارائه نمی دهد که چگونه کلمات و شخصیت شما از طریق متن بیان می شوند. بنابراین ، قبل از نهایی کردن طراحی سایت ، محتوای واقعی را به سایت خود وصل کنید.

تضاد با پیشینه

یک قلم تاریک در برابر یک پس زمینه سفید ساده همیشه بهترین خوانایی را فراهم می کند. متن سفید در مقابل تصویر تاریک یا تار نیز این روزها رواج دارد. فقط بخاطر داشته باشید که پیش زمینه شما خیلی پیچیده یا مفصل نیست ، و این بر متن پیش زمینه غلبه خواهد کرد.

نمونه تایپوگرافی بد از متن در پس زمینه متننمونه ای از یک روش تایپوگرافی بد با استفاده از زمینه “متن بر متن”.

فونت های زوج – مانند جاذبه هایی مانند

جفت شدن فونت ها با شخصیت های کاملاً متفاوت ، سیگنال های سردرگمی را به وجود می آورد. این دو می توانند از لحاظ سبکی متضاد باشند ، اما از نظر عاطفی نیز باید همان پیام را ارائه دهند.

فونت های زوج – آن را در خانواده نگه دارید

ساده ترین راه حل اغلب بهترین راه حل است. گاهی اوقات بهترین جفت ها با استفاده از تغییرات (سری ، وزن متناوب ، اسلب) در همان Font-Family حاصل می شوند.

لینک های ارتباطی

عمل معمول و مورد انتظار این است تأکید پیوندهای مربوط به رویدادهای شناور را پیوند داده و حذف کنید. هنگام گذر از این مسیر ، اطمینان حاصل کنید که متن تأکید شده شما بصورت مجزا یا غیرفعال شده است جسورانه به جای تأکید برای جلوگیری از سردرگمی.

این روزها ، با این حال ، متن لنگر به طور کلی به جای آن ، با یک اثر گذار هنگام استفاده از پرده ، رنگی می شود. از منظر طراحی ، این بدون شک گزینه بهتر است – اما به یاد داشته باشید که آن را ثابت نگه دارید!

برخی از CSS برای دانستن

این فاصله بین حروف را تحت تأثیر قرار می دهد. برای تأکید بر عناوین مفید است.

حرف-فاصله: x.xxem؛

این فاصله بین کلمات را تحت تأثیر قرار می دهد:

فاصله کلمه: x.xxem؛

این گزینه ای جایگزین برای همه موارد برای تأکید است. همچنین برای اختصارات مفید است.

font-variant: کلاه های کوچک؛

با این کار همه متن شما کپی می شود.

تبدیل متن: حروف بزرگ؛

با این کار از اولین نامه متن سود می برد.

تبدیل متن: سرمایه گذاری؛

این کار باعث پیشرفت برجسته متن خواهد شد.

تزئین متن: خط از طریق؛

این امر باعث بهبود نمایش قلم ها در مرورگرهای مدرن می شود:

ارائه متن: optimizeLegibility

درک انواع فایل فونت

این ایده خوبی است برای جاسازی چندین نوع فایل برای اطمینان از بارگذاری قلمها در طیف گسترده ای از مرورگرها. این مواردی است که شما باید بیشتر به آنها نگران باشید:

TrueType

TTF رایج ترین قالب برای Mac و Windows است و در کلیه مرورگرهای اصلی پشتیبانی می شود.

OpenType

OTF همچنین به طور گسترده پشتیبانی می شود و امکان افزودنی هایی مانند کلاه های کوچک و شخصیت های جایگزین را بدون نیاز به تعبیه یک فونت جداگانه فراهم می کند..

نوع باز تعبیه شده

EOT فقط توسط Internet Explorer supported پشتیبانی می شود و مگر اینکه در مورد کاربران نسخه های قدیمی اینترنت اکسپلورر نگران باشید ، احتمالاً بهترین راه این است که این مورد را کنار بگذارید.

قالب قلم وب باز کنید

WOFF — و جانشین آن ، WOFF2 the پادشاهان جدید در شهر هستند. پشتیبانی از آنها در مرورگرهای اصلی و امکان فشرده سازی ، آنها را به نوع جدید انتخاب پرونده تبدیل کرده است.

نیاز به تبدیل یک نوع پرونده?

شما به احتمال زیاد وارد شرایطی خواهید شد که فقط یک نوع پرونده فونت داشته باشید و باید آن را به نوعی تبدیل کنید. FontSquirrel و Font2Web ابزارهای آنلاین ارائه دهید که دقیقاً همین کار را انجام دهند.

نتیجه

شما قبلاً این را می دانستید محتوا مهمترین جنبه وب سایت شماست. محتوای خوب ساخته شده سزاوار تایپوگرافی دستکاری شده است. بازدید کنندگان سایت را از متن ناامیدی یا خواندن ساختار سردرگم نکنید. با داشتن یک سلسله مراتب بصری با دقت برنامه ریزی شده که به بهترین شیوه های چاپی پایبند است ، می توانید افکار خلاقانه خود را نیز خلاقانه ارائه دهید. تایپ مبارک!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me