Some insights about web typography and a simple guide to make content more pleasant to read on web. (in Farsi)

1. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ در ﻃﺮاﺣﯽ واﮐﻨﺸﮕﺮا‬
‫ﺳﺎﻻر ﮐﺎﺑﻠﯽ‬
‫‪#RWDConf92 | @Sallar‬‬
‫3102 ,‪December 5th‬‬

2. ‫ﻣﺘﻮن ﺑﺎﯾﺪ ﺧﻮاﻧﺎ ﺑﺎﺷﻨﺪ‬

3. ‫ﻣﺘﻮن ﺧﻮاﻧﺎ‬
‫رﻧﮓ ﻫﺎﯾﯽ اﻧﺘﺨﺎب ﮐﻨﯿﺪ ﮐﻪ ﺧﻮاﻧﺎﯾﯽ ﮐﺎﻓﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ و ﭼﺸﻢ را آزار ﻧﺪﻫﻨﺪ.‬
‫ﺧﻮاﻧﺎ‬
‫ﻧﺎﺧﻮاﻧﺎ‬

4. ‫ﻣﺘﻮن ﺧﻮاﻧﺎ‬
‫ﻓﻮﻧﺖ ﻫﺎﯾﯽ اﻧﺘﺨﺎب ﮐﻨﯿﺪ ﮐﻪ ﺧﻮاﻧﺎ و ﻣﺨﺼﻮص اﺳﺘﻔﺎده در وب ﺑﺎﺷﻨﺪ.‬
‫ﻋﻠﻢ ﻧﻮر اﺳﺖ و ﺟﻬﻞ ﺗﺎرﯾﮑﯽ.‬
‫ﻋﻠﻢ ﻧﻮر اﺳﺖ و ﺟﻬﻞ ﺗﺎرﯾﮑﯽ.‬
‫ﻋﻠﻢ ﻧﻮر اﺳﺖ و ﺟﻬﻞ ﺗﺎرﯾﮑﯽ.‬
‫ﻋ0ﻢ .ﻮر ا+ﺖ و ('ﻞ %رﯾ"‬
‫ﯽ.‬

5. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬

6. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫اﻧﺪازه ﻗﻠﻢ اﺻﻠﯽ ﺻﻔﺤﻪ را ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ ﺑﺮ اﺳﺎس درﺻﺪ ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ.‬
‫{‪html‬‬
‫;%001 :‪font-size‬‬
‫}‬
‫ﻣﺮورﮔﺮﻫﺎ ﻫﻤﯿﺸﻪ ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض اﻧﺪازه ﻗﻠﻢ ﺻﻔﺤﺎت را ﺗﻌﯿﯿﻦ ﻣﯿﮑﻨﻨﺪ و‬
‫اﯾﻦ اﻧﺪازه را ﻣﯿﺸﻮد ﺗﻐﯿﯿﺮ داد.‬

7. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫اﻧﺪازه ارﺗﻔﺎع ﺧﻄﻮط را ﯾﮏ ﺑﺎر و ﺑﺪون واﺣﺪ ﺗﻌﺮﯾﻒ ﮐﻨﯿﺪ.‬
‫{‪html‬‬
‫;%001 :‪font-size‬‬
‫;5.1 :‪line-height‬‬
‫}‬
‫ﻣﻌﻤﻮﻻ ارﺗﻔﺎع ﺧﻄﻮط ۵٫۱ ﺑﺮاﺑﺮ ﺳﺎﯾﺰ ﻗﻠﻢ ﺟﺎری و ﯾﺎ ﺑﺮ اﺳﺎس ﻧﺴﺒﺖ ﻃﻼﯾﯽ‬
‫اﻧﺘﺨﺎب ﻣﯿﺸﻮد.‬

8. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫ﺑﺮای ﺗﻌﺮﯾﻒ اﻧﺪازه ﻗﻠﻢ در ﺻﻔﺤﻪ، ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ از واﺣﺪﻫﺎی زﯾﺮ اﺳﺘﻔﺎده ﮐﻨﯿﺪ:‬
‫‪em / rem‬‬
‫‪vw / vh‬‬
‫%‬

9. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫ﻫﺮ واﺣﺪ ‪ em‬ﺑﻪ اﻧﺪازه اﺑﻌﺎد ﺣﺮف ‪ M‬ﺑﺰرگ در ﻋﻨﺼﺮ واﻟﺪ اﺳﺖ.‬
‫‪M‬‬
‫اﮔﺮ ﺳﺎﯾﺰ ﻗﻠﻢ ﻋﻨﺼﺮ واﻟﺪ ﺗﻌﯿﯿﻦ ﻧﺸﺪه ﺑﺎﺷﺪ، از ﻋﻨﺼﺮ واﻟﺪ آن ﻋﻨﺼﺮ‬
‫ﻣﺤﺎﺳﺒﻪ ﻣﯿﺸﻮد.‬
‫واﺣﺪ ‪ ،rem‬ﺑﻪ اﻧﺪازه واﺣﺪ ‪ em‬اﺳﺖ وﻟﯽ روی رﯾﺸﻪ ای ﺗﺮﯾﻦ ﻋﻨﺼﺮی‬
‫ﮐﻪ ﺳﺎﯾﺰ ﻗﻠﻢ آن ﺗﻌﯿﯿﻦ ﺷﺪه اﺳﺖ. ﻣﺜﻼ ‪.html‬‬

10. html{
font: 100%/1.5 "Helvetica Neue", sans-serif;
}
!
div{
font-size: 1.2em; // 16 x 1.2 = 19.2px;
}
!
div p{
font-size: 1.4em; // 19.2 x 1.2 = 26.88px;
}
!
div span{
font-size: 1rem; // 16 x 1 = 16px;
}
!
div small{
font-size: 0.8rem; // 16 x 0.8 = 12.8px;
}

11. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
!‫ )و واﺣﺪﻫﺎی ﻣﺮﺗﺒﻂ( ﻣﯽ ﺗﻮاﻧﯿﺪ ﻫﻤﻪ ﺟﺎ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‬em ‫از واﺣﺪ‬
.box{
border-radius: 1em;
height: 10em;
width: 30em;
padding: 0.2em 0 5em;
font-size: 3rem;
line-height: 2em;
}

12. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫اﻧﺪازه ﻗﻠﻢ را ﻃﻮری ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ ﮐﻪ در ﻫﺮ ﺧﻂ ﺑﻪ ﻃﻮر ﻣﯿﺎﻧﮕﯿﻦ ﺑﯿﻦ‬
‫۵۴ ﺗﺎ ۵۷ ﺣﺮف وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ.‬

13. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫ﺳﺎﯾﺰ ﻣﺘﻮن را ﺑﺮ اﺳﺎس اﻫﻤﯿﺖ آن ﻫﺎ و ﺑﺮ اﺳﺎس ﯾﮏ ﺳﯿﺴﺘﻢ ﻣﻘﯿﺎس اﻧﺘﺨﺎب ﮐﻨﯿﺪ.‬
‫ﻧﺴﺒﺖ ﻃﻼﯾﯽ‬
‫57889330816.1‬

14. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫ﻧﺴﺒﺖ ﻃﻼﯾﯽ ﯾﮑﯽ از ﺑﻬﺘﺮﯾﻦ ﺳﯿﺴﺘﻢ ﻫﺎی اﻧﺘﺨﺎب ﻣﻘﯿﺎس اﺳﺖ.‬
‫‪type-scale.com‬‬

15. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬

16. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬
‫ﺑﺎ اﺳﺘﻔﺎده از ﻣﺪﯾﺎ ﮐﻮِﯾﺮی ﺳﺎﯾﺰ ﻗﻠﻢ رﯾﺸﻪ ای ﺗﺮﯾﻦ ﻋﻨﺼﺮ را ﺗﻐﯿﯿﺮ دﻫﯿﺪ.‬
‫{)‪media all and (max-width: 800px‬‬
‫{‪html‬‬
‫;%09 :‪font-size‬‬
‫}‬
‫}‬
‫ﻫﻨﮕﺎم ﺗﻌﺮﯾﻒ ﻣﺪﯾﺎ ﮐﻮِﯾﺮی ﻫﺎ از واﺣﺪ ‪ em‬ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ اﺳﺘﻔﺎده ﮐﻨﯿﺪ.‬

17. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬
‫ﯾﺎ ﺳﺎﯾﺰ ﻣﱳ ﻋﻨﺎﺻﺮ ﻣﺨﺘﻠﻒ را ﺟﺪاﮔﺎﻧﻪ و ﺑﺮ اﺳﺎس ﻧﯿﺎز ﺗﻐﯿﯿﺮ دﻫﯿﺪ.‬
‫{)‪media all and (max-width: 800px‬‬
‫{1‪h‬‬
‫;‪font-size: 2em‬‬
‫}‬
‫}‬

18. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬
‫ﻫﻨﮕﺎم ﺗﻌﺮﯾﻒ ﻣﺪﯾﺎ ﮐﻮِﯾﺮی ﻫﺎ ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ از ‪ em‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ.‬
‫{)‪media all and (max-width: 50em‬‬
‫{1‪h‬‬
‫;‪font-size: 2em‬‬
‫}‬
‫}‬
‫واﺣﺪ ‪ em‬ﺑﺮ اﺳﺎس ﺳﺎﯾﺰ ﻓﻮﻧﺖ ﭘﯿﺶ ﻓﺮض ﻣﺮورﮔﺮ ﻋﻤﻞ ﻣﯿﮑﻨﺪ.‬

19. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬
‫واﺣﺪ ‪ em‬را ﭼﻄﻮر ﻣﺤﺎﺳﺒﻪ ﮐﻨﯿﻢ؟‬
‫‪px ÷ 16 = em‬‬
‫‪800px ÷ 16px = 50em‬‬

20. .box{
font-size: 1.5em;
line-height: 1.4;
width: 30em; //480px
}
!
@media all and (max-width: 30em)
{
.box{
font-size: 1.4em;
line-height: 1.3;
width: 20em; //320px
}
}

21. FitTextJs.com
SimpleFocus.com/flowtype
Type-Scale.com

22. @SALLAR
SALLAR.ME
SALLAR.KABOLI@GMAIL.COM