כללי אצבע וטיפים לעיצוב טקסטים דיגטליים

כל מה שרציתם/ן לדעת על טיפוגרפיה דיגיטלית ולא העזתם לשאול. בהרצאה זו אחזור לבסיס של העיצוב והטיפוגרפיה עם כמה כללי אצבע לעיצוב טקסטים דיגטליים וטיפים לשדרוג העיצוב של אתרי הוורדפרס שלכם. אדבר על מושגי מפתח בטיפוגרפיה עברית שכל מעצב/מתכנת ישמח להכיר: קרנינג, טרקינג, לדינג, ניקוד, רינדורי טקסט, שילובי פונטים ומשקלים, סריפים, היררכיה, מחוללי טקסט וטכניקות מיוחדות לעיצוב אתרי וורדפרס בקוד סמנטי.

Transcript

1. םיפיטו עבצא יללכ
   םיילטגיד םיטסקט בוציעל
   דלפנרוק םהרבא
   

   View Slide

2. ילע תצק
   

   View Slide

3. ןכות
   

   View Slide

4. 
 הז טנרטניאל בוציע
   היפרגופיט 95%
   ןייטשנכיר רבילוא
   A.I. MAGAZINE
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. PPI
    

    View Slide

11. PPI
    

    View Slide

12. PPI
    

    View Slide

13. PPI
    

    View Slide

14. View Slide

15. עבצא יללכ
    טסקט דומיעל
    

    View Slide

16. הרוש ךרוא
    

    View Slide

17. הרוש ךרוא
    12הלימ
    

    View Slide

18. (Leading/line-height) הרוש־הבוג
    

    View Slide

19. (Leading/line-height) הרוש־הבוג
    1.5
    

    View Slide

20. הרוש ךרואל סחיב הרוש־הבוג
    םילימ תומכ
    הרושב
    הרוש הבוג
    8
    12
    16
    20 4
    1.6
    1.4
    1.5
    1.3
    1.2
    

    View Slide

21. הרוש ךרואל סחיב הרוש־הבוג
    םילימ תומכ
    הרושב
    הרוש הבוג
    8
    12
    16
    20 4
    1.6
    1.4
    1.5
    1.3
    1.2
    

    View Slide

22. תוא לדוגל סחיב הרוש־הבוג
    1.6
    1.4
    1.5
    1.3
    תוא לדוג 15
    30
    45
    60 0 px
    1.2
    הרוש הבוג
    

    View Slide

23. תוא לדוגל סחיב הרוש־הבוג
    1.6
    1.4
    1.5
    1.3
    תוא לדוג 15
    30
    45
    60 0 px
    1.2
    הרוש הבוג
    

    View Slide

24. בא
    תויתואה ןיב חוור
    (letter-spacing/Tracking)
    

    View Slide

25. תוא לדוג / תויתוא ןיב חוור
    ןיב חוור
    תויתוא
    תוא לדוג
    0
    16
    2-
    1-
    24
    32
    40 8
    1
    px
    

    View Slide

26. תוא לדוג / תויתוא ןיב חוור
    ןיב חוור
    תויתוא
    תוא לדוג
    0
    16
    2-
    1-
    24
    32
    40 8
    1
    px
    

    View Slide

27. (text-align) קולב :רושיי
    

    View Slide

28. (text-align) קולב :רושיי
    

    View Slide

29. הקסיפ עבצ
    

    View Slide

30. הקסיפ עבצ
    

    View Slide

31. המותי הלימ
    

    View Slide

32. ☹
    המותי הלימ
    

    View Slide

33.  
    

    View Slide

34. View Slide

35. matthewlein.com/widowfix
    WidowFix
    

    View Slide

36. matthewlein.com/widowfix
    WidowFix
    

    View Slide

37. View Slide

38. View Slide

39. ☺
    

    View Slide

40. םיטנופ
    

    View Slide

41. םיטנופ םיאצומ הפיא
    תירבעב
    ?
    

    View Slide

42. םיטנופ םיאצומ הפיא
    תירבעב
    ?
    

    View Slide

43. זירדנואפ־פייט
    

    View Slide

44. זירדנואפ־פייט
    םיפרגופיט
    םייאמצע
    

    View Slide

45. זירדנואפ־פייט
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

46. זירדנואפ־פייט
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

47. זירדנואפ־פייט
    ףטנופ
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

48. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

49. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

50. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

51. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    הדליגה
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

52. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

53. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    טנופרטסאמ הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

54. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    טנופרטסאמ
    טיבטנופ
    הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

55. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    טנופרטסאמ
    טיבטנופ
    פייטנופ
    הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

56. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    טנופרטסאמ
    טיבטנופ
    פייטנופ
    הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע
    

    View Slide

57. םיימניח םיטנופ
    

    View Slide

58. םיימניח םיטנופ
    

    View Slide

59. תירבע סנאס ןפוא
    

    View Slide

60. ףלא
    

    View Slide

61. שומיש תונוישיר
    

    View Slide

62. שומיש תונוישיר
    

    View Slide

63. שומיש תונוישיר
    

    View Slide

64. שומיש תונוישיר
    

    View Slide

65. שומיש תונוישיר
    פוטקסד
    OTF / ”טנירפ“ / OpenType
    

    View Slide

66. שומיש תונוישיר
    טנופבוו
    WEB / תשר־ןפוג
    פוטקסד
    OTF / ”טנירפ“ / OpenType
    

    View Slide

67. שומיש תונוישיר
    טנופבוו
    WEB / תשר־ןפוג
    פוטקסד
    OTF / ”טנירפ“ / OpenType
    היצקילפא
    APP / הנכות
    

    View Slide

68. (הרושו) תיתלחתה תוא
    

    View Slide

69. השעת לא – תושגדה
    

    View Slide

70. השעת לא – תושגדה
    

    View Slide

71. השעת לא – תושגדה
    

    View Slide

72. השעת לא – תושגדה
    

    View Slide

73. השעת לא – תושגדה
    

    View Slide

74. תושגדה
    

    View Slide

75. תושגדה
    

    View Slide

76. תושגדה
    

    View Slide

77. תושגדה
    

    View Slide

78. טסקט ןומיס
    

    View Slide

79. View Slide

80. ־ה תא וחכשת לא
    Hover
    ?
    

    View Slide

81. ־ה תא וחכשת לא
    Hover
    ?
    

    View Slide

82. ־ה תא וחכשת לא
    Hover
    ?
    

    View Slide

83. View Slide

84. View Slide

85. םילשמ יזעול טנופ
    

    View Slide

86. םילשמ יזעול טנופ
    

    View Slide

87. PX
    vs
    em
    vs
    REM
    

    View Slide

88. PX
    vs
    em
    vs
    REM
    

    View Slide

89. View Slide

90. View Slide

91. View Slide

92. םולש
    יל םיארוק
    

    View Slide

93. םוספיא םרול ללוחמ
    

    View Slide

94. alefalefalef.co.il/hameholel
    

    View Slide

95. alefalefalef.co.il/hameholel
    

    View Slide

96. View Slide

97. יח וגול
    

    View Slide

98. View Slide

99. 
םע המ לבא
    
Save image as
    ?
    

    View Slide

100. View Slide

101. !סונוב שי ,עגר
     

     View Slide

102. View Slide

103. Schema.org
     

     View Slide

104. Schema.org
     

     View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

111. 
.הדות
     

     דלפנרוק םהרבא
     avrahamcornfeld.com
     alefalefalef.co.il
     

     View Slide