آیا باید مطمئن شوید که وب سایت یا برنامه شما در همه انواع نمایشگر خوب به نظر می رسد؟ اینجاست که تایپوگرافی پاسخگو CSS وارد می شود.
توسعه یک وب سایت با نقاط شکست بسیار زیاد می تواند خسته کننده باشد. تکنیک های جدید زیادی برای یادگیری در CSS وجود دارد، چه یک توسعه دهنده با تجربه و چه یک توسعه دهنده سطح متوسط.
اما چگونه می توان با تایپوگرافی واکنش گرا شروع کرد؟ در اینجا نحوه انجام مراحل برای تطبیق صفحات وب با هر اندازه صفحه نمایش آمده است.
اهمیت تایپوگرافی پاسخگو
تایپوگرافی با اطمینان از خوانایی، قابلیت استفاده و زیبایی کلی یک وب سایت، نقشی حیاتی در توسعه و طراحی وب ایفا می کند. همه به دنبال یک وب سایت واکنش گرا هستند. آیا عالی نیست اگر متن یا فونت ها به طور خودکار با اندازه های مختلف صفحه تنظیم شوند؟ از دیگر مزایای تایپوگرافی ریسپانسیو در توسعه وب می توان به موارد زیر اشاره کرد.
- با اطمینان از خوانایی و خوانایی، تجربه کلی کاربر را در دستگاه‌ها یا اندازه‌های صفحه‌نمایش مختلف بهبود می‌بخشد.
- این امکان دسترسی به کاربران با اختلالات بینایی یا سایر ناتوانی ها را افزایش می دهد. تنظیمات مختلف کاربر مانند اندازه فونت قابل تنظیم را در خود جای می دهد.
- تایپوگرافی ثابت در بین دستگاه ها و وضوح به حفظ هویت برند و وحدت بصری کمک می کند.
در اینجا یک الگوی کد وجود دارد که می توانید قبل از شروع به ویرایشگر کد خود کپی کنید تا بتوانید تکنیک هایی را که باید مورد بحث قرار گیرند دنبال کنید.
فایل کد HTML
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Responsive Typography </title>
</head>
<body>
<div class="container">
<h1> Lorem ipsum </h1>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis!
</p>
</div>
</body>
</html>
فایل کد CSS
/*style.css*/
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
width: 400px;
background-color: antiquewhite;
padding: 15px;
box-shadow:0 2px 5px rgba(0,0,0, 0.1) ;
}
h1{
color: hotpink;
}
اکنون، بیایید برخی از روش‌ها و تکنیک‌های موثر برای پیاده‌سازی تایپوگرافی واکنش‌گرا با استفاده از CSS را بررسی کنیم
1. بستن
این یک تکنیک مدرن تایپوگرافی CSS است که اجازه می دهد و تضمین می کند که اندازه فونت یک عنصر در محدوده خاصی باقی بماند. تابع گیره “Clamp()” دارای سه پارامتر است، حداقل مقدار، مقدار ایده آل و مقدار حداکثر. عملکرد گیره به تایپوگرافی محدود نمی شود. می توان از آن برای تصاویر، کارت ها، فیلم ها و سایر رسانه ها استفاده کرد. اینجوری کار میکند.
گیره (حداقل مقدار، مقدار ایده آل، حداکثر مقدار):
h1{
font-size: clamp(2rem, 5vw, 3rem);
}
p{
font-size: clamp(1rem, 3vw, 2rem);
}
در این مثال، اندازه فونت برای عنوان و پاراگراف با استفاده از تابع “clamp()” تنظیم شده است. برای عنوان “h1” حداقل مقدار روی “2rem” تنظیم شده است تا اطمینان حاصل شود که اندازه قلم از دو برابر اندازه فونت ریشه کمتر نمی شود. مقدار ایده آل یا ترجیحی روی “5vw” تنظیم شده است، که 5٪ از عرض دید است که آن را به اندازه های مختلف صفحه نمایش پاسخ می دهد. حداکثر مقدار روی “3 rem” تنظیم شده است تا اطمینان حاصل شود که اندازه قلم از سه برابر اندازه فونت ریشه بزرگتر نخواهد بود. برعکس برای یک ظاهر طراحی پاراگراف.
بهترین روش استفاده از عرض نمای «vw» یا درصد «%» برای مقدار ایده‌آل است، زیرا به ویژگی اجازه می‌دهد تا بر اساس فضای موجود مقیاس‌بندی شود و طراحی واکنش‌پذیرتر شود. مطمئن شوید که می دانید از کدام واحد CSS باید برای سناریوی خود استفاده کنید.
2. پرسش رسانه ای
این رایج ترین تکنیک تایپوگرافی است که توسط توسعه دهندگان استفاده می شود. این شامل ایجاد پرس و جوهای رسانه ای برای هر نقطه شکست است. این به شما امکان می دهد سبک های خاصی را بر اساس اندازه های مختلف صفحه نمایش اعمال کنید. در اینجا یک تصویر است:
/* Default font-size */
h1{
font-size: 38px;
}
p{
font-size: 20px;
}
/* Font-size for small screens */
@media (max-width:800px){
h1{
font-size: 32px;
}
p{
font-size: 18px;
}
}
/* Font-size for smaller screens */
@media (max-width:400px){
h1{
font-size: 28px;
}
p{
font-size: 15px;
}
}
در این مثال، عنوان و پاراگراف به ترتیب روی مقدار پیش‌فرض «38px» تا «20px» تنظیم شده‌اند. سپس، شرایطی برای اندازه‌های کوچک‌تر صفحه نمایش تعیین می‌شود تا طرح‌بندی در تلفن‌های همراه پاسخگو باشد. شما می توانید هر تعداد درخواست رسانه ای را که دوست دارید بر اساس طراحی و پاسخگویی که می خواهید ایجاد کنید، در میان بسیاری دیگر از ترفندهای CSS پرس و جو رسانه که باید بدانید.
3. CSS Custom Properties
همچنین به عنوان متغیرهای سفارشی CSS شناخته می‌شود، مقادیری را ذخیره میکند که می‌توانند در طول استایل شما دوباره استفاده شوند. می توان از آن برای تایپوگرافی استفاده کرد تا مدیریت و سفارشی سازی آسان را فراهم کند. در اینجا یک مثال است.
:root {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
font-size: var(--heading-font-size);
}
p{
font-size: var(--paragraph-font-size);
}
@media (max-width:800px){
:root {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@media (max-width:400px){
:root {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}
در این مثال، ویژگی CSS در سطح ریشه تنظیم شده است که به ما امکان می دهد به آن در سطح جهانی دسترسی داشته باشیم. –heading-font-size و –paragraph-font-size به ترتیب نام های توصیفی برای عنوان و پاراگراف هستند که مقادیر پیش فرض برای هر دو داده می شود. این تکنیک را می توان برای پرس و جوهای رسانه های مختلف مورد استفاده مجدد قرار داد تا از سازگاری در سراسر صفحه اطمینان حاصل شود.
بهترین شیوه های تایپوگرافی پاسخگو
در میان توسعه دهندگان، استفاده مستقیم از عرض دید (vw) برای انجام تایپوگرافی معمول است. اگرچه ساده است و به نظر می رسد که کار می کند، اما در اندازه های صفحه نمایش کوچک کوچک و در اندازه های صفحه نمایش بزرگ بسیار بزرگ می شود. هنگامی که صفحه خود را بزرگنمایی و کوچکنمایی می کنید نیز این اتفاق می افتد. اگر می توانید، از استفاده مستقیم از viewport مانند این اجتناب کنید.
h1{
font-size: 2vh;
}
همیشه تست کنید و مطمئن شوید که تایپوگرافی شما در اندازه های مختلف صفحه قابل خواندن است و همیشه سازگاری مرورگر را آزمایش کنید. خوانایی را در نظر بگیرید و مطمئن شوید که اندازه فونت خیلی کوچک یا خیلی بزرگ نیست
تایپوگرافی پاسخگو کلید طراحی وب خوانا است
تایپوگرافی ریسپانسیو نقشی اساسی در طراحی و توسعه وب دارد. با پیاده‌سازی روش‌ها و تکنیک‌هایی مانند بستن، پرسش‌های رسانه، و ویژگی‌های سفارشی CSS، می‌توانید از مقیاس‌های تایپوگرافی خود در اندازه‌های مختلف صفحه نمایش و دستگاه‌ها اطمینان حاصل کنید. هنگام تلاش برای ایجاد پاسخگویی با استفاده از CSS، تکنیک های زیادی برای کشف وجود دارد – از این تکنیک ها برای شروع توسعه تخصص در این زمینه استفاده کنید.