O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ در ﻃﺮاﺣﯽ واﮐﻨﺸﮕﺮا‬
‫ﺳﺎﻻر ﮐﺎﺑﻠﯽ‬
‫‪#RWDConf92 | @Sallar‬‬
‫3102 ,‪December 5th‬‬
‫ﻣﺘﻮن ﺑﺎﯾﺪ ﺧﻮاﻧﺎ ﺑﺎﺷﻨﺪ‬
‫ﻣﺘﻮن ﺧﻮاﻧﺎ‬
‫رﻧﮓ ﻫﺎﯾﯽ اﻧﺘﺨﺎب ﮐﻨﯿﺪ ﮐﻪ ﺧﻮاﻧﺎﯾﯽ ﮐﺎﻓﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ و ﭼﺸﻢ را آزار ﻧﺪﻫﻨﺪ.‬

‫ﺧﻮاﻧﺎ‬

‫ﻧﺎﺧﻮاﻧﺎ‬
‫ﻣﺘﻮن ﺧﻮاﻧﺎ‬
‫ﻓﻮﻧﺖ ﻫﺎﯾﯽ اﻧﺘﺨﺎب ﮐﻨﯿﺪ ﮐﻪ ﺧﻮاﻧﺎ و ﻣﺨﺼﻮص اﺳﺘﻔﺎده در وب ﺑﺎﺷﻨﺪ.‬

‫ﻋﻠﻢ ﻧﻮر اﺳﺖ و ﺟﻬﻞ ﺗﺎرﯾﮑﯽ.‬
‫ﻋﻠﻢ ﻧﻮر اﺳﺖ و ﺟﻬﻞ...
‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫اﻧﺪازه ﻗﻠﻢ اﺻﻠﯽ ﺻﻔﺤﻪ را ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ ﺑﺮ اﺳﺎس درﺻﺪ ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ.‬

‫{‪html‬‬
‫;%001 :‪font-size‬‬
‫}‬
‫ﻣ...
‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫اﻧﺪازه ارﺗﻔﺎع ﺧﻄﻮط را ﯾﮏ ﺑﺎر و ﺑﺪون واﺣﺪ ﺗﻌﺮﯾﻒ ﮐﻨﯿﺪ.‬

‫{‪html‬‬
‫;%001 :‪font-size‬‬
‫;5.1 :‪line-he...
‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫ﺑﺮای ﺗﻌﺮﯾﻒ اﻧﺪازه ﻗﻠﻢ در ﺻﻔﺤﻪ، ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ از واﺣﺪﻫﺎی زﯾﺮ اﺳﺘﻔﺎده ﮐﻨﯿﺪ:‬

‫‪em / rem‬‬
‫‪vw / vh‬‬
‫...
‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫ﻫﺮ واﺣﺪ ‪ em‬ﺑﻪ اﻧﺪازه اﺑﻌﺎد ﺣﺮف ‪ M‬ﺑﺰرگ در ﻋﻨﺼﺮ واﻟﺪ اﺳﺖ.‬

‫‪M‬‬

‫اﮔﺮ ﺳﺎﯾﺰ ﻗﻠﻢ ﻋﻨﺼﺮ واﻟﺪ ﺗﻌﯿﯿﻦ ﻧﺸ...
html{
font: 100%/1.5 "Helvetica Neue", sans-serif;
}
!
div{
font-size: 1.2em; // 16 x 1.2 = 19.2px;
}
!
div p{
font-size: ...
‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
!‫ )و واﺣﺪﻫﺎی ﻣﺮﺗﺒﻂ( ﻣﯽ ﺗﻮاﻧﯿﺪ ﻫﻤﻪ ﺟﺎ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‬em ‫از واﺣﺪ‬

.box{
border-radius: 1em;
height: 10e...
‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫اﻧﺪازه ﻗﻠﻢ را ﻃﻮری ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ ﮐﻪ در ﻫﺮ ﺧﻂ ﺑﻪ ﻃﻮر ﻣﯿﺎﻧﮕﯿﻦ ﺑﯿﻦ‬
‫۵۴ ﺗﺎ ۵۷ ﺣﺮف وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ.‬
‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
‫ﺳﺎﯾﺰ ﻣﺘﻮن را ﺑﺮ اﺳﺎس اﻫﻤﯿﺖ آن ﻫﺎ و ﺑﺮ اﺳﺎس ﯾﮏ ﺳﯿﺴﺘﻢ ﻣﻘﯿﺎس اﻧﺘﺨﺎب ﮐﻨﯿﺪ.‬

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

‫‪type-scale.com‬‬
‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬
‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬
‫ﺑﺎ اﺳﺘﻔﺎده از ﻣﺪﯾﺎ ﮐﻮِﯾﺮی ﺳﺎﯾﺰ ﻗﻠﻢ رﯾﺸﻪ ای ﺗﺮﯾﻦ ﻋﻨﺼﺮ را ﺗﻐﯿﯿﺮ دﻫﯿﺪ.‬

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

‫{)‪media all and (max-width: 800px...
‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬
‫ﻫﻨﮕﺎم ﺗﻌﺮﯾﻒ ﻣﺪﯾﺎ ﮐﻮِﯾﺮی ﻫﺎ ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ از ‪ em‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ.‬

‫{)‪media all and (max-width: 50em...
‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬
‫واﺣﺪ ‪ em‬را ﭼﻄﻮر ﻣﺤﺎﺳﺒﻪ ﮐﻨﯿﻢ؟‬

‫‪px ÷ 16 = em‬‬
‫‪800px ÷ 16px = 50em‬‬
.box{
font-size: 1.5em;
line-height: 1.4;
width: 30em; //480px
}
!
@media all and (max-width: 30em)
{
.box{
font-size: 1.4...
FitTextJs.com
SimpleFocus.com/flowtype
Type-Scale.com
@SALLAR
SALLAR.ME
SALLAR.KABOLI@GMAIL.COM
Próximos SlideShares
Carregando em…5
×

Web Typography / RWD Conference Iran 2013 (In Farsi)

2.219 visualizações

Publicada em

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

Publicada em: Tecnologia

Web Typography / RWD Conference Iran 2013 (In Farsi)

  1. 1. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ در ﻃﺮاﺣﯽ واﮐﻨﺸﮕﺮا‬ ‫ﺳﺎﻻر ﮐﺎﺑﻠﯽ‬ ‫‪#RWDConf92 | @Sallar‬‬ ‫3102 ,‪December 5th‬‬
  2. 2. ‫ﻣﺘﻮن ﺑﺎﯾﺪ ﺧﻮاﻧﺎ ﺑﺎﺷﻨﺪ‬
  3. 3. ‫ﻣﺘﻮن ﺧﻮاﻧﺎ‬ ‫رﻧﮓ ﻫﺎﯾﯽ اﻧﺘﺨﺎب ﮐﻨﯿﺪ ﮐﻪ ﺧﻮاﻧﺎﯾﯽ ﮐﺎﻓﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ و ﭼﺸﻢ را آزار ﻧﺪﻫﻨﺪ.‬ ‫ﺧﻮاﻧﺎ‬ ‫ﻧﺎﺧﻮاﻧﺎ‬
  4. 4. ‫ﻣﺘﻮن ﺧﻮاﻧﺎ‬ ‫ﻓﻮﻧﺖ ﻫﺎﯾﯽ اﻧﺘﺨﺎب ﮐﻨﯿﺪ ﮐﻪ ﺧﻮاﻧﺎ و ﻣﺨﺼﻮص اﺳﺘﻔﺎده در وب ﺑﺎﺷﻨﺪ.‬ ‫ﻋﻠﻢ ﻧﻮر اﺳﺖ و ﺟﻬﻞ ﺗﺎرﯾﮑﯽ.‬ ‫ﻋﻠﻢ ﻧﻮر اﺳﺖ و ﺟﻬﻞ ﺗﺎرﯾﮑﯽ.‬ ‫ﻋﻠﻢ ﻧﻮر اﺳﺖ و ﺟﻬﻞ ﺗﺎرﯾﮑﯽ.‬ ‫ﻋ0ﻢ .ﻮر ا+ﺖ و ('ﻞ %رﯾ"‬ ‫ﯽ.‬
  5. 5. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬
  6. 6. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬ ‫اﻧﺪازه ﻗﻠﻢ اﺻﻠﯽ ﺻﻔﺤﻪ را ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ ﺑﺮ اﺳﺎس درﺻﺪ ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ.‬ ‫{‪html‬‬ ‫;%001 :‪font-size‬‬ ‫}‬ ‫ﻣﺮورﮔﺮﻫﺎ ﻫﻤﯿﺸﻪ ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض اﻧﺪازه ﻗﻠﻢ ﺻﻔﺤﺎت را ﺗﻌﯿﯿﻦ ﻣﯿﮑﻨﻨﺪ و‬ ‫اﯾﻦ اﻧﺪازه را ﻣﯿﺸﻮد ﺗﻐﯿﯿﺮ داد.‬
  7. 7. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬ ‫اﻧﺪازه ارﺗﻔﺎع ﺧﻄﻮط را ﯾﮏ ﺑﺎر و ﺑﺪون واﺣﺪ ﺗﻌﺮﯾﻒ ﮐﻨﯿﺪ.‬ ‫{‪html‬‬ ‫;%001 :‪font-size‬‬ ‫;5.1 :‪line-height‬‬ ‫}‬ ‫ﻣﻌﻤﻮﻻ ارﺗﻔﺎع ﺧﻄﻮط ۵٫۱ ﺑﺮاﺑﺮ ﺳﺎﯾﺰ ﻗﻠﻢ ﺟﺎری و ﯾﺎ ﺑﺮ اﺳﺎس ﻧﺴﺒﺖ ﻃﻼﯾﯽ‬ ‫اﻧﺘﺨﺎب ﻣﯿﺸﻮد.‬
  8. 8. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬ ‫ﺑﺮای ﺗﻌﺮﯾﻒ اﻧﺪازه ﻗﻠﻢ در ﺻﻔﺤﻪ، ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ از واﺣﺪﻫﺎی زﯾﺮ اﺳﺘﻔﺎده ﮐﻨﯿﺪ:‬ ‫‪em / rem‬‬ ‫‪vw / vh‬‬ ‫%‬
  9. 9. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬ ‫ﻫﺮ واﺣﺪ ‪ em‬ﺑﻪ اﻧﺪازه اﺑﻌﺎد ﺣﺮف ‪ M‬ﺑﺰرگ در ﻋﻨﺼﺮ واﻟﺪ اﺳﺖ.‬ ‫‪M‬‬ ‫اﮔﺮ ﺳﺎﯾﺰ ﻗﻠﻢ ﻋﻨﺼﺮ واﻟﺪ ﺗﻌﯿﯿﻦ ﻧﺸﺪه ﺑﺎﺷﺪ، از ﻋﻨﺼﺮ واﻟﺪ آن ﻋﻨﺼﺮ‬ ‫ﻣﺤﺎﺳﺒﻪ ﻣﯿﺸﻮد.‬ ‫واﺣﺪ ‪ ،rem‬ﺑﻪ اﻧﺪازه واﺣﺪ ‪ em‬اﺳﺖ وﻟﯽ روی رﯾﺸﻪ ای ﺗﺮﯾﻦ ﻋﻨﺼﺮی‬ ‫ﮐﻪ ﺳﺎﯾﺰ ﻗﻠﻢ آن ﺗﻌﯿﯿﻦ ﺷﺪه اﺳﺖ. ﻣﺜﻼ ‪.html‬‬
  10. 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. 11. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬ !‫ )و واﺣﺪﻫﺎی ﻣﺮﺗﺒﻂ( ﻣﯽ ﺗﻮاﻧﯿﺪ ﻫﻤﻪ ﺟﺎ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‬em ‫از واﺣﺪ‬ .box{ border-radius: 1em; height: 10em; width: 30em; padding: 0.2em 0 5em; font-size: 3rem; line-height: 2em; }
  12. 12. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬ ‫اﻧﺪازه ﻗﻠﻢ را ﻃﻮری ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ ﮐﻪ در ﻫﺮ ﺧﻂ ﺑﻪ ﻃﻮر ﻣﯿﺎﻧﮕﯿﻦ ﺑﯿﻦ‬ ‫۵۴ ﺗﺎ ۵۷ ﺣﺮف وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ.‬
  13. 13. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬ ‫ﺳﺎﯾﺰ ﻣﺘﻮن را ﺑﺮ اﺳﺎس اﻫﻤﯿﺖ آن ﻫﺎ و ﺑﺮ اﺳﺎس ﯾﮏ ﺳﯿﺴﺘﻢ ﻣﻘﯿﺎس اﻧﺘﺨﺎب ﮐﻨﯿﺪ.‬ ‫ﻧﺴﺒﺖ ﻃﻼﯾﯽ‬ ‫57889330816.1‬
  14. 14. ‫اﻧﺘﺨﺎب اﻧﺪازه ﻗﻠﻢ‬ ‫ﻧﺴﺒﺖ ﻃﻼﯾﯽ ﯾﮑﯽ از ﺑﻬﺘﺮﯾﻦ ﺳﯿﺴﺘﻢ ﻫﺎی اﻧﺘﺨﺎب ﻣﻘﯿﺎس اﺳﺖ.‬ ‫‪type-scale.com‬‬
  15. 15. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬
  16. 16. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬ ‫ﺑﺎ اﺳﺘﻔﺎده از ﻣﺪﯾﺎ ﮐﻮِﯾﺮی ﺳﺎﯾﺰ ﻗﻠﻢ رﯾﺸﻪ ای ﺗﺮﯾﻦ ﻋﻨﺼﺮ را ﺗﻐﯿﯿﺮ دﻫﯿﺪ.‬ ‫{)‪media all and (max-width: 800px‬‬ ‫{‪html‬‬ ‫;%09 :‪font-size‬‬ ‫}‬ ‫}‬ ‫ﻫﻨﮕﺎم ﺗﻌﺮﯾﻒ ﻣﺪﯾﺎ ﮐﻮِﯾﺮی ﻫﺎ از واﺣﺪ ‪ em‬ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ اﺳﺘﻔﺎده ﮐﻨﯿﺪ.‬
  17. 17. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬ ‫ﯾﺎ ﺳﺎﯾﺰ ﻣﱳ ﻋﻨﺎﺻﺮ ﻣﺨﺘﻠﻒ را ﺟﺪاﮔﺎﻧﻪ و ﺑﺮ اﺳﺎس ﻧﯿﺎز ﺗﻐﯿﯿﺮ دﻫﯿﺪ.‬ ‫{)‪media all and (max-width: 800px‬‬ ‫{1‪h‬‬ ‫;‪font-size: 2em‬‬ ‫}‬ ‫}‬
  18. 18. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬ ‫ﻫﻨﮕﺎم ﺗﻌﺮﯾﻒ ﻣﺪﯾﺎ ﮐﻮِﯾﺮی ﻫﺎ ﺑﻪ ﺟﺎی ﭘﯿﮑﺴﻞ از ‪ em‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ.‬ ‫{)‪media all and (max-width: 50em‬‬ ‫{1‪h‬‬ ‫;‪font-size: 2em‬‬ ‫}‬ ‫}‬ ‫واﺣﺪ ‪ em‬ﺑﺮ اﺳﺎس ﺳﺎﯾﺰ ﻓﻮﻧﺖ ﭘﯿﺶ ﻓﺮض ﻣﺮورﮔﺮ ﻋﻤﻞ ﻣﯿﮑﻨﺪ.‬
  19. 19. ‫ﺗﺎﯾﭙﻮﮔﺮاﻓﯽ رﯾﺴﭙﺎﻧﺴﯿﻮ‬ ‫واﺣﺪ ‪ em‬را ﭼﻄﻮر ﻣﺤﺎﺳﺒﻪ ﮐﻨﯿﻢ؟‬ ‫‪px ÷ 16 = em‬‬ ‫‪800px ÷ 16px = 50em‬‬
  20. 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. 21. FitTextJs.com SimpleFocus.com/flowtype Type-Scale.com
  22. 22. @SALLAR SALLAR.ME SALLAR.KABOLI@GMAIL.COM

×