محتوا
- تایپوگرافی خوب چیست؟
- هنر متن خواندنی
- تایپ کردن سایر عناصر
- ریتم عمودی
- شبکه پایه یا خیر؟
- تایپوگرافی برای چندین صفحه نمایش
- کدگذاری برای تایپوگرافی پاسخگو
- واحدهای نسبی
- خلاصه آن
تایپوگرافی پاسخگو سخت است - شما باید هم برش های طراحی داشته باشید و هم دانش فنی داشته باشید. اما هرچند مشکل باشد ، اشتباه گرفتن آن یک گزینه نیست ، زیرا تایپوگرافی سنگ بنای طراحی وب است.
چگونه می توانید هم طرح و هم کد را درست دریافت کنید؟ توسعه دهندگان شما چگونه با طراحان فشار دهنده پیکسل ارتباط برقرار می کنند؟ چگونه طراحان شما می توانند توسعه دهندگان غیرانتفاعی را در مورد تایپوگرافی اهمیت دهند؟ سریعترین و ساده ترین راه این است که طراحان و توسعه دهندگان خود را به یک زبان صحبت کنند ، به همدیگر برای کارشان احترام بگذارند و به دنبال درک اصول و محدودیت های تایپوگرافی وب باشند.
این مقاله با هدف فراهم آوردن بنیادی برای طراحان و توسعه دهندگان است که از آن طریق می توانند ارتباطات مربوط به موضوع تایپوگرافی را آغاز کنند. ما اصول طراحی لازم را پوشش خواهیم داد و راه حلهای عملی برای تایپوگرافی پاسخگو را کشف خواهیم کرد.
تایپوگرافی خوب چیست؟
'خوب' همیشه ذهنی است. این یک لنگر ثابت نیست که بتوانیم ارتباطات را روی آن قرار دهیم. برای اینکه طراحان و توسعه دهندگان بتوانند به طور م communicateثر ارتباط برقرار کنند ، باید با صحبت در مورد یک مخرج مشترک شروع کنیم که هر دو طرف بتوانند آن را درک کنند. این مخرج هدف تایپوگرافی است.
تایپوگرافی ظاهر متن است. ما متن را آراسته می کنیم. هدف از لباس پوشیدن این است که فرد مورد نظر بتواند آنقدر جذاب باشد که بتواند مکالمه را به خود جلب کند ، اما آنقدر توجه را به خود جلب نکند که طرف مقابل از گفتگو منحرف شود.
به همین ترتیب ، هدف از تایپوگرافی این است که خوانندگان را قادر به تمرکز و غرق شدن در محتوای متن کند. تایپوگرافی خوب ، طبق تعریف ، تایپوگرافی است که به متن کمک می کند تا هدف خود را از ارتباطات تحقق بخشد.
برای تمرکز خوانندگان و غرق شدن در متن باید دو اتفاق بیفتد. اول ، تایپوگرافی باید احساسی مناسب (در صورت وجود) را منتقل کند. دوم ، خواندن متن باید آسان باشد. این امر ما را به چهار خاصیت اساسی می رساند که برای درست شدن آنها نیاز دارید.
- خانواده قلم
- اندازه فونت
- ارتفاع خط (همچنین اصطلاحاً پیشرو)
- عرض متن (اندازه گیری متن نیز نامیده می شود)
دریافت خانواده فونت مناسب به درخشش احساسات اساسی متن کمک می کند. دریافت سه ویژگی دیگر به درستی خواندن متن شما را تضمین می کند. در بیشتر موارد ، طراحان در یافتن خانواده قلم مناسب بسیار عالی هستند. بنابراین ، برای ادامه این مقاله ما به سه عامل دیگر خواهیم پرداخت.
هنر متن خواندنی
اولین قدم در هر پروژه تنظیم پروژه است اندازه فونت, ارتفاع خط و عرض متن بدن شما این فرآیند را حروفچینی می نامند. با تایپ کردن صفحه ای که حاوی اطلاعات مورد نیاز کاربر است شروع کنید. تا آنجا که ممکن است ، این صفحه باید شامل چندین عنصر مانند h1 ، h2 ، h3 ، متن اصلی و زیرنویس ها باشد ، برای این منظور باید آگاهانه انتخاب کنید که چه چیزی برای طراحی شما مناسب است. هرچه عنصر صفحه شما بیشتر باشد ، شانس شما برای تنظیم یک نوع برنامه که در سراسر صفحه کار می کند بیشتر است.
وقتی گزینه را انتخاب می کنید اندازه فونت, ارتفاع خط و متن بدن خود را اندازه بگیرید ، مطمئن شوید که از محتوای واقعی استفاده می کنید. اگر محتوای واقعی ندارید ، به جای Lorem Ipsum از متن ویکی پدیا استفاده کنید.
همچنین باید خود را در همان وضعیتی که برای آن تایپ می کنید قرار دهید ، زیرا فاصله بین چشم خواننده و صفحه نمایش برای دستگاه های مختلف متفاوت است. اگر برای یک دستگاه تلفن همراه حروفچینی می کنید ، به خروجی خود از طریق تلفن نگاه کنید. اگر برای لپ تاپ حروفچینی می کنید ، با لپ تاپ خود پشت میز بنشینید و موارد دیگر.
پس از استقرار در محیط مناسب ، ابتدا با انتخاب مرحله حروفچینی خود را شروع کنید اندازه فونت، به دنبال اندازه گیری و در نهایت ارتفاع خط. به خاطر داشته باشید که هیچ ترکیب کاملی وجود ندارد - فقط به صفحات دیگر نگاه کنید که احساس می کنید تایپوگرافی خوبی دارید و خواهید دید که هیچ یک از آنها از همان استفاده نمی کنند اندازه فونت, ارتفاع خط و اندازه گیری کنید. بنابراین ، آنچه شما در نظر دارید متن ساده ای است که خواندن آن آسان است.
توضیح نوشتن تنظیم اندازه های مناسب دشوارتر است ، بنابراین من چند فیلم برای کمک به شما در اندازه ، اندازه گیری و هدایت قلم تهیه کرده ام.
در اینجا چند دستورالعمل سریع آورده شده است تا به شما کمک کند از اندازه و اندازه قلم خوبی برخوردار باشید.
قلم شما خیلی کوچک است اگر:
- برای خواندن متن باید تمرکز کنید
- شما باید چشمان خود را به هم بزنید
- شما تمایل به بزرگنمایی دارید
فونت شما خیلی بزرگ است اگر:
- شما به جای خواندن محتوا ، متوجه فرم های حروف می شوید
- می توانید همزمان فقط یک تا سه کلمه بخوانید
- شما تمایل به کوچک کردن دارید
اندازه متن شما خیلی طولانی است اگر:
- برای خواندن متن باید سر خود را برگردانید
- در میانه راه تمرکز خود را از دست می دهید
اندازه متن شما بسیار کوتاه است اگر:
- وقتی متن به سطر بعدی می رود ، احساس عصبانیت می کنید
- چشمان شما از سرعت سریع به چپ و راست خسته می شوند
پیشروی شما بسیار محدود است اگر:
- متن متراکم و طاقت فرسا است
- شما خط متن را به طور تصادفی خوانده اید
پیشروی شما خیلی زیاد است اگر:
- فضای سفید بین ردیف کلمات حواس شما را پرت می کند
همیشه تعریف تایپوگرافی خوب را به خاطر بسپارید: شما دنبال کمال نیستید ، به سادگی متنی را می خوانید که خواندن آن آسان باشد. در حین انجام این کار ، می خواهید گزینه های حروفچینی خود را با مخاطبان خود آزمایش کنید (دوستان و همکاران نیز آزمایش کنندگان خوبی دارند) تا مطمئن شوید حق با شماست. فقط وقتی حروفچینی متن متن را تمام کردید ، به تنظیم اندازه سایر عناصر بروید.
تایپ کردن سایر عناصر
بسیاری از طراحان و توسعه دهندگان اندازه فونت برای عناصری مانند h1 و h2 بصری ، و به راحتی امیدواریم که این اعداد جادویی به خوبی در طراحی آنها کار کنند. اما نیازی به بیرون آوردن اعداد از هوا نیست. تایپیست ها برای کمک به این مسئله از مقیاس های تایپوگرافی برای قرن ها استفاده کرده اند. کاری که شما انجام می دهید این است که از مقیاس تایپوگرافی یک عدد را به عنوان اندازه عنصر خود انتخاب کنید. متأسفانه ، از این مقیاس ها نمی توان مستقیماً برای وب استفاده کرد زیرا برای طراحی چاپ ساخته شده اند.
تیم براون ، متخصص در زمینه تایپوگرافی ، راه حلی به نام مقیاس مدولار ارائه داد. این عملکرد دقیقاً مانند مقیاس تایپوگرافی عمل می کند ، با این تفاوت که مقیاس مدولار را با متن بدنی که برای آن تصمیم گرفته اید ، می سازید.
برای ایجاد مقیاس مدولار ، متن اصلی را می گیرید اندازه فونت (اندازه فونت پایه نیز نامیده می شود) و چندین بار آن را در یک ضرب ضرب کنید تا زمانی که مقیاس بگیرید. غالباً ، نسبت مورد استفاده شما از موسیقی حاصل می شود (از آنجا که موسیقی ریشه در هماهنگی دارد). در بالا نمونه ای از مقیاس ایجاد شده است که با کمک ماشین حساب مقیاس مدولار ایجاد شده است.
پس از ساخت مقیاس مدولار ، می توانید به حروفچینی بقیه عناصر خود بپردازید ، و یک عدد را از مقیاس به عنوان اندازه فونت. سپس پیشرو را تنظیم کنید و با همان روند اندازه گیری کنید تا زمانی که تعادل خوبی از عناصر خوانا بدست آورید.
ریتم عمودی
مرحله بعدی کمک به ژل کردن تک تک عناصر با استفاده از تکنیکی به نام ریتم عمودی است. برای اینکه یک عنصر به طور هماهنگ به عنصر دیگر سرازیر شود ، باید چیزی را که به آنها می پیوندد ، تغییر دهیم: فضای سفید. این فضای سفید باید به اندازه کافی بزرگ باشد تا به طور واضح یک عنصر را از عنصر دیگر متمایز کند ، اما باید به اندازه کافی کوچک باشد تا اطمینان حاصل شود که جریان شکسته نشده است.
چه مقدار فضای سفید باید استفاده کنید؟ بسیاری از طراحان شکل مانند 10px را انتخاب می کنند که طراحی آنها برای آنها آسان است. از طرف دیگر ، بسیاری از توسعه دهندگان تمایل دارند یک عدد تصادفی (مانند 6 پیکسل) را از طریق سیستم شبکه دیگری یا مقاله ای که به صورت آنلاین خوانده اند ، شلاق بزنند. جای تعجب نیست که این دو نمی توانند با هم ارتباط برقرار کنند.
همانطور که تصور می کنید ، نیازی به اعتماد به یک عدد جادویی برای فضای سفید نیست. ما می توانیم از مضربی از ارتفاع خط ارزش متن بدن ما این بدان دلیل است که ما به طور غریزی الگوهای فضای سفید درون متن را تشخیص می دهیم. هرچه الگو قویتر باشد ، احساس امنیت بیشتری می کنیم و راحت تر اجازه می دهیم ذهن ما در محتوا سرگردان شود.
برای استفاده از ریتم عمودی ، تمام آنچه انجام می دهید این است:
- فضای سفید بین عناصر را روی مضربی از پایه تنظیم کنید ارتفاع خط
- تنظیم کنید ارتفاع خط از همه عناصر دیگر به مضربی از پایه ارتفاع خط
ضرب مورد نظر نیازی به یک عدد صحیح نیست. می توانید از مقادیری مانند 0.5x و 1.25x پایه استفاده کنید ارتفاع خط تا انعطاف پذیری بیشتری برای شما ایجاد کند. این مقادیر به این دلیل کار می کنند که ریتم عمودی از اصل تکرار استفاده می کند.
شبکه پایه یا خیر؟
هر زمان که از ریتم عمودی نام می بریم ، مفهوم شبکه پایه به طور حتم در تصویر ظاهر می شود. اگرچه شبکه پایه به طور بالقوه می تواند مفید باشد ، اما بیشتر یک قطعه قطعه قطار است زیرا مبتدیان آنقدر انرژی را متمرکز می کنند که متن بین خطوط اصلی (یا روی آن) بنشیند تا درست بودن ریتم عمودی را غیرممکن بدانند.
راستش را بخواهید ، شما هرگز به شبکه های پایه نخواهید رسید که به طور کامل در وب کار کنند زیرا ریاضیات در تایپوگرافی همیشه حاوی زیر پیکسل هستند (مانند 24.8 پیکسل) ، و همه مرورگرها با ساب پیکسل ها به طور متفاوتی رفتار می کنند. به عنوان مثال ، برخی از مرورگرها باعث می شوند که هر عنصر صفحه با 1 پیکسل خاموش باشد. این خطاهای 1 پیکسل هر عنصری را که در پایین صفحه قرار دارد حتی بیشتر از شبکه جمع می کند و فشار می دهد. در نتیجه استفاده از شبکه پایه را توصیه نمی کنم.
در حال حرکت ، بیایید به حوزه عملکردهای پاسخگو و طراحی برای چندین صفحه قدم بگذاریم.
تایپوگرافی برای چندین صفحه نمایش
طراحی تایپوگرافی برای چند صفحه نمایش هیچ معنایی ندارد. از نظر طراحی سه کار باید انجام شود.
ابتدا فاصله بین چشم کاربر و صفحه نمایش او به نوع دستگاهی که وی استفاده می کند بستگی دارد. به طور کلی ، هنگام استفاده از صفحه نمایش بزرگتر ، کاربر دستگاه را دورتر قرار می دهد. این پدیده بدان معنی است که شما باید اندازه قلم خود را با افزایش عرض دستگاه افزایش دهید.
دوم ، ما می خواهیم تناسب بین متن متن و سایر عناصر را ثابت نگه داریم. این بدان معناست که ما باید اندازه همه عناصر را با افزایش اندازه متن متن افزایش دهیم.
سوم ، در نقاط شکست خاص می خواهیم میزان آن را افزایش دهیم اندازه فونت از عناصر خاص (مانند h1) با انتخاب عددی متفاوت از مقیاس مدولار. با انجام این کار می توان سلسله مراتب بصری را کنترل کرد و اطمینان حاصل کرد که عناصر توجه کافی را به خود جلب می کنند تا کاربر را به خواندن ادامه دهد.
کدگذاری برای تایپوگرافی پاسخگو
ما می دانیم که باید متن متن خود را متناسب افزایش دهیم. ساده ترین راه برای این کار افزایش میزان است اندازه فونت در داخل html انتخابگر ما همچنین می خواهیم از واحدهای نسبی برای احترام به کاربر استفاده کنیم اندازه فونت ترجیح.
html {font-size: 100٪؛}media (min-عرض: 40em) {html {font-size: 112.5٪؛}}
ما همچنین می خواهیم برای سایر عناصر از یک واحد نسبی استفاده کنیم ، بنابراین آنها مطابق با HTML مقیاس بندی می شوند اندازه فونت (h2 در مثال زیر) اگر شما نیاز به تغییر اندازه فونت در مقیاس مدولار به یک عدد متفاوت ، تنها کاری که می کنید این است که اندازه فونت بر این اساس (h1 در زیر)
h1 {font-size: 2.369em؛}media (min-width: 40em) {html {font-size: 3.147em؛}} h2 {font-size: 1.777em؛}
اگرچه این فرآیند ساده به نظر می رسد ، اما توسعه دهندگان جدید ممکن است به دلیل ریاضیات درگیر با هزاران سردرد مواجه شوند ، به همین دلیل توصیه می کنم از توابع و مخلوط ها برای کمک به آنها استفاده کنید. من اغلب استفاده می کنم اماس() از کتابخانه مقیاس مدولار. با این کار می توانید بنویسید ms (4) بجای 3.157em و ms (3) بجای 2.369em.
مثالی از تابعی که می تواند بار محاسبه ریتم عمودی را کاهش دهد:
function vr ($ rhythm) {return $ rhythm / 16 * 1rem؛}
این نسخه تابع به شما امکان نوشتن می دهد vr (3) به جای محاسبه خودتان ، برای چندین خط مبنا. برای کمک به شما (و خودم) در ادامه کار ، یک کتابخانه پاسخ گویی تایپوگرافی به نام Typi ایجاد کرده ام.
واحدهای نسبی
تمام بحث ها در مورد واحدهای نسبی با این س questionال که آیا شما باید استفاده کنید پایان می یابد بازسازی یا آنها واحد من معتقدم که بازسازی و آنها موارد استفاده منحصر به فرد خود را دارند ، و شما باید آنها را در شرایط مختلف استفاده کنید. در اینجا دو قانون وجود دارد که ممکن است در انتخاب واحد مورد استفاده به شما کمک کند:
- استفاده کنید آنها اگر ملک نیاز به مقیاس با داشته باشد اندازه فونت
- در غیر این صورت ، استفاده کنید بازسازی
برای کسب اطلاعات بیشتر در مورد انتخاب بین این واحدها ، به این مقاله مراجعه کنید.
خلاصه آن
در این مقاله با نکات ضروری تایپوگرافی پاسخگو وب آشنا شده اید. مطمئناً ، با عمق رفتن بیشتر ، چه در تئوری و چه در اجرا ، جزئیات بیشتری خواهید یافت ، اما آنچه در اینجا دارید ، 80 درصد از آنچه در یک پروژه واقعی نیاز دارید را پوشش می دهد. مجهز به این دانش ، شما آماده شروع گفتگو با طراحان و توسعه دهندگان در مورد نحوه طراحی و کدگذاری تایپوگرافی مناسب برای وب پاسخگو هستید.
تایپوگرافی پاسخگو بسیار دشوار نیست. این فقط چالش برانگیز است زیرا شما برای کشف اصول مربوطه و استفاده از آنها به روشی متناسب با وب ، به مقدار زیادی صبر و کوشش نیاز دارید.
این مقاله در اصل در مجله نت. مشترک شدن در اینجا.
