تایپوگرافی

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

زبان‌ها

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

جدول روبرو لیست ‌زبان‌هایی را که به صورت رسمی پشتیبانی می‌شوند را به همراه کد زبانیشان نشان می‌دهد:

کد

توضیح

دسته

ar

عربی

شبیه فارسی

de

آلمانی

شبه انگلیسی

en

انگلیسی

شبیه انگلیسی

es

اسپانیایی

شبیه انگلیسی

fa

فارسی

شبیه فارسی

fa

گیلکی

شبیه فارسی

fa

لوری

شبیه فارسی

fa

مازرونی

شبیه فارسی

fr

فرانسوی

شبیه انگلیسی

ku

کوردی

شبیه فارسی

ps

پشتو

شبیه فارسی

sd

سندی

شبیه فارسی

ur

اردو

شبیه فارسی

تعیین زبان

هر صفحه باید زبان مشخص به خود را داشته باشد.
برای مشخص کردن زبان یک برگه باید کد زبان مورد نظر را از جدول زبان‌ها پیدا کرده و به صورت روبرو استفاده کرد:

دلیل اصرار بر این موضوع، وجود تفاوت‌های نگارشی هر زبان است. مانند:

  • جهت شروع نوشته

  • علائم نوشتاری

<html lang="fa">
  <!-- متحویات سایت فارسی است -->
</html>

حروف‌چینی

وزیر

برای زبان‌های شبیه فارسی، قلم پیش‌فرض، وزیر ۳.۱ می‌باشد.

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

وزیر ۳.۱ دارای ۴ وزن مختلف است. اما به خاطر حجم بالا، تنها وزن‌های عادی و توپر آن در جغد مورد استفاده قرار می‌گیرد.

بعضی از حروف و اعداد در وزیر ۳.۱

وزن‌های وزیر ۳.۱

Roboto

برای زبان‌های شبیه انگلیسی، قلم پیش‌فرض، Roboto 2.2 می‌باشد.

این قلم توسط گوگل به صورت رایگان منتشر شده است و با قلم وزیر همخوانی دارد.

Roboto 2.2 دارای ۶ وزن مختلف است. اما به خاطر حجم بالا، تنها وزن‌های عادی و توپر آن در جغد مورد استفاده قرار می‌گیرد.

بعضی از حروف و اعداد در Roboto 2.2

وزن‌های Roboto 2.2

عوض کردن قلم

در صورتی که مایل نیستید از فونت‌های وزیر یا Roboto استفاده کنید، می‌توانید به صورت روبرو فونت استک دلخواه خود را ایجاد کنید:

:lang(fa) {
	font-family: WebYekan, Tahoma;  /* برای فارسی */
}

:lang(en) {
	font-family: GillSans, sans-serif;  /* برای انگلیسی */
}

استفاده

عنوان‌ها

شش سطح عنوان به وسیله‌ی تگ‌های <h1> الی <h6> و یا کلاس‌های h1 الی h6 قابل استفاده هستند.

  • اندازه‌ی قلم در عنوان سطح اول، ۳۶ پیکسل است.
    (font-size: 36px)

  • اندازه‌ی قلم در عنوان سطح دوم، ۳۰ پیکسل است.
    (font-size: 30px)

  • اندازه‌ی قلم در عنوان سطح سوم، ۲۴ پیکسل است.
    (font-size: 24px)

  • اندازه‌ی قلم در عنوان سطح چهارم، ۱۸ پیکسل است.
    (font-size: 18px)

  • اندازه‌ی قلم در عنوان سطح پنجم، ۱۴ پیکسل است.
    (font-size: 14px)

  • اندازه‌ی قلم در عنوان سطح ششم، ۱۲ پیکسل است.
    (font-size: 12px)

عنوان سطح اول جغد

عنوان سطح دوم جغد

عنوان سطح سوم جغد

عنوان سطح چهارم جغد

عنوان سطح پنجم جغد
عنوان سطح ششم جغد
<h1>عنوان سطح اول جغد</h1>

<h2>عنوان سطح دوم جغد</h2>

<h3>عنوان سطح سوم جغد</h3>

<h4>عنوان سطح چهارم جغد</h4>

<h5>عنوان سطح پنجم جغد</h5>

<h6>عنوان سطح ششم جغد</h6>

در ضمن می‌توان با گذاشتن تگ <small> و یا کلاس‌های joqd small برای عنوان یک متن ثانویه ایجاد کرد.

در عناوین ثانویه، font-size: 65% و opacity: 55% است.

عنوان سطح اول جغد با یک متن ثانویه

عنوان سطح دوم جغد با یک متن ثانویه

عنوان سطح سوم جغد با یک متن ثانویه

عنوان سطح چهارم جغد با یک متن ثانویه

عنوان سطح پنجم جغد با یک متن ثانویه
عنوان سطح ششم جغد با یک متن ثانویه
<h1>عنوان سطح اول جغد<small>با یک متن ثانویه</small></h1>

<h2>عنوان سطح دوم جغد<small>با یک متن ثانویه</small></h2>

<h3>عنوان سطح سوم جغد<small>با یک متن ثانویه</small></h3>

<h4>عنوان سطح چهارم جغد<small>با یک متن ثانویه</small></h4>

<h5>عنوان سطح پنجم جغد<small>با یک متن ثانویه</small></h5>

<h6>عنوان سطح ششم جغد<small>با یک متن ثانویه</small></h6>
پاراگراف

متن پاراگراف بدنه در جغد به صورت پیش‌فرض به اندازه‌ی ۱۴ پیکسل (font-size: 14px)، با ارتفاع ۱/۴۲۸ (line-height: 1.428) و با ۱۰ پیکسل حاشیه از پایین (margin-bottom: 10px) می‌باشد.


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

<p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیستری را برای طراحان رایانه ای و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. </p>
پیوند

پیوند‌ها اندازه‌ی قلم پدر خود را به ارث می‌برند. اما برای آن‌ها باید حتما جداگانه رنگ (در حالت‌های مختلف) انتخاب کرد.

همچنین در صورتی که مایل به حذف خط کشیده شده زیر پیوند‌ها هستید (که به صورت پیش‌فرض توسط مرورگر ایجاد می‌شود)، از کلاس joqd link استفاده کنید.


نوشته‌ای که در ادامه آمده است یک پیوند است.

<p>نوشته‌ای که در ادامه آمده است <a href="http://joqd.ir" class="joqd link blue-darken-3-text pink-text-hover">.یک پوند است</a></p>
نقل قول

در صورتی که می‌خواهید نقل قولی را (به صورت داخل خط) نمایش دهید، از تگ <q> استفاده کنید.


نوشته‌ای که در ادامه آمده است نقل قول شده است.

<p>نوشته‌ای که در ادامه آمده است <q>نقل قول شده است</q>.</p>
متن حذف شده

در صورتی که می‌خواهید نشان دهید متن حذف شده است، از تگ <del> استفاده کنید.


نوشته‌ای که در ادامه آمده است حذف شده است.

<p>نوشته‌ای که در ادامه آمده است <del>.حذف شده است</del></p>
متن خط خورده

در صورتی که می‌خواهید نشان دهید متن دیگر اهمیت خود را از دست داده است، از تگ <s> استفاده کنید.


نوشته‌ای که در ادامه آمده است خط خورده است.

<p>نوشته‌ای که در ادامه آمده است <s>.خط خورده است</s></p>
متن درج شده

در صورتی که می‌خواهید نشان دهید متن به برگه اضافه شده‌است، از تگ <ins> استفاده کنید.


نوشته‌ای که در ادامه آمده است اضافه شده است.

<p>نوشته‌ای که در ادامه آمده است <ins>.اضافه شده است</ins></p>
متن آندرلاین شده

در صورتی که می‌خواهید زیر متنی خط بکشید (underline کنید)، از تگ <u> استفاده کنید.


زیر نوشته‌ای که در ادامه آمده است خط کشیده شده است.

<p>زیر نوشته‌ای که در ادامه آمده است <u>.خط کشیده شده است</u></p>
متن ریزنوشت

برای نشان دادن عدم تاکید بر یک نوشته، از تگ <small> استفاده کنید.
در متن ریزنوشت، اندازه‌ی قلم به ۸۵٪ از مقدار اولیه کاهش پیدا می‌کند.

همچنین به جای تگ <small> می‌توانید از کلاس joqd small استفاده کنید.


نوشته‌ای که در ادامه آمده است از اهمیت کمتری برخوردار است.

<p>نوشته‌ای که در ادامه آمده است <small>.از اهمیت کمتری برخوردار است</small></p>
متن توپر

برای نشان دادن تاکید بیشتر بر یک نوشته، از تگ <strong> استفاده کنید.
در متن تو پر، وزن قلم افزایش پیدا می‌کند.

همچنین تگ <b> نیز متن را توپر نمایش می‌دهد؛ با این تفاوت که <b> اهمیت را نشان نمی‌دهد.


نوشته‌ای که در ادامه آمده است از اهمیت بیشتری برخوردار است.

<p>نوشته‌ای که در ادامه آمده است <strong>.از اهمیت بیشتری برخوردار است</strong></p>
متن ایتالیک

برای نشان دادن تاکید بیشتر بر یک نوشته، از تگ <em> استفاده کنید.
در متن ایتالیک، قلم مایل می‌شود.

همچنین تگ <i> نیر متن را ایتالیک نمایش می‌دهد؛ با این تفاوت که <i> اهمیت را نشان نمی‌دهد.


نوشته‌ای که در ادامه آمده است از اهمیت بیشتری برخوردار است.

<p>نوشته‌ای که در ادامه آمده است <em>.از اهمیت بیشتری برخوردار است</em></p>