Type یکی از پرکاربردترین عناصر وب است. در مورد آن فکر کنید. مگر اینکه یوتیوب یا فلیکر نباشید، این احتمال وجود دارد که بازدیدکنندگان سایت شما برای محتوای متنی شما بیایند – نه بسته بندی فانتزی که آن را احاطه کرده است. پس چرا طراحان وب همچنان با متن مانند یک عنصر ثانویه رفتار می کنند؟
تایپوگرافی خوب باعث نظم در صفحه و افزایش خوانایی می شود. این به افراد امکان می دهد اطلاعات را سریعتر پردازش کنند.
یک سایت قابل اسکن و خواندن بیشتر به معنای بازدیدکنندگان خوشحال است. بازدیدکنندگان خوشحال اغلب برمی گردند، محصولات می خرند، نظرات خود را می نویسند و سایت را با دوستان خود به اشتراک می گذارند. ببینید چرا ممکن است ارزش فکر کردن را داشته باشد؟
میتوانم برای همیشه درباره اینکه تایپوگرافی تا چه حد در وب پیشرفت کرده است و هنوز چقدر باید پیش برود، ناله کنم. من اغلب بین طراحی وب و چاپ جهش کرده ام. وقتی از InDesign به TextMate می روید، محدودیت های نوع وب کاملاً واضح است.
اما در مورد کارهایی که نوع وب نمی تواند انجام دهد، مطالب زیادی گفته شده است. این غرغر دیگری نخواهد بود. در عوض، بیایید بر روی 5 راه حل آسانبرای چشم های تایپی که در سراسر وب فراوان هستند تمرکز کنیم.
1 . از A Reset Stylesheet استفاده کنید
احمقانه، اما درست: هیچ دو مرورگری از پیشفرضهای ارائه یکسان استفاده نمیکنند. تفاوتها در بالشتکها، حاشیهها، سرفصلها و تورفتگیها بسیار زیاد است. اگر میخواهید طرحبندی صفحهتان در بین مرورگرها سازگارتر باشد، بهتر است با یک صفحه سبک CSS Reset شروع کنید.
من توصیه می کنم:
صفحه بازنشانی CSS یاهو
شیوه بازنشانی CSS اریک مایر
2. مراقب اندازه گیری خود باشید
Measure به طول یک خط از نوع اشاره دارد. خط طولانی تر = اندازه گیری طولانی تر. مطالعات نشان دادهاند که برای خوانایی بهینه، ستونهای متنی در حال اجرا مانند کپی متن اصلی شما باید بین 45 تا 75 کاراکتر (30 تا 50 ems) از جمله فاصلهها باشد. این یکی از دلایلی است که طرحهای سیال (آنهایی که در آن ستونها به اندازه عرض مرورگر منبسط و منقبض میشوند) برای چشم سختتر میشوند.
علاوه بر این، پیشرفت شما باید با طول اندازه گیری شما افزایش یابد. Leading مقدار فضای سفید بین خطوط متن است و از طریق ویژگی CSS line-height کنترل می شود. اگر نیاز به استفاده از اندازهگیری طولانیمدت دارید، مطمئن شوید که راهنمای شما باز میشود.
به همین ترتیب، اگر ستون کوچکی مانند یک نوار کناری با اندازهگیری کوتاه دارید، پیشروی شما باید محکمتر باشد. به نظر من مقدار پیش فرضی که اکثر مرورگرها اختصاص می دهند کمی بیش از حد تنگ است. ارتفاع خط حدود 1.4 میلی متر برای بیشتر محتوای بدن به خوبی کار می کند.
3. تمایل به فضای بین
این فقط مربوط به متن شما نیست – به فضایی که آن را احاطه کرده است. فضای بسیار کم خواندن متن را سخت می کند، اما بیش از حد هم همینطور. نکته کلیدی این است که یک تعادل ساده پیدا کنید که چشم را از یک عنصر به عنصر بعدی هدایت کند.
یکی از اشتباهات رایج طراحان جدید این است که هر اینچ فضا را پر می کنند. فضای سفید به فضای خالی یا “منفی” در اطراف محتوای شما اشاره دارد و بسیار مهم است. به یک مجله خوب طراحی شده مانند Dwell یا Good نگاهی بیندازید و متوجه خواهید شد که حتی اگر آن را داشته باشد. چاپ هر صفحه برای ناشر هزینه می کند، فضای خالی زیادی در اطراف متن باقی می گذارد. صفحه در تعادل خواهد بود و چشم شما به طور موثر از فضا به فضا حرکت می کند.
علاوه بر تنظیم ارتفاع خط خود (همانطور که در شماره 1 ذکر شد)، سعی کنید بالشتک و حاشیه های خود را افزایش دهید. مگر اینکه بخواهید از یک ترفند بصری دیوانه کننده استفاده کنید، همیشه باید مقدار زیادی فضای سفید در اطراف متن شما وجود داشته باشد. اجازه ندهید در مقابل عناصر دیگر، به ویژه تصاویر قرار بگیرد. اجازه دهید تکه های محتوای شما (عنوان، پاراگراف ها، ستون های فرعی و غیره) نفس بکشد.
مارک بولتون یک مقاله بسیار آموزنده درباره فضای سفید برای فهرست نوشت. جدا، آن را بررسی کنید.
4. فونت دیوانه نشوید
یک قانون کلی خوب برای هر طراح این است: از دو قلم استفاده نکنید چهره ها در طراحی شما. دو صورت فونت می تواند بسیار شیک به نظر برسد. A List Apart از تنوع گرجستان و وردنا برای ایجاد ظاهری زیبا و صیقلی استفاده می کند. . اما ادامه افزودن فونت فیس به رابط کاربری خود سردرگمی غیر ضروری ایجاد می کند. به طور مشابه، از استفاده از اندازه فونت، رنگ، یا رفتار بیش از حد در یک صفحه یا یک پاراگراف خودداری کنید، در غیر این صورت به جای تأکید بر روی آن، با یکدیگر رقابت خواهند کرد.
اگرچه پشتههای قلم و فناوریهایی مانند sIFR و Typeface .js به شما امکان می دهد تقریباً هر قلمی را که می خواهید به عنوان پیش فرض مشخص کنید، در مقابل وسوسه وحشی شدن با کپی بدنه مقاومت کنید. فونت های تزئینی بهتر است در سرفصل ها نگهداری شوند قوی> زیرا بر خوانایی تأثیر می گذارند. درباره آن فکر کنید – آخرین باری که رمانی با جلد شومیز برداشتید که به طور کامل در Comic Sans اتفاق میافتد، چه زمانی است؟
هنگام ایجاد پشتههای فونت، به اندازه جفتهای خود توجه کنید. برخی از فونتهایی که شبیه به هم هستند، در اندازههای بسیار متفاوتی ارائه میشوند. Verdana و Arial نمونه بسیار خوبی از این موضوع هستند. Typetester یک ابزار عالی برای مقایسه وب اصلی است فونت ها و ایجاد یک پشته موفق. ابزار مفید دیگری به نام Font Stack Builder به شما نشان می دهد که چند درصد از کاربران هر یک از تغییرات را خواهند دید.
صرف نظر از اینکه از چه فونت هایی استفاده می کنید، مطمئن شوید که آنها خیلی کوچک نیستند. می دانم که سخت است… متن کوچک جالب به نظر می رسد. اما به کاربران فقیر و چشم دوخته فکر کنید! متن بدنه را بالای 10 یا 12 پیکسل نگه دارید. اگر اصرار دارید کوچکتر باشد، حداقل از اندازه نسبی برای همه آن دسته از کاربران IE 6.0 استفاده کنید که در غیر این صورت نمیتوانستند آن را بزرگتر کنند. مقاله Wilson Miner را در مورد اندازه فونت بخوانید برای برداشت عالی از بحث.
5) از جزئیات غافل نشوید
مشتری محتوا را ارائه کرد. اضافه کردن آن به سایت فقط یک کپی و پیست است، درست است؟ اشتباه، اشتباه، اشتباه.این تله ای است که طراحان وب اغلب در آن گرفتار می شوند.
حتی آنهایی از ما که با جدیت تگهای عنوان اضافه میکنیم، هر پاراگراف را قالببندی میکنیم و فهرستهای گلولهای را با احتیاط مرتب میکنیم، برخی از جزئیات مهم تایپوگرافی را فراموش میکنیم. بسیاری (از جمله من) آموزش رسمی تایپوگرافی را از دست دادند، بنابراین نمی توانید ما را کاملاً سرزنش کنید. اما شیطان در جزئیات است. زمان آن رسیده است که این اصول اولیه را بپذیریم:
از نقل قول هوشمند استفاده کنید
تفاوت بین نقل قول های هوشمند و نقل قول های گنگ چیست؟ نقل قول های هوشمند (همچنین به عنوان کتاب یا فرفری شناخته می شوند) منحنی هستند و هم سبک باز و هم بسته شدن دارند. نقلقولهای گنگ (راست) معمولاً مستقیم بالا و پایین هستند. آپستروف از نظر تایپی فقط یک نقل قول است، بنابراین همان مشکل وجود دارد. یک نقل قول گنگ (که prime نیز نامیده می شود) باید فقط بین اندازه گیری ها استفاده شود. به عنوان مثال، 6’4 اینچ از گیومه های اول دوتایی و تکی استفاده می کند.
متأسفانه صفحهکلیدهای ما بهطور پیشفرض به نقلقول اولیه هستند. مایکروسافت ورد و سایر ویرایشگرهای متن فقط آنها را هنگام نوشتن برای ما تصحیح می کنند. افزودن نقل قول های هوشمند به صفحات HTML مستلزم کار بیشتر توسعه دهنده وب است زیرا برای تولید نمادهای نقل قول باز و بسته باید از نشانه گذاری استفاده کنید. من همین مشکل را در مورد علامتهای em و خط تیره، بیضی، علامت تجاری و کپی رایت میبینم. کدگذارها با جایگزین کردن آنها با خط فاصله، چند نقطه، یک TM بزرگ و بدنام (C) راه آسان را انتخاب می کنند. استفاده از نمادهای مناسب از نظر بصری تفاوت ایجاد می کند. این کار را درست انجام دهید و سردبیران را در همه جا لبخند بزنید.
میدانم – هیچکس نمیخواهد تمام روز را به دنبال نقل قول بگذراند. خوشبختانه، ابزارهایی مانند SmartyPants و متن گرایی با قالببندی خودکار متنی که شامل نقل قولهای هوشمند و مواردی از این دست است، میتواند بسیاری از کارها را برای شما انجام دهد.
خواندن “مشکل با EM و EN” از A List Apart برای جزئیات بیشتر در مورد موضوع و رمزگذاری نویسه UTF-8 برای اکثر کاراکترهای خاص رایج.
یک نکته – بسیاری از ویرایشگرهای متن CMS (مانند آنچه این سایت استفاده می کند) به شما اجازه نمی دهند که نقل قول های هوشمند را بدون افزونه های اضافی پیاده سازی کنید. غم انگیز، اما واقعی.
از گذاشتن دو فاصله بعد از یک نقطه صرف نظر کنید. لطفا! ضروری نیست و در واقع بسیار آزاردهنده است.
در پیوندهای خود، از حاشیه-پایین: 1 پیکسل جامد به جای تزئین متن: زیر خط استفاده کنید. خطوط زیر میتوانند از طریق کاراکترهای نزولی (g، j، p، q، y) اجرا شوند و خواندن آنها را سخت میکنند، بهویژه زمانی که از اندازههای قلم کوچکتر استفاده میکنید.
و در حالی که ربطی به تایپوگرافی ندارد، بررسی سریع املا هرگز کسی را نکشت. حتی اگر تمام کاری که کردید کپی و جایگذاری بود، یک اشتباه املایی که به یک سایت زنده سر میخورد، به شدت بر همه افراد درگیر منعکس میشود.
به آن 5 راه حل توجه کنید و طراحی سایت شما مطمئناً بهبود می یابد. به یاد داشته باشید که اینها فقط یک نقطه شروع هستند. تایپوگرافی خوب مانند هر مهارت دیگری یک مهارت آموخته شده است و نیاز به مطالعه و تمرین دارد. همیشه مراقب سایت هایی باشید که آن را به درستی انجام می دهند و آنچه را که آنها انجام می دهند یادداشت کنید. انجام می دهند. نیاز به الهام دارید؟ برای نمونههایی از تایپوگرافی وب عالی و پستهایی که به نظرتان الهامبخش هستند، سایتهای زیر را بررسی کنید.
نظر شما در مورد این روش های ساده برای بهبود تایپوگرافی چیست؟ آیا آنها را در وب سایت خود پیاده سازی می کنید؟ مایلیم نظر شما را بشنویم!
بدون دیدگاه