Garnitură text
Paginile web a serviciilor electronice guvernamentale au nevoie de consistență și la capitolul garnitură de text. Aici trebuie să nu uităm și de suportul alfabetului chirilic.
Titlurile trebuie să fie clare și paragrafele de text elibigibile, etichetele vizibile și elementele formularelor ușor de folosit.
Roboto
Recomandăm folosirea familiei de garnituri de text Roboto, care este open-source și are suport pentru diacritice și alfabetul chirilic.
https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic-ext,latin-ext
Aa
A Ă Â B C D E F G H I Î J K L M N O P Q R S Ș T Ț U V W X Y Z a ă â b c d e f g h i î j k l m n o p q r s ș t ț u v w x y z
А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
1 2 3 4 5 6 7 8 9 0
Aa
A Ă Â B C D E F G H I Î J K L M N O P Q R S Ș T Ț U V W X Y Z a ă â b c d e f g h i î j k l m n o p q r s ș t ț u v w x y z
А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
1 2 3 4 5 6 7 8 9 0
Aa
A Ă Â B C D E F G H I Î J K L M N O P Q R S Ș T Ț U V W X Y Z a ă â b c d e f g h i î j k l m n o p q r s ș t ț u v w x y z
А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
1 2 3 4 5 6 7 8 9 0
Aa
A Ă Â B C D E F G H I Î J K L M N O P Q R S Ș T Ț U V W X Y Z a ă â b c d e f g h i î j k l m n o p q r s ș t ț u v w x y z
А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
1 2 3 4 5 6 7 8 9 0
Aa
A Ă Â B C D E F G H I Î J K L M N O P Q R S Ș T Ț U V W X Y Z a ă â b c d e f g h i î j k l m n o p q r s ș t ț u v w x y z
А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
1 2 3 4 5 6 7 8 9 0
Titlurile
-
Titlu H1
h1 {
font-family: Roboto;
font-weight: 700;
font-size: 36px;
line-height: 3.143em;
color: #333333;
} -
Titlu H2
h2{
font-family: Roboto;
font-weight: 700;
font-size: 30px;
line-height: 2.571em;
color: #333333;
} -
Titlu H3
h3{
font-family: Roboto;
font-weight: 700;
font-size: 24px;
line-height: 2.571em;
color: #333333;
} -
Titlu H4
h4{
font-family: Roboto;
font-weight: 700;
font-size: 18px;
line-height: 1.714em;
color: #333333;
} -
Titlu H5
h5{
font-family: Roboto;
font-weight: 400;
font-size: 14px;
line-height: 1.714em;
color: #333333;
} -
Titlu H6
h6{
font-family: Roboto;
font-weight: 400;
font-size: 14px;
line-height: 1.714em;
color: #333333;
}
Paragraf de text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
p{
font-family: Roboto;
font-size: 14px;
line-height: 1.714em;
color: #666666;
}
Paragraf de text pe fundal negru/imagine
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
p{
font-family: Roboto;
font-size: 14px;
line-height: 1.714em;
color: #ffffff;
}
Aliniere texte
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
HTML
<p class="text-left">Lorem ipsum dolor sit amet. </p>
<p class="text-center">Lorem ipsum dolor sit amet.</p>
<p class="text-right">Lorem ipsum dolor sit amet.</p>
-
Pentru a alinia textul folosim clasele ajutătoare
text-left - aliniere text stânga,
text-center - aliniere text pe centru,
text-right - aliniere text la dreapta.
Stilurile sunt implicite din Bootstrap.
Lista neordonata
- Item lista neordonata cu continut mai lung in doua randuri
- Al doile item al listei
- Al treilea item al listei
- Ultimul item al listei
ul{
font-family: Roboto;
font-size: 14px;
line-height: 1.714em;
color: #666666;
}
Lista ordonata
- Item lista ordonata cu continut mai lung in doua randuri
- Al doile item al listei
- Al treilea item al listei
- Ultimul item al listei
ol{
font-family: Roboto;
font-size: 14px;
line-height: 1.714em;
color: #666666;
}
Legături
Legătura - implicit
Legătura - mouse over
a{color: #3366cc;}
a:hover{
color: #33333;
text-decoration: underline;
}
Paragraf evidentiat
blockquote
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
blockquote{
font-family: Roboto;
font-weight: 400;
font-stye: italic;
font-size: 14px;
line-height: 1.714em;
color: #333333;
}
Code
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
code{
font-family: "Courier New",monospace;
font-size: 90%;
line-height: 1.714em;
color: #c7254e;
padding: 2px 4px;
}
Aliniere text cu imagini
Aliniere stinga
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, voluptatum quam sunt id aperiam eos voluptatem nemo eligendi eius quos suscipit excepturi beatae minima commodi harum deserunt consequuntur reprehenderit iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eius quia animi neque est quaerat itaque alias exercitationem doloribus, ullam tenetur debitis nihil architecto, hic eligendi.
Aliniere drepta
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, voluptatum quam sunt id aperiam eos voluptatem nemo eligendi eius quos suscipit excepturi beatae minima commodi harum deserunt consequuntur reprehenderit iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eius quia animi neque est quaerat itaque alias exercitationem doloribus, ullam tenetur debitis nihil architecto, hic eligendi.
Aliniere centru
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, voluptatum quam sunt id aperiam eos voluptatem nemo eligendi eius quos suscipit excepturi beatae minima commodi harum deserunt consequuntur reprehenderit iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eius quia animi neque est quaerat itaque alias exercitationem doloribus, ullam tenetur debitis nihil architecto, hic eligendi.
Imagini cu descriere
Exemplu:
Titlul articolului
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.
Subtitlu H2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
- Item lista neordonata cu continut mai lung in doua randuri
- Al doilea item al listei
Ut enim ad minim veniam, quis nostrud exercitation ullamco ut aliquip ex ea commodo consequat.
html
<div class="col-md-5">
<h1 class="text-capitalize article-title" >Titlul articolului</h1 >
<p class="article-author" >
Scris de
<a href="#" class="text-capitalize" >Andrei popescu</a >
la 28 septembrie 2016 în
<a href="#" >Generalități</a >
</p >
</div >
<div class="col-md-8">
<div class="test-bg"></div>
</div>
<div class="col-md-4">
<div class="test-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<blockquote>
<i>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.
</i>
</blockquote>
<h3>Subtitlu H2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt.
</p>
<ul>
<li>
Item lista neordonata cu continut mai lung in doua randuri
</li>
<li>
Al doilea item al listei
</li>
</ul>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
css
.article-title{
color: #333;
font-weight: 700;
margin-top: 0;
}
.exemple-title{margin-bottom: 25px;}
.article-author{
font-weight: 300;
color: #666;
}
.article-author a{color: #3366cc}
.article-author a:hover{color: #333}
.test-bg{
margin-top: 15px;
height: 515px;
width: 100%;
background-image: url('../images/test_bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.test-description{padding-top: 10px;}
.test-description p{
color: #666;
line-height: 1.714em;
margin-bottom: 20px;
}
.test-description blockquote{
color: #333;
font-size: 14px;
line-height: 1.714em;
padding: 0;
border: none;
}
.test-description h3{
color: #333;
font-weight: 700;
margin: 20px 0;
}
.test-description ul{
line-height: 1.714em;
padding-left: 15px;
}
.test-description ul li{
margin-bottom: 20px;
padding-left: 12px;
padding-right: 100px;
}