تایپوگرافی زیبا در طراحی وب. تایپوگرافی زیبا در طراحی وب تایپوگرافی زیبا

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

این تایپوگرافی با ترکیب کاغذی ظریف همراه است و باعث می شود احساس خواندن کتاب شود.

به سادگی آدامس

با تشکر از فونت های وب برای کمک به مطابقت تایپوگرافی بسته بندی محصول با تایپوگرافی سایت سازنده. این بیشتر و بیشتر اتفاق می افتد. Simply Gum گوتهام را برای مارک تجاری خود انتخاب کرد که هویت ثابت آن را در هر دو کانال آنلاین و آفلاین حفظ کند.

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

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

نتیجه گیری مختصر

خوشبختانه ، مثالهای بالا نشان داده اند که برخی تصمیمات تایپوگرافی چگونه می توانند بر طراحی تأثیر بگذارند. در اینجا چند ایده اصلی آورده شده است:

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

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

این یادآوری به شما کمک می کند تا نگاهی تازه به پروژه های خود بیندازید ، به رویکردهای جدید بیندیشید یا به طرح های ساده بازگردید.

بنابراین امروز ، ما روندهای مرسوم ، مد روز را نادیده خواهیم گرفت ، بر تئوری تایپوگرافی و اینکه چگونه "قوانین" می توانند به ما در ایجاد متن زیبا کمک کنند ، توجه خواهیم کرد.

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

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

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

ردیابی و هسته گیری

ردیابی و هسته بندی اغلب اشتباه گرفته می شوند. Kerning تغییر انتخابی فاصله بین حروف بسته به شکل آنها است. پیگیری در حال تغییر فاصله بین مجموعه حروف ، به عنوان مثال ، پاراگراف ها یا کل متن است.

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

تعداد سبکهای استفاده شده را محدود کنید

برای بیشتر پروژه ها ، دو یا سه سبک کافی است. برای اینکه در انتخاب خود اشتباه نکنید ، به دنبال یک خانواده قلم باشید مقدار زیادتغییرات سبک موجود فونت های با بهترین کیفیت در سبک های مختلف - پررنگ ، منظم ، اریب ، متراکم ، سیاه و غیره ارائه می شوند.

سبک ها را با هم مخلوط و مقایسه کنید

من توصیه می کنم دو سبک مختلف را انتخاب کنید. رایج ترین جفت serif و sans serif است. هنگام ترکیب سبک ها و چهره های مختلف ، به دنبال حروف با همان قد و شکل کاسه بگردید (فضای داخل حروف بسته مانند "o").

این جزئیات کوچک به طور قابل توجهی در چگونگی به نظر رسیدن این فونت ها و خوانایی متن تأثیر می گذارد.

خط خط و توجیه

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

قلم ها را تغییر ندهید

هرگز قلم را تغییر ندهید. سعی نکنید ضخیم تر ، نازک تر یا بلندتر باشد. بهتر است یکی دیگر را انتخاب کنید.

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

اگر فونت مناسب شما نیست ، پس به دنبال چیز دیگری باشید. از ابزار Identifont similar font استفاده کنید ، ابزاری که قلم های مشابه را تشخیص می دهد.

تضاد

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

رنگ یکی از م effectiveثرترین و راههای سادهایجاد کنتراست. کنتراست کامل متن تیره روی پس زمینه روشن است (یا بالعکس). شما یک آرایه تقریباً نامحدود از رنگ دارید که به شما در رسیدن به این هدف کمک می کند. هنگام بازی با رنگ و تایپوگرافی ، به خاطر داشته باشید که خواندن برخی ترکیبات رنگی ، مانند قرمز روشن روی آبی روشن بسیار دشوار است.

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

قالب شماره گیری شماره گیری

قالب نوار شماره گیری اندازه ظرفی است که حاوی متن است. این می تواند عرض کل فرمت متن یا یک ستون باشد.

قالب رشته مهم است زیرا تعداد نویسه ها (از جمله فاصله ، نویسه های خاص و علائم نگارشی) روی صفحه بر خوانایی تأثیر می گذارد. اگر خطوط خیلی طولانی یا خیلی کوتاه باشد ، حرکت در آن برای نگاه کاربر دشوار است.

از عناصر سبک تایپوگرافی: "هر تعداد نویسه بین 45 تا 75 طول خط رضایت بخش یک مجموعه یک ستونی در نظر گرفته می شود. یک رشته 66 کاراکتری (شامل حروف و فاصله) ایده آل تلقی می شود. برای تایپ چند ستونی ، محیط ایده آل یک رشته کاراکتر 40-50 خواهد بود. "

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

ترجمه کری کوزینز

این لیست بر اساس سه ماهه دوم تهیه شده است. سال 2008 "نمودارها" قبلی را می توان یافت و.

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

کنفرانس بذر

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

طراحی اخبار

تضاد بزرگ بین عنوان اصلی و محتوای اصلی ، فضای تمیز زیاد و سازماندهی مناسب.

OmniTI

آرم زیبا ، متن واضح و رنگ های بسیار زیبا. می توانید در مورد توسعه طراحی بیشتر بخوانید.

طراح

یک آرم زیبا و آراسته (کسی می داند فونت چیست؟) و بسیاری از جزئیات پیچیده.

نمای طراحی

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

WordPress.org & WP 2.5.x مدیر

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

نوع ما

من واقعاً نمی خواستم این سایت را در بررسی وارد کنم ، زیرا از فلش استفاده می کند. با این حال ، ارائه یک فونت عالی (و برخی از موارد دلخواه من ، باید اضافه کنم) کار بسیار خوبی انجام می دهد.

عرشه

سایت دیگری که در همه موارد فقط بر اساس فونت است. مثال عالی سلسله مراتب و نشانه گذاری. چه کسی گفت که "عکاسی بیش از هزار کلمه صحبت می کند"؟ نه ، فونت بهتر صحبت می کند.