نویسه‌نگاری

وضعیت: در حال بازبینی

قلم‌ها

کاربرد	قلم	توکن
فارسی	راوی (Ravi)، هشت وزن از Thin تا ExtraBlack	`--hq-font-fa`
عنوان لاتین	IBM Plex Serif؛ قلم لوگو هم هست	`--hq-font-serif`
متن لاتین	IBM Plex Sans	`--hq-font-sans`
کد	IBM Plex Mono	`--hq-font-mono`

وزن‌های پیش‌فرض راوی: عنوان Bold، متن Regular، عددهای کلیدی Black. همهٔ وزن‌ها در دسترس تیم است؛ این‌ها پیش‌فرض‌اند، نه محدودیت.

در متن فارسی، واژه‌های لاتین با IBM Plex Sans و در همان وزن نوشته می‌شوند. روی وب این کار خودکار است: قلم ترکیبی HQ Text حرف‌های لاتین را از Plex و بقیه را از راوی می‌گیرد.

قواعد

فارسی هرگز فاصلهٔ حروف (letter-spacing) نمی‌گیرد؛ اتصال حرف‌ها را می‌شکند.
ارتفاع خط: عنوان‌ها ۱٫۲ تا ۱٫۳، متن اصلی ۱٫۶ تا ۱٫۸.
طول سطر: ۴۰ تا ۷۰ نویسه.
متن اصلی روی وب هرگز کمتر از ۱۶ پیکسل نیست؛ برای مقاله‌های بلند ۱۸ پیکسل.
جایگزین وقتی راوی در دسترس نیست: وزیرمتن در Google Slides و Docs، و Tahoma در ایمیل.

مقیاس‌ها

برای وب، اپ، ایمیل و شبکه‌های اجتماعی.

هارمونیک؛ ایستاده بر آغاز.

displayراوی56px / ۱٫۲ / 700تیتر اصلی صفحه‌های معرفی (hero). در موبایل ۴۰ پیکسل.

زیربنای برند

h1راوی40px / ۱٫۲۵ / 700عنوان صفحه. در موبایل ۳۲ پیکسل.

ستون‌های تمایز

h2راوی32px / ۱٫۳ / 700عنوان بخش. در موبایل ۲۶ پیکسل.

عمل‌گرایی

h3راوی24px / ۱٫۴ / 600زیرعنوان و عنوان کارت. در موبایل ۲۰ پیکسل.

اثرگذارترین مسالهٔ هر کسب‌وکار را پیدا می‌کنیم.

leadراوی20px / ۱٫۷ / 400پاراگراف آغازین. در موبایل ۱۸ پیکسل.

راهکار را با تیم کارفرما می‌سازیم و تا رسیدن به نتیجه کنار او می‌مانیم.

bodyراوی16px / ۱٫۸ / 400متن اصلی؛ هرگز کمتر از ۱۶ پیکسل، برای مقاله‌های بلند ۱۸ پیکسل.

ارزیابی، طراحی، تحویل، استقرار

body-compactراوی14px / ۱٫۷ / 400رابط کاربری فشرده، جدول و فهرست.

منبع: ارزیابی هارمونیک

captionراوی12px / ۱٫۶ / 500زیرنویس، برچسب و منبع.

روی بوم ۱۹۲۰×۱۰۸۰. در پاورپوینت، اندازه به پوینت = پیکسل ÷ ۲. نمونه‌ها با نصف اندازهٔ واقعی نمایش داده شده‌اند.

معماری برند

slide-displayراوی100px / 120px / 700عنوان جلد و بخش. پاورپوینت ۵۰pt.

+۹۵

slide-statراوی86px / 92px / 900عددهای کلیدی با راوی Black. پاورپوینت ۴۳pt.

ستون‌های تمایز

slide-titleراوی66px / 82px / 700عنوان اسلاید، بالا راست. پاورپوینت ۳۳pt.

عمل‌گرایی

slide-headingراوی32px / 44px / 700عنوان کارت و ستون. پاورپوینت ۱۶pt.

یک پیام در هر اسلاید.

slide-leadراوی32px / 52px / 400جملهٔ آغازین. پاورپوینت ۱۶pt.

راهکار را با تیم کارفرما می‌سازیم.

slide-bodyراوی24px / 40px / 400متن اصلی اسلاید. پاورپوینت ۱۲pt.

شرح کوتاه در دو خط.

slide-smallراوی20px / 34px / 400توضیح و خانهٔ جدول. پاورپوینت ۱۰pt.

منبع: داده‌های پروژه

slide-captionراوی16px / 26px / 400منبع، پانویس و برچسب. پاورپوینت ۸pt.

برای A4. اندازه‌ها به پوینت چاپی‌اند. نمونه‌ها با ۱٫۵ برابر اندازهٔ واقعی نمایش داده شده‌اند.

گزارش ارزیابی بلوغ سازمانی

doc-titleراوی28px / ۱٫۳ / 700عنوان سند. لاتین: IBM Plex Serif 25pt.

۱. یافته‌ها

doc-h1راوی18px / ۱٫۴ / 700عنوان سطح ۱. لاتین: Plex Serif 16pt.

۱٫۱ ساختار

doc-h2راوی14px / ۱٫۵ / 700عنوان سطح ۲. لاتین: Plex Sans 12.5pt.

نقش‌ها

doc-h3راوی12px / ۱٫۵ / 600عنوان سطح ۳. لاتین: Plex Sans 11pt.

متن اصلی سند با ضریب خط ۱٫۸.

doc-bodyراوی11px / ۱٫۸ / 400متن اصلی سند. لاتین: Plex Sans 10pt. حاشیه‌ها ۲۰ تا ۲۵ میلی‌متر.

جدول و فهرست

doc-compactراوی9.5px / ۱٫۶ / 400جدول و فهرست‌های فشرده. لاتین 8.5pt.

پانویس

doc-footnoteراوی8.5px / ۱٫۶ / 400پانویس و زیرنویس تصویر. لاتین 7.5pt.

هارمونیک · محرمانه

doc-headerراوی8px / ۱٫۵ / 400سربرگ و پابرگ تکرارشونده. لاتین 7pt.

Brand Foundation

en-titleIBM Plex Serif40px / ۱٫۲۵ / 700عنوان‌های انگلیسی و حروف لوگو: IBM Plex Serif Bold.

Why HarmoniQ

en-ghostIBM Plex Serif66px / 82px / 700عنوان انگلیسی کم‌رنگ اسلاید (Cool Gray 20 روی روشن، Cyan 70 روی تیره).

With you, all the way to results.

en-bodyIBM Plex Sans16px / ۱٫۶ / 400متن انگلیسی: IBM Plex Sans.

MANAGEMENT CONSULTING

en-labelIBM Plex Sans12px / ۱٫۵ / 600برچسب‌های تمام‌حروف‌بزرگ انگلیسی؛ تا ۱۰٪ فاصلهٔ حروف. فارسی هرگز فاصلهٔ حروف نمی‌گیرد.

استفاده در CSS

هر سبک چهار متغیر دارد: قلم، اندازه، وزن و ارتفاع خط.

.page-title {
  font-family: var(--hq-type-h1-font-family);
  font-size: var(--hq-type-h1-font-size);
  font-weight: var(--hq-type-h1-font-weight);
  line-height: var(--hq-type-h1-line-height);
}