وب تایپوگرافی: قوانین، تکنیک ها و طراحی واکنشگرا – قسمت دوم

با قسمت دوم از وب تایپوگرافی در خدمتتون هستیم.

نکاتی که باید در وب تایپوگرافی در نظر بگیرید:

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

یک طراحی در صورتی که مخاطبان شما به محتوای شما جذب نمی شوند و یا آن را درک نمی کنند، کامل نیست. در وب تایپوگرافی، ۴ عنصر اصلی وجود دارد:

  1. نوع (Type)
  2. رنگ (Color)
  3. بافت (Texture)
  4. عکس (Image)

۴ عامل زیر میتونه به شما برای ایجاد یک وب تایپوگرافی قابل ارائه کمک کند:

۱ انتخاب بهترین typefaced که مربوط به موضوعتان باشد

امروزه اکثر سایت ها از typeface مشابه استفاده می کنند. بله، حدس شما درسته؛ در مورد فونت های Arial و Helvetica صحبت می کنم .

با این حال خیلی خوشایند می شود اگر شما بتوانید باتوجه به پیامی که می خواهید منتقل کنید، typeface ها را بچینید.

برای نمونه، شما سایتی در مورد کتاب های کودکان طراحی کرده اید؛ اگر از فونت DK Crayon Crumble یا Little Miss Priss برای متن هدر استفاده کنید، در نظر مخاطب جذاب جلوه می کند.

وب تایپوگرافی

وب تایپوگرافی

 

من به شما پیشنهاد نمی کنم که این کار رو همیشه انجام بدین ولی این لازمه که تایپوگرافی با هدف مخاطب شما هماهنگ باشد و متن روشن و قابل خواندن باشد.

۲ استفاده از وب فونت ها

امروزه یکی از بهترین ارتقاها در زمینه طراحی سایت، پشتیبانی همه ی مرورگرهای مدرن از وب فونت ها با @import و لینک دهی استاندارد است.

وب تایپوگرافی

استفاده از @import :

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

استفاده از لینک دهی استاندارد:

<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css'>

این به این معنی است که شما می توانید از هر فونتی که روی هاست سایت های وب فونت از قبیل           Google font و Typekit موجود است، استفاده کنید.

مزایای استفاده از وب فونت ها:
  • صرفه جویی در پول: فونت های آنلاین نیاز به خریداری ندارند.
  • صرفه جویی در زمان: به جای این که فونت ها را به صورت دستی در فایل های خود وارد کنید، با گذاشتن یک خط کد می توانید از وب فونت ها استفاده کنید.
  • وب فونت ها با تمام ورژن های جدید مرورگرهای وب سازگار بوده و هم چنین SEO-friendly هم هستند.

۳ استفاده از ترکیب رنگ های مناسب

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

در طراحی نباید رنگ ها به صورت تصادفی انتخاب شوند. این کار در نظر مخاطبین، متن شما را غیرقابل خواندن و اذیت کننده نشان می دهد.

اما، چگونه از یک ترکیب رنگ مناسب استفاده میکنید در حالی که هیچ قائده کلی برای این موضوع وجود ندارد؟!

ما در این جا به بعضی از راهکارها اشاره می کنیم:

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

بررسی کنتراست

  • اگر برایتان مقدور است از رنگ های طراحی flat استفاده کنید.این رنگ ها روشن هستند و به نوعی هستند که برای چشم آزاردهنده نیست. برای این منظور و کسب اطلاعات بیش تر خوبه که یه سری هم به flatuicolors.com بزنید.

لینک مفید طراحی flat

۴ استفاده از متن به جای عکس

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

 

خب تا این جای کار بیش تر با وب تایپوگرافی آشنا شدیم. برای قسمت بعدی سراغ تایپوگرافی ریسپانسیو میریم. با ما همراه باشید.

 

موفق و مویذ باشید.

وب تایپوگرافی: قوانین، تکنیک ها و طراحی واکنشگرا – قسمت اول

وب تایپوگرافی: قوانین، تکنیک ها و طراحی واکنشگرا

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

تایپوگرافی یا نویسه‌نگاری هنر و فن حروف‌چینی (حروف‌نگاری) برای نمایش زبان است. هنر چیدمان حروف برای زبان تصویری. تقویت ویژگی بصری حروف و نزدیک کردن نوشتار به وجه تصویری.

طراحی وب واکنشگرا تنها ستون ها سیستم های grid، تصاویر و آیکون ها نیست. همه ی این ها بدون متن و محتوا یه چیزی کم دارند. همانطور که بیل گیتس میگه: “Content is King.

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

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

مبانی تایپوگرافی

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

  

نوع متن (Typeface) 

وب تایپوگرافی

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

 

 

فونت (Font)

وب تایپوگرافی

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

 

 

Baseline

وب تایپوگرافی

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

Baseline

 

راس ارتفاع (Cap Height)

وب تایپوگرافی

ارتفاع حروف از baseline .

 

X-height

وب تایپوگرافی

هم چنین به عنوان corpus size نیز شناخته می شود. فاصله ی بین baseline و midline (نصف فاصله ی بین baseline و cap height)

 

Descenders

وب تایپوگرافی

 

 

 

 

 

 

 

 

 

 

بخشی از حروف که زیر baseline ادامه می یابند.

 

Tracking

به عنوان letter spacing شناخته میشود.

 

Kerning

فرآیند تنظیم فضای بین کاراکترهای مختلف در تغییر عرض.

 

Leading

به عنوان line height نیز شناخته می شود که فاصله ی بین خطوط را نشان می دهد.

 

 

این پست رو به مبانی وب تایپوگرافی اختصاص دادم. در پست های بعدی براتون از نکات وب تایپوگرافی میگم.

اگر براتون مفید بود با دوستانتون به اشتراک بذارید.

 

موفق و موید باشید.

عریض تر کردن متن در طراحی سایت

عریض تر کردن متن در طراحی سایت

در بعضی از خانواده فونت ها٬ انواعی دارند که دارای حروف کم عرض تر یا باریک تر هستند. آن ها غالبا نام هایی مانند Condensed ٬ Wide ٬ Ultra Expanded و … دارند. کاربرد این ها این است که یک طراح می تواند از یک font family استفاده کند در حالی که هم از نوع عریض و هم از نوع کم عرض تر آن استفاده می کند. این کار با font-stretching امکان پذیر می شود.

این خاصیت اختیاری است و میزان کشیدگی کاراکترها را مشخص می کند.

عریض تر کردن متن در طراحی سایت

‎بیشتر بخوانید

توصیف گر font-style

توصیف گر font-style

به عنوان یک توصیف گر٬ font-style این اجازه رو به طراح می دهد که یک face خاص رو به یک مقدار خاص از font-style مربوط کند.

@font-face {
       font-family: "SwitzeraADF";
       font-style: normal;
       src: url("SwitzeraADF-Regular.otf") format("opentype");
    }
    @font-face {
       font-family: "SwitzeraADF";
       font-style: italic;
       src: url("SwitzeraADF-Italic.otf") format("opentype");
}
@font-face {
       font-family: "SwitzeraADF";
       font-style: oblique;
       src: url("SwitzeraADF-Italic.otf") format("opentype");
}

با توجه به قطعه کد٬ خروجی قوانین این خواهد بود که با استفاده از آن در ادامه طراحی مثلا عناصر h2 و h3 از فونت SwitzeraADF-Italic به جای فونتSwitzeraADF-Regular استفاده می کنند.

h1, h2, h3 {font: 225% SwitzeraADF, Helvetica, sans-serif;}
    h2 {font-size: 180%; font-style: italic;}
    h3 {font-size: 150%; font-style: oblique;}

توصیف گر font-style

البته اگر یک face از فونت با حالت oblique وجود داشت٬ نویسنده می توانست به جای استفاده از فونت italic از همان نوع فونت oblique هم استفاده کند.

وقتی ما با استفاده از یک descriptor برای یک چهره از فونتمون سبک خاصی رو تعیین میکنیم٬ در طزاحی٬ هرجا از اون سبک خاص استفاده کنیم٬ همون چهره خاص از فونت به کار برده می شود.

تمام مرورگرهای اصلی، خصوصیت font-style را پشتیبانی می کنند.  مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار “inherit” را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار “inherit” را پشتیبانی می کند.

این هم از این 😉

موفق و موید باشید.

تنظیم خودکار سایز

تنظیم خودکار سایز

دو تا از فاکتورهای مهمی که بر خوانایی متن ( فونت ) موثر هستند سایز و x-height ( ارتفاع )‌ می باشد. نتیجه تقسیم ارتفاع به font-size به عنوان aspect value شناخته می شود. فونت هایی با ظاهر مرتفع تر نسبت به فونت هایی که ارتفاع آن ها کاهش می یابد٬ خوانا تر هستند.

CSS راهی برای مقابله با تغییرات aspect value بین خانواده فونت ها ارائه داده است: font- size-adjust

تنظیم خودکار سایز

‎بیشتر بخوانید

سبک متن در طراحی سایت

سبک متن در طراحی سایت

صفت font-style خیلی ساده است. برای انتخاب بین متن normal, italic و oblique استفاده می شود. تنها پیچیدگی آن این است که بین italic و oblique تفاوت قائل می شود و معمولا در نمایش شما نمی توانید این دو را از هم تشخیص دهید.

سبک متن در طراحی سایت

هما طوری که می بینید٬ مقدار پیش فرض این خاصیت٬‌ normal است. مقدار normal متن رو به نحوی نمایش می دهد که به طور قائم و درست نوشته شده باشد که تعریف بهترش این است : نمایش متنی که italic یا کج نباشد.اکثر قریب به اتفاق متون در کتاب ها به صورت normal هستند.

‎بیشتر بخوانید

استفاده از واحدهای طولی برای سایز فونت

استفاده از واحدهای طولی برای سایز فونت

خاصیت font-size می تواند با مقدار عددی و طولی مقدار دهی شود. تمامی قوانینی که در قطعه کد زیر آمده اند٬ نتیجه یکسانی با هم خواهند داشت.

p.one {font-size: 36pt;}
    p.two {font-size: 3pc;}
    p.three {font-size: 0.5in;}
    p.four {font-size: 1.27cm;}
    p.five {font-size: 12.7mm;}

در عکس زیر فرض بر این شده است که عامل کاربر می داند که در هر اینچ چه تعداد نقطه برای نمایش سایز medium استفاده شده است.

عامل های متفاوت٬ فرض های متفاوت و مبتنی بر سیستم عامل دارندو بعضی ها مبنا را بر تنظیمات پیش فرض مرورگر می گذارند و بعضی ها مبنا را بر فرض برنامه نویس ( کسی که عامل کاربر را نوشه است )‌ می گذارند. با این وجود٬‌ ۵ خط در تصویر باید همیشه سایز یکسان داشته باشند. واحد اندازه گیری های مختلف باید با هم مطابق و سازگار باشند. ولی میبینید که این طور نیست 😐

‎بیشتر بخوانید

کلمات کلیدی و متون monospace

کلمات کلیدی و متون monospace

تغییر جالبی در کلمات کلیدی و متون monospace برای سایز فونت و وراثت وجود دارد که زمانی که شما در مرورگر متون monospace رو مشاهده می کنید٬ نمایان گر می شود. به قطعه کد و عکس زیر توجه کنید:

ٖp {font-size: medium;}   /* the default value */
    span {font-family: monospace; font-size: 1em;}

 

<p>This is a 'p' with a <span>'span'</span> inside.</p>

کلمات کلیدی و متون monospace

مقدار پیش فرض medium معمولا ۱۶px در نظر گرفته می شود. فرض کنید که کاربر تنظیمات مرورگر را تغییر نداده است‌ ( سایز پیش فرض تنظیم شده است ). در واقع شما پاراگراف ها ی خارج از عنصر span را با سایز فونت ۱۶px مشاهده می کنید. ( تکرار می کنم٬‌ فرض بر این است که کاربر تنظیمات فونت را دستکاری نکرده است. ) ‎بیشتر بخوانید

سایز درصدی فونت

سایز درصدی فونت

این نوع سایز دهی به فونت خیلی شبیه به کلمات کلیدی سایز نسبی است. یک مقدار درصدی همیشه تحت آن چه سایز یک عنصر والد دارد محاسبه می شود. درصد٬‌ بر خلاف کلمات کلیدی سایز که در پست قبلی در مورد آن ها بحث شد٬ خیلی ریز اندازه فونت ها را محاسبه می کند.

به مثال زیر توجه کنید:

body {font-size: 15px;}
    p {font-size: 12px;}
    em {font-size: 120%;}
    strong {font-size: 135%;}
    small, .fnote {font-size: 70%;}

 

<body>
<p>This paragraph contains both <em>emphasis</em> and <strong>strong
emphasis</strong>, both of which are larger than their parent element.
The <small>small text</small>, on the other hand, is smaller by a quarter.</p>
<p class="fnote">This is a 'footnote' and is smaller than regular text.</p>
<p> 12px <em> 14.4px </em> 12px <strong> 16.2px </strong> 12px
<small> 9px </small> 12px </p>
<p class="fnote"> 10.5px </p>
</body>

سایز درصدی فونت

در این مثال٬‌ مقدار سایز با مقدار دقیق پیکسل نمایش داده شده است. این مقادیر توسط مرورگر بدون در نظر گرفتن سایز نمایش واقعی کاراکترها در صفحه نمایش محاسبه می شود. ‎بیشتر بخوانید

سایز فونت

سایز فونت

روش تعیین سایز فونت برای ما٬ هم خیلی آشناست و هم خیلی متفاوت. این که چجوری یک فونت برای اولین بار سایز دهی بشه و این که چجوری در ادامه بهش سایز بدیم و …

سایز فونت

در یک روش خیلی شبیه به کلمات کلیدی font-weight ، صفت font-size از کلمات کلیدی برای سایز نسبی (یا relative) که آن ها را smaller یا  larger می نامیم استفاده می کنند. نحوه ی استفاده و محاسبه ی آن ها بسیار شبیه به چیزی است که برای font-weight گفتیم. محاسبه ی مقدار smaller و larger به ترتیب با کاهش و افزایش مقدار font-weight بدست می آید. ‎بیشتر بخوانید