<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>نمونه مثال از تایپوگرافی متون و فونت فارسی</title>
<link rel="stylesheet" href="//codepen.io/assets/reset/reset.css">
<link rel="stylesheet" href="fonts/font.css">
<style>
@charset "UTF-8";
body {
font-family: "TestFont";
font-size: 1em;
line-height: 1.8;
color: #444;
direction: rtl;
text-align: right;
max-width: 850px;
margin: 0 auto;
padding: 1rem;
}
h1,h2,h3,h4,h5,h6 {
font-weight:400;
line-height:1.1
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
font-weight:inherit
}
h1 {
font-size:4.2rem;
line-height:110%;
margin:2.1rem 0 1.68rem 0
}
h2 {
font-size:3.56rem;
line-height:110%;
margin:1.78rem 0 1.424rem 0
}
h3 {
font-size:2.92rem;
line-height:110%;
margin:1.46rem 0 1.168rem 0
}
h4 {
font-size:2.28rem;
line-height:110%;
margin:1.14rem 0 0.912rem 0
}
h5 {
font-size:1.64rem;
line-height:110%;
margin:0.82rem 0 0.656rem 0
}
h6 {
font-size:1.1rem;
line-height:110%;
margin:0.5rem 0 0.4rem 0
}
p {
margin-bottom: .875rem;
}
strong {
font-weight: 600;
}
hr {
height: 1px;
border: none;
margin-bottom: 1rem;
background: #eee;
}
.article-abstract {
max-width: 650px;
margin-top: 2rem;
margin-bottom: 2rem;
border-right: 2px solid #F8BBD0;
padding-right: .875rem;
}
.article ul {
list-style: none;
margin-right: .875rem;
margin-bottom: 1rem;
}
.article ul li:before {
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
margin-left: .4rem;
background: #F8BBD0;
}
.article h3 {
font-size: 1.125em;
line-height: 1.222222;
}
.article a {
text-decoration: none;
border-bottom: 1px solid #EC407A;
color: inherit;
font-weight: 400;
outline: none;
color: #EC407A;
}
.article blockquote,
.article .blockquote {
margin: 2rem auto;
padding: 1rem;
font-size: 1.125em;
line-height: 1.5;
border-top: 2px solid #F8BBD0;
background: #fef2f6;
position: relative;
padding: 1.625rem;
quotes: "”" "”" "”" "”";
position: relative;
}
.article blockquote:before,
.article .blockquote:before {
content: open-quote;
width: 2rem;
height: 2rem;
position: absolute;
top: -1rem;
right: 1.625rem;
font-size: 4em;
color: #fff;
background: #F8BBD0;
line-height: 1;
}
.article ::-moz-selection {
background: #F06292;
color: #111;
}
.article ::selection {
background: #F06292;
color: #050505;
}
</style>
</head>
<body translate="no" >
<header></header>
<h1>کاج عنوان سر صفحه ۱</h1>
<h2>کاج عنوان سر صفحه ۲</h2>
<h3>کاج عنوان سر صفحه ۳</h3>
<h4>کاج عنوان سر صفحه ۴</h4>
<h5>کاج عنوان سر صفحه ۵</h5>
<h6>کاج عنوان سر صفحه ۶</h6>
<p>
چون زیبایی مفردات حروف خیلی اهمیت ندارد. وقتی کنار هم قرار می‌گیرند بسیار اهمیت دارد که ببینید حالا باز هم خواندنی است؟ یک سری حروف زیبا لزوماً کنار هم خواندنی نیستند. ممکن است شما را به یک مسئله معمایی سوق دهد که وقتی این‌گونه نوشته شده چه منظوری داشته؟ مدام شما را می‌برد در ذهنیتی غیر از این چیزی که هدف خوانایی است.
</p>
<p>
تست یک فونت بر خلاف تصور همه بسیار طول می‌کشد. در مرحله تست به دنبال این هستید که بازخوردها چیست، مردم نگاه می‌کنند و یک سری جواب‌هایی را به ما می‌دهند. این جامعه آماری را ما از بین کتاب‌خوان‌ها، از بین افرادی که خیلی با ایمیل سر و کار دارند، از بین کسانی که خودشان وبلاگ دارند و سریع تایپ می‌کنند انتخاب می‌کنیم. حروف را به اینها می‌دهیم تا استفاده کنند، بازخورد می‌فرستند و ما فونت را ریتاچ و ریفاین و ریدیزاین می‌کنیم.
</p>
<p>
حروف را به اینها می‌دهیم تا استفاده کنند، بازخورد می‌فرستند و ما فونت را ریتاچ و ریفاین و ریدیزاین می‌کنیم. نیمی از عمر طراحی یک فونت صرف تست می‌شود. خود طراح هم یکی از افرادی است که فونت را تست می‌کند، ولی به تنهایی کافی نیست، یعنی من نمی‌آیم فتوا دهم که حروف طراحی شد، بروید بخوانید و بنویسید. نه، حروف مدام می‌رود و برمی‌گردد تا به یک بلوغی می‌رسد. روی کاغذ می‌آید، روی مانیتور می‌آید، ما با یکدیگر روی دیوار و با ویدیو پروژکتور فونت را می‌بینیم و راجع به همه چیز آن صحبت می‌کنیم. این رفت و آمدها، این ارتباطی که با هم داریم مستند می‌شود و بعداً می‌آید روی سایت که این پروسه را ما با هم داشته‌ایم.
</P>
<hr>
<article class="article">
<h1 class="h2">تایپوگرافی یک صفحه مقاله</h1>
<p class="article-abstract">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد.
</p>
<p>
کتاب‌های زیادی در شصت‌وسه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می‌طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه‌ای علی‌الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می‌توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروف‌چینی دستاوردهای اصلی و جوابگوی سؤالات پیوسته اهل دنیای موجود طراحی اساساً مورد استفاده قرار گیرد.
</p>
<h3>عنوان داخلی مقاله</h3>
<ul>
<li>لیست شماره یک</li>
<li>لیست شماره دو</li>
<li>لیست شماره سه</li>
<li>لیست شماره چهار</li>
</ul>
<p>
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد. کتاب‌های زیادی در شصت‌وسه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می‌طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه‌ای علی‌الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
</p>
<blockquote>
در این صورت می‌توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد
</blockquote>
<p>
<a href="#">استایل دهی به لینک داخلی</a>
کتاب‌های زیادی در شصت‌وسه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می‌طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه‌ای علی‌الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
<strong>وب فارسی به فونت‌های بیشتری نیاز دارد.
</strong>
<p>
</article>
</body>
</html>