یکی از رایج ترین مشکلات طراحی این است.

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

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

قانون 1: هر چه فونت کمتر باشد، بهتر است.

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

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

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

قانون 2. مراقب ترشحات باشید

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

قانون 3: تراز صحیح

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

قانون 4. فونت های تزئینی کمتر

آیا فونت های تزئینی زیبایی دارید؟ حیرت آور! اما این به هیچ وجه به این معنی نیست که استفاده از آنها برای متن پاراگراف ها ضروری است. فونت های تزئینی اغلب داستانی در پشت خود دارند یا در یک مورد خاص، به عنوان مثال، برای عنوان یا عنوان استفاده می شوند. اغلب، ساده تر بهتر است، به همین دلیل است که فونت هایی مانند Helvetica بسیار محبوب هستند.

قانون 5: اندازه مهم است

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

قانون 6. آن را خوانا نگه دارید

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

قانون 7. رنگ های مناسب را انتخاب کنید

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

قانون 8. گروه بندی مناسب

اطلاعات مرتبط بهتر است با هم ترکیب شوند. این طرح را واضح تر می کند. به عنوان مثال: به یک پوستر فیلم نگاه کنید، تمام داده ها در بلوک های جذاب گروه بندی می شوند. اکنون می توان آنها را به عنوان یک عنصر طراحی جداگانه در نظر گرفت. نمونه هایی از گروه بندی بد - صفحات زرد را باز کنید.

قانون 9. پیشروی کافی

این فاصله بین خطوط متن است. انتخاب صحیح این فاصله بسیار مهم است. وقتی بین سطرها فضایی برای استراحت چشمانتان وجود دارد، خواندن آن بسیار لذت بخش تر است. به عنوان یک قاعده کلی، سعی کنید از صفحه اصلی استفاده کنید که حداقل 2 نقطه بزرگتر از اندازه فونت باشد. به عنوان مثال: برای حداکثر خوانایی در 10pt، فونت باید حداقل 12pt تنظیم شود.

قانون 10: مراقب کرنینگ باشید

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

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

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

بیش از 95 درصد اطلاعات در اینترنت به صورت مکتوب ذخیره می شود.

تایپوگرافی خوب باعث می شود اطلاعات به راحتی قابل دسترسی باشد، در حالی که تایپوگرافی ضعیف نیاز به تلاش برای درک متن دارد. همانطور که الیور رایششتاین در مقاله "طراحی وب 95٪ تایپوگرافی است" اشاره می کند:

بهینه سازی تایپوگرافی در مورد بهینه سازی خوانایی، دسترسی، قابلیت استفاده (!) و دستیابی به تعادل کلی گرافیکی است.

1. از حداقل تعداد فونت استفاده کنید

هنگامی که از بیش از 3 فونت مختلف استفاده می کنید، وب سایت شما ساختار خود را از دست می دهد و غیرحرفه ای به نظر می رسد. به یاد داشته باشید که استفاده بیش از حد از اندازه و سبک فونت می تواند هر طرح بندی را خراب کند.

برای جلوگیری از این وضعیت، سعی کنید تعداد فونت های استفاده شده را به حداقل برسانید.

به طور کلی، تعداد فونت ها را به حداقل برسانید (دو فونت بیش از اندازه کافی است، یکی اغلب کافی است) و از همان فونت ها در سراسر وب سایت خود استفاده کنید. اگر تصمیم دارید با بیش از یک فونت کار کنید، مطمئن شوید که خانواده فونت ها از نظر عرض حروف با یکدیگر مطابقت دارند. به مثال زیر دقت کنید. ترکیب گرجستان و وردنا (سمت چپ) دارد مشخصات کلی، که به آنها اجازه می دهد تا به طور هماهنگ با یکدیگر ترکیب شوند. بیایید ترکیب Baskerville و Impact (راست) را برای مقایسه در نظر بگیریم. Impact "سنگین" شریک "notch" خود را سرکوب می کند.

اطمینان حاصل کنید که خانواده فونت ها از نظر عرض حروف با یکدیگر مطابقت دارند

2. سعی کنید از فونت های استاندارد استفاده کنید

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

1. هر فونتی را انتخاب کنید. بیایید بگوییم Open Sans.

2. کد را ایجاد کنید و آن را در آن قرار دهید

HTML شما 

3. تمام شد!


اما چه چیزی می تواند اشتباه باشد؟

در واقع، این روش یک مشکل جدی دارد - کاربران به فونت های استاندارد عادت کرده اند و متن نوشته شده با چنین فونت هایی را سریعتر می خوانند.

معمولا بهترین راه حل استفاده از فونت های سیستمی (Arial، Calibri، Trebuchet و ...) است. یک استثنا ممکن است نیاز به چسبیدن به برخی از فونت هایی باشد که خود مشتری مشخص کرده است: به عنوان مثال، برای برندسازی یا ایجاد چیزی به یاد ماندنی. به یاد داشته باشید که تایپوگرافی خوب بر خواندن متن تأثیر می گذارد، نه بر درک بصری فونت.

3. طول خط را محدود کنید

تعداد صحیح کاراکترها در یک خط، کلید خواندن متن شماست. هنگام انتخاب پهنای متن، باید روی طرح خود تمرکز نکنید، بلکه باید بر وضوح و دقت متن نوشته شده تمرکز کنید. این توصیه مؤسسه بایمرد را در نظر بگیرید:

"اگر می خواهید خواننده شما راحت باشد، هر خط نباید بیش از 60 کاراکتر داشته باشد. داشتن تعداد مناسب کاراکتر در یک خط، کلید خواندن متن شماست."

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

برای دستگاه های تلفن همراه، 30-40 کاراکتر در هر خط را رعایت کنید. در زیر نمونه ای از دو سایت باز شده در زیر آمده است دستگاه های تلفن همراه. در یک خط از 50 تا 75 کاراکتر (بهترین تعداد کاراکتر در هر خط برای متن چاپ شده و وضوح رایانه) و در خط دوم 30-40 کاراکتر بهینه را می بینیم.

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

4. حروفی را انتخاب کنید که به راحتی در هر اندازه قابل خواندن باشد

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

Roboto توسط گوگل

اطمینان حاصل کنید که حروفی که انتخاب می کنید به راحتی در صفحه نمایش های کوچک قابل خواندن است!از استفاده از فونت های شکسته مانند Vivaldi (تصویر زیر) اجتناب کنید: اگرچه زیبا به نظر می رسند، اما گاهی اوقات درک آنها دشوار است.

استفاده از فونت Vivaldi خواندن متن را در صفحه کوچک دشوار می کند

5. از فونت هایی با حروف واضح استفاده کنید

بسیاری از تایپ‌فیس‌ها به‌گونه‌ای طراحی شده‌اند که گاهی اوقات می‌توان حروف مشابه، به‌ویژه «I» و «L» را که به خط لاتین نوشته شده‌اند (مانند تصویر زیر) اشتباه گرفت. در برخی، حروف به قدری نزدیک به یکدیگر قرار گرفته اند که ترکیب "ر" و "ن" را می توان با حرف "م" اشتباه گرفت. بنابراین، هنگام انتخاب یک فونت، آن را در زمینه های مختلف آزمایش کنید. به این ترتیب می توانید مطمئن شوید که خواننده به دلیل نوع فونت در درک متن مشکلی نخواهد داشت.

6. از کلاه بپرهیزید

متن نوشته شده با حروف بزرگ - یا تمام حروف - برای موقعیت‌هایی مناسب است که کاربر در فرآیند خواندن درگیر نیست (مثلاً به صورت مخفف یا لوگو). اما در موارد دیگر، خوانندگان خود را با متن تمام حروف مجبور نکنید. همانطور که مایلز تینکر در اثر معروف خود Legibility of Print اشاره می کند، چنین متنی بسیار کندتر از متن نوشته شده با حروف کوچک خوانده می شود.

7. فاصله خطوط را به حداقل برسانید.

در تایپوگرافی، اصطلاح خاصی برای فاصله بین خطوط وجود دارد - پیشرو (یا فاصله بین خطوط). با افزایش لید، فضای عمودی بین خطوط را افزایش می دهید و در نتیجه خوانایی متن روی صفحه را بهبود می بخشید. طبق قوانین، برای اطمینان از خوانایی متن، پیشرو باید تقریباً 30٪ بیشتر از ارتفاع کاراکتر باشد.

فاصله خطوط صحیح به خوانایی بهتر متن کمک می کند. عکس: مایکروسافت

به گفته دیمیتری فادیف، انتخاب صحیح فاصله بین پاراگراف ها درک مطلب را 20٪ افزایش می دهد. توانایی طراح برای کار با فضای سفید به کاربران این امکان را می دهد که کل محتوای متن را بدون از دست دادن جزئیات جذب کنند.

سمت چپ: متن تقریباً همسطح نوشته شده است. راست: فاصله خطوط مناسب خوانایی متن را بهبود می بخشد. عکس: اپل

8. مطمئن شوید که کنتراست رنگ خوبی دارید

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

• متن های کوچک باید نسبت کنتراست حداقل 4.5:1 نسبت به پس زمینه داشته باشند.

• متن های بزرگ (از سایز 14 با فونت پررنگ / از سایز 18 به بالا با فونت استاندارد) باید نسبت کنتراست حداقل 3:1 نسبت به پس زمینه داشته باشند. 


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

این متن از استاندارد کنتراست رنگ پیروی می کند، بنابراین خواندن آن آسان است.

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

9. از به کار بردن قرمز یا سبز در متن خود اجتناب کنید.

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

10. از استفاده از متن سوسو زدن خودداری کنید

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

از متن سوسو زدن استفاده نکنید!

نتیجه

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

تایپوگرافی باید به محتوا احترام بگذارد

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

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

فونت مجموعه ای از کاراکترها با اندازه و طرح معین است. یک فونت به طور مشابه خانواده سبک های فونت را تعریف می کند. به عنوان مثال، اینها می توانند serif، sans serif، دست نویس، نمایش، monospace و موارد دیگر باشند. می توان گفت که یک تایپ فیس مجموعه ای از فونت ها با سبک ها و اندازه های مختلف است که توسط یک سبک اجرای مشترک متحد شده اند. همانطور که می بینید، فونت مفهوم محدودتری است.

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

اصطلاحاتی مانند "وزن" و کرنینگ نیز وجود دارد. همه آنها را می توان با استفاده از ابزارهای CSS تغییر داد و می توان آنها را روی پاراگراف ها، عنوان ها یا سایر عناصر متنی اعمال کرد. ویژگی "وزن" فونت میزان ضخامت خطوط را هنگام نوشتن تعیین می کند. این یک سری مقادیر از 100 تا 900 است، که در آن هر عدد نشان دهنده وزن مربوط به جسارت سبک است. فونت معمولی "normal" مربوط به عدد 400 است، فونت پررنگ "bold" مربوط به 700 است. Kerning تغییر در فاصله بین حروف بسته به شکل آنها است. این فرآیند قرار دادن صحیح نمادها، تنظیم فاصله بین آنها است که در نتیجه باید هماهنگی حاصل شود. اگرچه بسیاری از مردم توجه زیادی به کرنینگ نمی کنند، این چیزهای کوچک هستند که به دستیابی به نتایج بسیار خوب کمک می کنند.

نقض هنجارها

بحث در مورد نیاز به ایجاد فونت های جدید کاملا منطقی است. اخیراً بسیاری از وب سایت ها قدیمی شده اند. آنها از فونت های استاندارد استفاده می کنند که ما در حال حاضر کاملاً از آنها خسته شده ایم.

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

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

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

انتخاب فونت مناسب

همچنین لازم به ذکر است که فونت های مختلف می توانند تأثیرات متفاوتی بر روحیه خوانندگان داشته باشند. به طور کلی، فونت های سریف برای مواد چاپی مناسب تر هستند. سریف ها به ایجاد فضای بین حروف و همچنین جداسازی یک کاراکتر از دیگری کمک می کنند. غالباً، فونت‌های سریف حسی شخصی را ایجاد می‌کنند که احترام، هوش و حرفه‌ای بودن را منتقل می‌کنند.

فونت های بدون سریف برای صفحات وب بهترین هستند. رزولوشن پایین صفحه باعث می‌شود که سریال‌ها تار به نظر برسند و به نوبه خود درک آن دشوار باشد. فونت های Sans Serif تمایل دارند احساسات عقلانیت، شیک بودن، جوانی و مدرنیته را بیان کنند.

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

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

خوانایی

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

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

محتوای اطلاعاتی

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

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

مکان و ابعاد

برای طراحی موثر بسیار مهم است - متن در چه مکان هایی باید قرار گیرد و اندازه آن باید چقدر باشد. هیچ کس نمی خواهد چشمان خود را برای خواندن اطلاعات یا دیدن کلمات فوق العاده بزرگ در یک وب سایت تحت فشار بگذارد. هدف از خلقت طراحی خوبیافتن تعادل است و اولین قدم برای این کار این است که بفهمیم کدام اطلاعات مهم تر خواهد بود.

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

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

رنگ

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

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

نتیجه

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

تایپوگرافیطبق آمار، 95 درصد محتوای وب سایت را محتوای متنی ایفا می کند. طراحی فونت حالت را کنترل می کند و فضای خاصی را هنگام خواندن محتوای متنی صفحات وب ایجاد می کند.

تایپوگرافی وب مدرن بر اساس سبک های CSS است. با تغییر تنظیمات سبک مرورگر پیش فرض، می توانید محتوای متنی را جذاب تر کنید.

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

ویژگی های CSS برای تایپوگرافی وب مناسب

1. خانواده فونت (مخصوص فونت-خانواده)

انتخاب فونت با انتخاب نوع فونت شروع می شود.

هدست- یک فونت یا چندین فونت که دارای وحدت سبکی از سبک هستند. شامل مجموعه ای از کاراکترها (معمولاً اعداد، حروف، علائم نقطه گذاری، کاراکترهای خاص، اما همچنین می تواند منحصراً از کاراکترهای غیر الفبایی تشکیل شود). برای مثال فونت Times New Roman از فونت های منظم، ایتالیک، بولد و بسیاری دیگر از این خانواده تشکیل شده است.

هدست ها را می توان به دو دسته اصلی تقسیم کرد: سریف(فونت های عتیقه و اسلب) و بدون دندانه(گروتسک).

فونت های Sans Serif ساده و واضح هستند ظاهر. از سوی دیگر، فونت های سریف، لحن جدی و رسمی تری را منتقل می کنند.

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

در چه مواردی می توانید از چندین فونت استفاده کنید:

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

سرویس TypeTester برای انتخاب فونت

2. ترکیبی از فونت های serif و sans serif

در توصیه‌هایی برای ترکیب فونت‌ها، یک قانون ناگفته حاکم است: یک فونت sans-serif برای سرفصل‌ها انتخاب می‌شود و یک قلم سریف برای متن اصلی استفاده می‌شود. با این حال، این روش آنقدر که به نظر می رسد محبوب نیست.

در واقع، این قانون در درجه اول در مورد انتشارات چاپی و چاپ کتاب صدق می کند. این به خاطر این واقعیت است که یک فونت با سریف ها (ضربه های کوچک در انتهای خطوط اصلی) به آرامی در یک خط ردیف می شود و درک متن را آسان تر می کند و آن را خواناتر می کند.

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

3. رنگ قلم (ویژگی رنگ)

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

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

رنگ گرم به طور فعال توجه را به متن جلب می کند و آن را از نظر اندازه بصری بزرگتر از فونت های با اندازه مشابه در سایه های سرد می کند. برای عناصر متنی کوچک، رنگ های روشن تر مناسب هستند.

هنگام انتخاب تعداد رنگ متن، ترجیحاً خود را به دو رنگ نسبتاً متضاد (بدون احتساب سیاه و سفید) محدود کنید. متن سیاه روی پس زمینه سفید یک متن کلاسیک و کاملا متضاد است.

4. اندازه قلم (ویژگی اندازه فونت)

اندازه فونت پایه در مرورگر 16 پیکسل است و اندازه سرفصل ها متناسب با اندازه فونت پایه تنظیم شده است (h1 - 2em، h2 - 1.5em، h3 - 1.17em و غیره).

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

اندازه متن در پنجره مرورگر تحت تأثیر وضوح مانیتور کاربر است: متنی با همان اندازه در یک مانیتور با کیفیت بالادر یک مانیتور با وضوح پایین تر از متنی با همان اندازه کوچکتر به نظر می رسد.

فونت ها در خانواده های مختلف با اندازه یکسان نیز می توانند اندازه های واقعی متفاوتی داشته باشند.

با افزایش وضوح صفحه نمایش و اندازه مانیتور، لازم است اندازه متن معمولی 12-14 پیکسل را در نظر بگیرید. برای متن معمولی، اندازه فونت 14-18 پیکسل در حال حاضر به طور گسترده استفاده می شود. هنگام تنظیم اندازه فونت، نباید سازگاری را فراموش کنید، به عنوان مثال. اندازه فونت باید بسته به اندازه صفحه تغییر کند.

5. تراز کردن متن (ویژگی تراز کردن متن)

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

6. فاصله حروف و کاراکتر (ویژگی های فاصله بین کلمات و حروف)

فاصله حروف بر خوانایی متن تأثیر می گذارد. تغییر تراکم متن (متن فشرده و پراکنده) به شما امکان می دهد سرعت درک را متنوع کنید و به تعادل در ترکیب متن سایت برسید.

فونت های Serif با کاهش فاصله حروف گویاتر به نظر می رسند.

7. فاصله بین خطوط (ویژگی خط-ارتفاع)

مقدار بهینه فاصله بین خطوط 1.4 - 1.6 برابر اندازه فونت است.

همچنین، بین سرفصل ها و پاراگراف مربوطه فاصله زیادی قرار ندهید.

8. طول خط

یک خط برای خواندن مداوم باید از 30 تا 75 کاراکتر (تقریبا 7-10 کلمه در یک خط) باشد. هرچه خط متن گسترده تر باشد، فاصله خطوط باید بزرگتر باشد. فاصله خطوط نباید کمتر از فاصله بین کلمات باشد.

9. سبک قلم (ویژگی سبک فونت)

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

نوع فونت دارایی: small-caps; با تبدیل متن به طوری که تمام حروف با حروف کوچک ظاهر شوند، پیچیدگی تایپوگرافی را به متن اضافه می کند. این تکنیک برای قطعات متنی کوچک مناسب است.

10. ساختار متن و سلسله مراتب بصری

ساختار یک صفحه وب شامل موارد زیر است:

• لوگو/نام سایت؛
• عناوین/عناوین؛
• عناوین ثانویه؛
• متن اصلی؛
• جهت یابی؛
• پیوندهای ابرمتن؛
• نقل قول های طولانی؛
• پانل های جانبی؛
• امضاها/کتیبه ها در جداول، شکل ها.

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

شش سطح عنوان در HTML وجود دارد که با مهمترین آنها شروع می شود

و با اهمیت کمتری به پایان می رسد

. سرفصل

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

برای همسان سازی راحت تر، متن باید به قسمت ها تقسیم شود و برای هر بخش، عنوانی در سطح مناسب انتخاب شود. هرچه سطح عنوان بالاتر باشد، بخش باید از نظر محتوا اهمیت بیشتری داشته باشد.

که در ساختار کلیمتن، باید به پیوندها توجه ویژه ای شود.

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

• سرمایه، پایتخت؛
• حروف کج
• سبک جسورانه / جسورانه؛
• اندازه؛
• رنگ؛
• تغییر هدست؛
• تغییر موقعیت کاراکترها در یک نوار متن (حروف بزرگ و کوچک، تورفتگی)؛
• انتخاب کاراکترها با استفاده از عناصر گرافیکی- اشاره گرها، فریم ها، آیکون ها و غیره

تأکید بیش از حد نه تنها بر یک قطعه خاص تأکید می کند، بلکه خواندن آن را نیز دشوار می کند.

11. فونت های ایمن

فونت ویندوز / فونت مک / خانواده فونت

آریال، آریال، هلوتیکا، بدون دندانه

بدون دندانه

خط شکسته

تک فضا

جورجیا 1، گرجستان، سریف

بدون دندانه

کنسول لوسیدا، موناکو 5، تک فضا

بدون دندانه

سریف

تاهوما، ژنو، بدون دندانه

تایمز نیو رومن، تایمز، سریف

Trebuchet MS 1، Helvetica، بدون دندانه

Verdana، Verdana، ژنو، بدون دندانه

نماد، نماد (نماد 2، نماد 2)

تارنماها، وبگردی ها (Webdings 2, Webdings 2)

Wingdings، Zapf Dingbats

MS Sans Serif 4، ژنو، بدون دندانه

ام اس سریف 4، نیویورک 6، سریف

آریال، آریال، هلوتیکا، بدون دندانه

Arial Black, Arial Black, Gadget, بدون دندانه

Comic Sans MS, Comic Sans MS 5, خط شکسته

پیک جدید، پیک جدید، پیک 6، تک فضا

جورجیا 1، گرجستان، سریف

ضربه، ضربه 5، زغال چوب 6، بدون دندانه

کنسول لوسیدا، موناکو 5، تک فضا

لوسیدا بدون یونیکد، لوسیدا گرانده، بدون دندانه

Palatino Linotype, Book Antiqua 3, Palatino 6, سریف

تاهوما، ژنو، بدون دندانه

تایمز نیو رومن، تایمز، سریف

Trebuchet MS 1، Helvetica، بدون دندانه

Verdana، Verdana، ژنو، بدون دندانه

نماد، نماد (نماد 2، نماد 2)

تارنماها، وبگردی ها (Webdings 2, Webdings 2)

Wingdings، Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4، ژنو، بدون دندانه

ام اس سریف 4، نیویورک 6، سریف

1 فونت‌های Georgia و Trebuchet MS با Windows 2000/XP عرضه می‌شوند و در بسته فونت IE گنجانده شده‌اند (و در واقع با بسیاری از برنامه‌های مایکروسافت عرضه می‌شوند)، بنابراین بر روی بسیاری از رایانه‌های Windows 98 نصب می‌شوند.

2 فونت های کاراکتر فقط در نمایش داده می شوند اینترنت اکسپلورر، در سایر مرورگرها معمولاً با آنها جایگزین می شوند فونت استاندارد(اگرچه، برای مثال، فونت Symbol در Opera و Webdings در Safari ظاهر می شود).

3 فونت Book Antiqua تقریباً مشابه Palatino Linotype است. Palatino Linotype با ویندوز 2000/XP و Book Antiqua با ویندوز 98 عرضه می شود.

4 لطفاً توجه داشته باشید که این فونت ها TrueType نیستند، بلکه بیت مپ هستند، بنابراین ممکن است در برخی از اندازه ها بد به نظر برسند (برای نمایش در 8، 10، 12، 14، 18 و 24 pt در 96 DPI طراحی شده اند).

5 این فونت ها فقط در سافاری به سبک استاندارد کار می کنند، اما با حروف پررنگ یا کج کار نمی کنند. Comic Sans MS نیز به صورت پررنگ کار می کند، اما نه به صورت مورب. به نظر می رسد سایر مرورگرهای مک به خوبی ویژگی های فونت از دست رفته را تقلید می کنند (با تشکر از Christian Fecteau برای راهنمایی).

6 این فونت ها فقط با نصب کلاسیک روی مک نصب می شوند

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

تایپوگرافی- یکی از مهمترین جنبه های طراحی وب، زیرا با کمک آن اطلاعات اولیه منتقل می شود. متأسفانه، بسیاری از طراحان و مشتریان از آزمایش‌های جسورانه می‌ترسند و یک یا دو فونت ثابت شده را برای پروژه‌های خود انتخاب می‌کنند.

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

تایپ فیس در مقابل فونت - چه تفاوتی دارد؟

بسیاری از مردم از کلمات "typeface" و "font" به جای یکدیگر استفاده می کنند. در واقع، این یک چیز نیست، حالا دلیل آن را توضیح خواهم داد.

هدستمجموعه‌ای از شخصیت‌های مشابه سبک‌شناسی است که می‌توان نوشت/چاپ کرد. اینها اعداد، حروف، نمادها هستند. فونت- این یک مفهوم محدودتر است که توسط عوامل مختلفی مانند اندازه و سبک تعیین می شود. به طور کلی، Arial یک فونت است و Arial Bold یک فونت است.

طبقه بندی

فونت ها را می توان به چند گروه تقسیم کرد - serif (serif)، sans serif (sans-serif)، دست نویس (اسکریپت)، نمایش (نمایش). با این حال، انواع دیگری از طبقه بندی وجود دارد.

فونت های Serif، Antiqua (Serif)

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

فونت های Serif دارای چندین نوع فرعی هستند - برای مثال، سبک قدیمی("سبک قدیمی" - به آنها اومانیست نیز می گویند، سریف انسان گرایانه) - اولین فونت های این طبقه بندی، در سال 1400 مورد استفاده قرار گرفتند. آنها ویژگی متمایز- اینکه قسمتی از نماد که در زاویه قرار دارد نازک شود. نمونه هایی از فونت ها عبارتند از Adobe Jenson، Centaur و Goudy Old Style.

سری های انتقالی- در دهه 1700 استفاده شد. این شامل فونت هایی مانند Times New Roman و Baskerville و همچنین Caslon، Georgia، و Bookman می شود. تفاوت آنها بین قسمت های ضخیم و نازک حروف بیشتر از سبک قدیمی است، اما کمتر از مدرن قابل توجه است.

سریف های مدرن (آنتیک سبک جدید)- بعد از 1700 استفاده می شود و تضاد قوی بین قسمت های ضخیم و نازک شخصیت ها دارد. این شامل فونت هایی مانند Didot و Bodoni می شود

و در نهایت , سری های اسلب (فونت های اسلب)- به طور کلی ضخامت همه خطوط یکسان و سریف های بزرگ در انتها دارند

فونت های خرد شده، گروتسک (Sans Serif)

فونت های سریف به این دلیل نامیده می شوند که سریف ندارند). آنها مدرن تر به نظر می رسند و در قرن 18 شروع به استفاده از آنها کردند.

در اینجا 4 نوع اصلی فونت sans serif آورده شده است: گروتسک (گروتسک قدیم)، نئوگروتسک (گروتسک جدید)، اومانیست (انسان گرایانه) و هندسی (هندسی).
گروتسک های قدیمی- اولین ها، آنها شبیه به فونت های سریف هستند، اما بدون سریف.
مثلا فرانکلین گوتیک و آکزیدنزه

گروتسک های جدیددر مقایسه با گروتسک های قدیمی ظاهری ساده دارند. بسیاری از محبوب ترین فونت های امروزی sans serif های جدید هستند، به عنوان مثال، MS Sans Serif، Arial، Helvetica و Univers.

اومانیست ها- خوشنویسی تر از تمام فونت های sans serif دیگر (یعنی ضخامت خط آنها تغییر می کند). اینها شامل، به عنوان مثال، Gill Sans، Frutiger، Tahoma، Verdana، Optima، و Lucide Grande هستند - آنها اغلب برای پر کردن بدنه سایت استفاده می شوند.

هندسیبر اساس ارقام منظم، به عنوان مثال، "O" یک دایره و غیره است. مدرن ترین فونت های sans serif محسوب می شوند. مثال - ITC Avant Garde Gothic، Erbar Grotesk، Eurostile، Futura، Kabel، Metro، Neuzeit Grotesk، Rodchenko، Spartan.

دست نویس (فیلم نامه)

فونت های دست نویس بر اساس دست خط هستند. دو نوع از این فونت ها وجود دارد - رسمی و معمولی. به نظر می رسد که نسخه های رسمی دست نویس هستند و مربوط به قرن های 17 و 18 هستند. برخی از فونت ها بر اساس دستخط هنرمندان مشهوری مانند جورج اسنل و جورج بیکهام ساخته شده اند. به عنوان نمونه ای از فونت های مدرن، می توانید از Kuenstler Script استفاده کنید. در عین زیبایی و شکیل بودن، به بدنه صفحه نمی خورد.

فونت های معمولی نسخه مدرن تری هستند که در قرن بیستم ایجاد شدند. کمتر رسمی است، اغلب با ضربات برجسته و یک اثر ضربه قلم مو. این فونت ها عبارتند از Mistral و Brush Script.

نمایش فونت ها

دسته بندی فونت های نمایشی شامل آن دسته از فونت هایی است که عموماً برای نوشتن متن مناسب نیستند. اغلب آنها به عنوان یک لهجه عمل می کنند. آنها معمولاً در چاپ استفاده می شوند، اگرچه در صفحات اینترنت ظاهر می شوند. در بین نمایشگرها می توانید مثلاً سیاه نامه - فونت های اصلی اولین ماشین های چاپ را پیدا کنید.

فونت های غیر الفبایی (Dingbats)

فونت های غیر الفبایی- اینها آن دسته از فونت هایی هستند که به هیچ وجه حاوی حروف نیستند، اما حاوی نمادها و تزئینات هستند.

متناسب در مقابل تک فاصله

در فونت های متناسب، یک کاراکتر به اندازه املای طبیعی آن فضایی را اشغال می کند. به عنوان مثال، Times New Roman یک فونت متناسب است. اما فونت های monospace همه کاراکترها با عرض یکسان هستند. از جمله فونت هایی می توان به Courier New اشاره کرد

حالت

حالت فونت تا حد زیادی بر مناسب بودن استفاده از آن در یک موقعیت خاص تأثیر می گذارد. از کنتراست ها نیز اغلب استفاده می شود - سبک کسب و کار با غیر رسمی، سبک با نمایشی ترکیب می شود. به عنوان مثال، Times New Roman یک فونت سختگیرانه است، و این فونتی است که اغلب برای آن استفاده می شود مکاتبات تجاری. اما، به عنوان مثال، Helvetica به طور کلی حال و هوای خود را بسته به فونت های اطراف تغییر می دهد.

ضخامت و سبک

ضخامت فونت ها: سبک، نازک، منظم، متوسط، پررنگ، سنگین یا سیاه.

سه سبک فونت وجود دارد - ایتالیک، مورب و حروف کوچک. کلاهک های کوچک معمولا برای سرفصل ها استفاده می شود.

مورب و مورب قابل تعویض هستند، اگرچه سبک های متفاوتی هستند. Oblique یک نسخه مایل از فونت های معمولی است. برای دریافت آن، فقط از تابع Free Transform-Distort در فتوشاپ استفاده کنید. اما Italic یک مجموعه کاراکتر جداگانه است که مسئولیت نسخه اریب فونت را بر عهده دارد.

ساختار فونت

هر کاراکتر دارای مجموعه مشخصی از ویژگی ها است که می توان از آنها برای تعیین نحوه ترکیب آن با فونت های دیگر استفاده کرد. در اینجا موارد اصلی وجود دارد:

خط فونت (خط پایه)- یک خط خیالی که متن روی آن قرار دارد. گاهی اوقات فونت های گرد کمی از خط فونت فاصله می گیرند.

خط کوچک (متوسط)نشان دهنده ارتفاع بیشتر حروف کوچک است که معمولاً با ارتفاع حرف "x" تعیین می شود. مفهوم ارتفاع x از اینجا می آید.

خط بالای حروف بزرگ (کلاه)- ارتفاع حرف بزرگ "A".

تصویر بالا سه قسمت مشترک همه حروف را نشان می دهد.

ضربه اصلی، ساقه- عمود اصلی هر نماد، از جمله مایل.

میله متقاطع (نوار)- قسمت افقی فونت

بیضی (کاسه)- قسمت گرد شده فونت

پسوند فوقانی (Ascender)- قسمتی از حروف چسبیده مانند «د»، «ه» و «ب».

فرود آمدن- قسمت بیرون زده حروف مانند "پ"، "ق" و "ف"

سریف ها- ویژگی متمایز فونت های سریف). در برخی از فونت ها آنها بیشتر تلفظ می شوند، در حالی که در برخی دیگر کمتر تلفظ می شوند.

دیافراگم- فضایی را برای کاراکترهای باز مانند "A"، "c" یا "m" نشان می دهد.

گوشاین یک نماد تزئینی است، مانند حرف "g" در مثال بالا.

اتصال سکته مغزی (خط مو)این نازک ترین قسمت یک فونت سریف است.

میله متقاطع- یک خط افقی، مانند نمادهای "A" و "H".

رها کردن (ترمینال)- انتهای گرد یا بیضی شکل (قطره ای شکل) در طراحی برخی از کاراکترهای فونت.

حلقهفقط در برخی از حروف کوچک "g" رخ می دهد و ممکن است کاملا بسته یا تا حدی بسته باشد.

Spur- علامت کوچک روی برخی از حروف، مانند "G".

اتصال (پیوند)بالا و پایین حرف "g" را به هم وصل می کند.

ستون فقرات- منحنی مرکزی که حرف "s" دارد.

حروف دم (دم)- یک خط تزئینی، به عنوان مثال، روی حرف "R" یا "Q".

عنصر پایانی (پایانه، نهایی)- پایان سکته مغزی بدون سریف

شانه- یک خط گرد که از سکته مغزی اصلی امتداد می یابد. (راستش را بخواهید، بسیاری از سایت های روسی تعریف کاملاً متفاوتی از این مفهوم ارائه می دهند)