وقتی شخصی از وب‌سایتی که شما طراحی کرده‌اید بازدید می‌کند، احتمال اینکه زیاد به رنگ‌ها، تصاویر یا صداها اهمیت نمی‌دهد، فوراً به متن نگاه می‌کند.
مهم نیست که چه تعداد زنگ و سوت در یک وبسایت ایجاد کرده‌اید، همه برای انجام هر کاری که از سایت بازدید می‌کنند به متن تکیه می‌کنند.
این به تنهایی باید تایپوگرافی، هنر چینش تایپ، را برای هر طراح وب در اولویت قرار دهد.
در این مقاله به 10 قانون ساده که باید هنگام طراحی پروژه وب بعدی خود در نظر داشته باشید نگاهی می اندازیم.
با طراحی مانند JonesingFor یک طراح بدون درک کامل از متن برای جمع آوری تایپوگرافی که باعث می شود این سایت واقعاً کار کند، با مشکل مواجه می شد. همانطور که به تایپوگرافی خود می پردازید، احتمالاً لازم نیست نگران نوشتن متن سایت باشید – اما باید آن را بخوانید.
بعضی از طراحان وب فکر می کنند که فقط کپی و چسباندن از یک فایل متنی، کل وظایف متنی آنها را تشکیل می دهد. اما خواندن متن حداقل یک ایده اساسی در مورد نحوه ادغام متن در یک وب سایت ارائه می دهد و از قطع ارتباط بین نوشتن و طراحی یک وب سایت جلوگیری می کند.
می‌توانید تایپوگرافی خود را به سطح دیگری ارتقا دهید، اگر بتوانید متن را پس از قرار گرفتن در طرح خود بخوانید. به فضای اطراف حروف توجه ویژه داشته باشید. آیا فضای غیرمعمول بزرگی دارید که عجیب به نظر برسد؟ کمی تایپوگرافی دقیق می تواند این مسائل را برطرف کند. همچنین می‌توانید در مورد خطوطی که ممکن است برای خواندن آسان، طولانی‌تر از حد طولانی باشند، شکستگی‌های ناخوشایند خطوط و مسائل مشابه ایده بگیرید.
فکر می‌کنید می‌توانستید وبسایت عیسی رودریگز ولاسکو را بدون متن واقعی طراحی کنید؟ این سایت به شدت به کلمه نوشته شده وابسته است – و همچنین کلمات بسیار خاص. حتی متن بدنه با دراپ کلاه و برخی تغییرات دیگر که با Lorem ipsum امکان‌پذیر نبود، مورد توجه ویژه قرار گرفت.
مگر اینکه متن وبسایت شما در واقع Lorem ipsum باشد، متن ساختگی هیچ شباهتی به چیز واقعی نخواهد داشت. این بدان معناست که هر گونه تغییری که ممکن است در متن – یا طراحی اطراف آن ایجاد کنید – باید منتظر بمانید تا چیز واقعی را دریافت کنید. درخواست (و دریافت) متن از مشتری در اولین فرصت ممکن به شما این امکان را می دهد که با طرح کلی و تایپوگرافی خود مطابقت داشته باشید.
وقتی به Rik Cat Industries می‌رسید، بلافاصله می‌دانید از کجا باید مطالعه را شروع کنید. . با وجود اینکه چند لینک در بالای صفحه وجود دارد، خوش آمدگویی ریک توجه شما را به خود جلب می کند. این بسیار بزرگتر است، استفاده از تایپوگرافی برای ایجاد یک سلسله مراتب واضح.
هر سایتی به یک سلسله مراتب به خوبی توسعه یافته نیاز دارد: شاخص هایی که نشان می دهد از کجا باید شروع به خواندن کرد و چگونه ادامه داد. تایپوگرافی شما می‌تواند این سلسله مراتب را فراهم کند – درست مانند ریک – تا زمانی که نظم سلسله مراتبی خود را از قبل بدانید. با فکر کردن به اندازه و تایپ‌فیس، می‌توانید قطعه‌ای از متن را به‌عنوان سرفصل به‌گونه‌ای برجسته کنید که مکان‌های مختلف در طرح نمی‌تواند ارائه کند.
البته سلسله مراتب طرح شما فراتر از تایپوگرافی است که استفاده می کنید، اما از آنجایی که کاربران تقریباً همیشه با متن شروع می کنند، منطقی است که طراحان نیز همین کار را انجام دهند.
وب سایت Crowley Webb and Associate با تکیه کامل به تایپوگرافی برای صفحه اول خود، با در نظر گرفتن دو عامل طراحی شده است: تایپوگرافی ماکرو و میکرو.
تایپوگرافی ماکرو ساختار کلی نوع شما است، وقتی که متن خود را به تنهایی به عنوان یک بلوک در نظر می گیرید، چگونه در زمینه طراحی شما و زیبایی آن ظاهر می شود.
تایپوگرافی میکرو بیشتر به جزئیات فاصله گذاری می پردازد، مسائلی که تعیین می کنند آیا کلمات به راحتی خوانده می شوند یا خیر. تایپوگرافی میکرو در کنار هم قرار دادن یک بلوک از متن یک ضرورت مطلق است: اگر خوانا نباشد، ادامه دادن فایده ای ندارد. کراولی وب و همکاران به این سوال از طریق نوشتن دقیق و فاصله گذاری بین کلماتی که سایت برجسته می کرد، پرداختند.
اما تایپوگرافی ماکرو این فرصت را در اختیار شما قرار می دهد که متن خود را با فاصله بیش از حد مناسب بسازید: این فرصتی است که جذاب به نظر برسد و بخشی از کل طراحی شما باشد. انتخاب حروف و رنگ در این وب سایت یک کل قابل اجرا را ایجاد می کند. نادیده گرفتن هر یک از جنبه های تایپوگرافی مضر است.
از دست دادن متن در پس‌زمینه ArtofElan بسیار آسان است، به‌ویژه ترکیب قرمز روشن روی قرمز تیره که توسط طراح استفاده شده است. هنگامی که یک طراح وب با نوع رنگی کار می کند، مراقبت کاملاً ضروری است، هیچ تضمینی وجود ندارد که ترکیب قرمز روی قرمز یا حتی ترکیب زرد بر قرمز قابل مشاهده باشد. از این گذشته، همه از وب‌سایتی بازدید کرده‌اند که به نظر می‌رسید متن فقط یک سایه از رنگ پس‌زمینه فاصله دارد و وقتی سعی می‌کردند آن را بخوانند دچار خستگی چشم شده‌اند.
ساده ترین راه حل برای این وضعیت این است که مطمئن شوید رنگ نوع شما به شدت با پس زمینه شما متفاوت است. سیاه و سفید بسیار خوب کار می کنند زیرا تا آنجا که می توانید به شدت متفاوت هستند، اما ترکیبات رنگی وجود دارد که به خوبی کار می کنند: چیزی در امتداد خطوط آبی تیره روی صورتی روشن کار را انجام می دهد. متن معکوس بسیار مشکل است… در حالی که می‌توانید با متن صورتی روشن روی پس‌زمینه آبی تیره کار کنید، احتمالاً در مورد آن شکایت خواهید کرد.
اگر CSS شما جامد است، می‌توانید مانند نسخه‌های مختلف Hutchouse.com برای ایجاد برخی جلوه های چشمگیر به شیوه نامه های مختلف متکی است. حتی اگر مسائل را تا Hutchhouse پیش نبرید، CSS می‌تواند به حذف مشکلات تایپوگرافی آماتور مانند تغییر تایپ‌فیس و اندازه بین صفحات کمک کند.
سی اس اس می تواند سازگاری آسانی بین تایپوگرافی شما در کل وب سایت فراهم کند. با این حال، اگر در نحوه استفاده از تایپ ثابت هستید، شکستن این یکنواختی حتی به مقدار کم می‌تواند هر چیزی را که می‌خواهید برجسته کنید واقعاً برجسته شود، درست مانند ایجاد و سپس شکستن یک شبکه می‌تواند یک طراحی مؤثر ایجاد کند. در تایپوگرافی وب، ثابت نگه داشتن فونت ها می تواند یک موضوع ساده در CSS باشد.
انتخاب یک جایگزین برای متن مرکزی می‌تواند خوانایی طراحی وبسایت را آسان کند، درست مانند DesignCanChange.org. انتخاب متن در مرکز، به‌ویژه در صفحه‌ای مانند این، صفحه مشکل‌ساز ایجاد می‌کند: لبه‌های ناهمواری که در مرکز هر طرف ایجاد می‌شود خواندن را بسیار سخت‌تر می‌کند و فرصت‌های زیادی برای متن کاملاً در مرکز وجود دارد که باعث تحریف بقیه مطالب می‌شود. طرح های شما روی نمایشگرهای مختلف.
در برخی از حلقه‌ها، تایپ در مرکز تنها یک قدم بالاتر از استفاده از Comic Sans در طراحی وبسایت است. ممکن است آن را به عنوان یک عنوان در نظر بگیرید، اما به طور کلی، تراز کردن متن خود در سمت چپ، خوانندگان شما را بسیار راحت تر می کند، مگر اینکه از راست به چپ بخوانند.
سایت لوئیجی اوتانی نشان می‌دهد که توجه دقیق به علامت‌های نقل قول و سایر نمادها چه چیزی را به شما می‌دهد. : عدم وجود مشکل کامل زمانی که سایت آن نمادها را نمایش می دهد. بسیاری از وب سایت ها دارای نمادهایی هستند که مرورگر نمی تواند نمایش دهد. این میراث این واقعیت است که بیشتر متن‌هایی که یک طراح وب با آن کار می‌کند احتمالاً در مایکروسافت ورد یا نرم‌افزار پردازش کلمه دیگری نوشته شده است که بدون توجه زیاد نویسنده، تغییرات کوچکی در متن ایجاد می‌کند.
یکی از بدترین تغییرات نقل قول‌های هوشمند است: گیومه‌های فرفری Word به‌طور خودکار جایگزین علامت‌های نقل قول مستقیم می‌شود. زمانی که با متن نوشته شده به زبان دیگری کار می‌کنید، یکی دیگر از مشکلات ایجاد می‌شود: لهجه‌ها و لهجه‌ها می‌توانند به همان اندازه مفید بودن Word باعث دردسر شوند. اگر فقط متنی را با چنین تغییراتی در طراحی خود کپی و جای‌گذاری کنید، احتمالاً باید به عقب برگردید و بعداً آنها را اصلاح کنید، حداقل برای برخی از مرورگرهای وب.
در عوض، آنها را در مراحل اولیه طراحی دریافت کنید تا بتوانید بر روی تطبیق متن خود با طراحی خود تمرکز کنید. اگر می‌خواهید آن نمادهای فانتزی و نقل قول‌های هوشمند در طراحی نهایی نشان داده شوند، موجودیت‌های HTML خود را شناسایی کنید.
وقتی اندازه متن را در وبسایت Veerle Pieters افزایش می‌دهید، اینطور نیست بسیار زیبا از اندازه فونتی که او انتخاب کرده استفاده کنید. با این حال، هنوز هم می‌توانید همه چیز را بخوانید، پیوندها را پیدا کنید و غیره، چیزی که در مورد تعداد کمی از وب‌سایت‌ها صادق است.
این به این دلیل است که، تا حدی، بسیاری از طراحان مطمئن می شوند که متن را با فونت 10 نقطه ای یا حتی کوچکتر چیدمان می کنند. اکثر مردم با خواندن چنین فونت‌هایی راحت هستند، اما Baby Boomers بخش بزرگی از جمعیت مرورگرهای وب را تشکیل می‌دهند و بسیاری از این وب‌گردهای سالخورده مرورگرهای خود را تنظیم می‌کنند تا تایپ را تا جایی که می‌توانند نمایش دهند. قوی>. متن شما و همچنین طراحی شما باید بتواند با این واقعیت سازگار شود.
همچنین ارزش این را دارد که اندازه مرورگر می‌تواند بسیار متفاوت باشد و اگر مراقب نباشید، متن را به مکان‌های غیرمنتظره منتقل کنید. اگر افزایش اندازه یک نقطه مشکلاتی ایجاد کند، جمعیت قدیمی‌تر با عجله به وبسایت بعدی می‌رود. نیاز به پیمایش برای همیشه به کنار، نتیجه مشابهی خواهد داشت.
اگر به وبسایت A List Apart نگاه کنید، تقریباً هر بخش بزرگی از متن با حروف sans serif تنظیم شده است و خواندن آن را بسیار ساده تر می کند. سرفصل‌ها و سایر بلوک‌های کوچکتر متن با فونت‌های ردیف‌بندی شده قرار می‌گیرند و تعادلی بین این دو ایجاد می‌کنند.
وقتی نوبت به چیدمان متن روی صفحه می‌رسد، فونت‌های sans serif تقریباً همیشه بهترین گزینه هستند، به‌ویژه اگر فونتی مانند Verdana را انتخاب کنید که برای نمایش در صفحه رایانه طراحی شده است. فونت های سریف شده شانس بیشتری برای نمایش ضعیف، تار یا حتی پیکسلی دارند.
البته نمی توان به طور کامل از سریف ها اجتناب کرد. اما مخصوصاً برای بلوک‌های متنی بزرگ، استفاده از فونت بدون سریف می‌تواند تضمینی برای بازدیدکنندگان به آسانی متن سایت را ارائه دهد. هنگامی که برای پروژه ای فونت انتخاب می کنید، اول گزینه های sans serif خود را بررسی کنید.
تایپوگرافی به راحتی نادیده گرفته می‌شود، و حتی زمانی که یک طراح آن را در نظر می‌گیرد، به راحتی می‌توان آن را به‌عنوان یک فعالیت زمان‌بر و با بازگشت کمی نادیده گرفت. اما صرف حتی چند دقیقه با متنی که محور طراحی شما خواهد بود، می‌تواند آن را از چیزی که هر طراح وب می‌تواند روی یک صفحه بگذارد، به عنصری تبدیل کند که بقیه طراحی را پشتیبانی می‌کند.
