تایپوگرافی در طراحی سایت

خلق کردن تایپوگرافی وب زیبا در طراحی سایت : در دهه گذشته ، تایپوگرافی وب به سرعت تکامل یافته است . اینترنت اکسپلورر با استفاده از فرمت EOT از نسخه IE4 در سال ۱۹۹۷ به بعد (بله ، درست میبینید !) از انواع فونت های وب پشتیبانی می کند ؛ اما از همان گام های نخستین ، تایپوگرافی وب به سطحی از بلوغ رسیده که طراحان وب سایت را  در طراحی سایت قادر ساخته که بر ارتقاء زیبایی و کیفیت هر چه تمام تر آن تمرکز کنند و روز به روز این تایپوگرافی ها تکامل بیشتری یابند . در این مقاله قصد بررسی موضوع تایپوگرافی وب و انواع آن را داریم .

 

تایپوگرافی در طراحی سایت

 

شرکت آدوب – Adobe – با ارائه محصول خود ، یعنی TypeKit Web Font Service در سپتامبر ۲۰۰۹ تحول چشمگیری در زمینه تایپوگرافی وب ایجاد کرد . سایر شرکت ها نیز در این راستا محصولاتی چون : Google Fonts شرکت گوگل در می ۲۰۱۰ ، Fontdeck شرکت Clearleft and OmniTI در ژوئن ۲۰۱۰ ، … ارائه نموده اند . در مدت زمان کوتاهی و با در دست داشتن این ابزار ارائه شده توسط شرکت های مختلف ، حالا طراحان سایت قادر هستند در طراحی سایت خود تایپوگرافی وب غنی و فوق العاده ای خلق کنند .

در ادامه ، یک دید کلی از اهمیت تایپوگرافی وب ماکرو و میکرو (macro- and microtypography) در اختیار شما قرار خواهم داد ؛ توجه ویژه به ترتیب کلی متون بر صفحات وب در زمانهای قبل ، تمرکز بر روی نمایش هر چه بهتر جزییات مانند لیگاچرها (ligatures) و فیگرها (figures) در حال حاضر . در راهنمای آنلاین تایپوگرافی وب (که می توانید آن را به طور کامل به همراه کدهای آن در سایت macromicrotypo.com مشاهده کنید) ، ما به واکاوی جزئی تر این موضوع و همچنین نگاهی بر زندگی کاری یکی از پیشگامان طراحی تایپوگرافی از بعد تایپوگرافیک ، جان بسکرویل (John Baskerville) ، خواهیم پرداخت .

تایپوگرافی وب در سطح ماکرو – MacroTypography

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

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

سبک تایپوگرافی صفحات وب با مخاطب حرف می زند

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

اینجاست که درک و فهم تاریخچه تایپوگرافیک به ما کمک می کند . مثلا فونت serif حالت سنتی دارد ؛ sans serif کمی امروزی تر است . اگر به تازگی با این موضوع آشنا شده اید ، گنجینه ای از کتب ارزشمندی برای افزایش اطلاعات در این زمینه وجود که برای شروع ما به شما این ها را توصیه می کنیم : Thinking with Type نوشته الن لوپتون ، The Elements of Typographic Style نوشته رابرت برینگهرست و Detail in Typography نوشته جاست هاچولی . همخوانی از بعد تایپوگرافیک طرح شما را در سطح ماکرو تشکیل می دهد .

بررسی مقیاس های تایپوگرافیک در تایپوگرافی طراحی سایت

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

برای ایجاد بهترین سبک نمایش محتوا برای مخاطب ، باید محتوا را به صورت مفهومی نشان گذاری کرد (توسط HTML) . معمولا محتوا دارای یک سلسله مراتب واضح با معنی است با تعدادی عنوان – <h1> , <h2> , <h3> , … – که نشانگر محتوای آن بخش از صفحه است . با توجه به مقیاسی که انتخاب کرده ایم ، می توانیم سلسله مراتب محتوا را ترتیب دهیم .

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

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

تایپوگرافی وب در سطح میکرو – MicroTypography

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

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

لیگاچرها – ligatures

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

فیگرها – figures

در تایپوگرافی ، ما دائما با فیگرها مواجه هستیم : شماره تلفن ها ، تاریخ تولد ها ، اطلاعات مالی ، آمارها ، عملیات ریاضی و جبری ، … . یک تایپوگرافی خوب طراحی شده ، هم شامل فیگرهای ” سبک قدیمی ” و هم فیگرهای ” خط کشی ” می باشد . فیگرهای خط کشی در اصل جهت استفاده برای پیوستگی با حروف بزرگ طراحی شده اند ؛ در حالی که فیگرهای سبک قدیمی (یا ” حروف کوچک “) برای ترکیب بهتر با تنظیمات متن که به اسندرها (ascenders) – ۶ ، ۸ – و دیسندرهای (descenders) – ۳ ، ۴ ، ۵ ، ۷ ، ۹ – آنها داده شده است ، طراحی شده است .

 

منبع : سئو سایت وب نوش