Beautiful Typography
<ol>
<li>Use a font-size between 15 and 25 pixels for body text
</li>
<li>Use (really) big font sizes for headlines
</li>
<li>Use a line spacing between 120 and 150% of the font size
</li>
<li>45 to 90 characters per line
</li>
<li>Use good fonts
</li>
<li>Chose a font which reflects the look and feel you want for your website
</li>
<li>Use only one font
</li>
</ol>
<pre><code>Good Points :-

1. Sans-serif

Open sans
Lato
Raleway
Monsterrat
PT Sans
</code></pre>Using Colors Like a Pro
<ol>
<li>Use only one base color
</li>
<li>Use a tool if you want to use more colors
</li>
<li>Use color to draw attention
</li>
<li>Never use black in your design
</li>
<li>Choose colors wisely
</li>
</ol>
Working with Images
<ol>
<li>Put text directly on the image
</li>
<li>Overlay the image
</li>
<li>Put your text in a box
</li>
<li>Blur the image
</li>
<li>The floor fade
</li>
<li>background-image: linerar-gradient() , url();
</li>
</ol>
Working with icons
<ol>
<li>Use icons to list features/steps
</li>
<li>Use icons for actions and links
</li>
<li>Icons should be recognizable
</li>
<li>Label your icons
</li>
<li>Icons should not take a center stage
</li>
<li>Use icon fonts whenever possible
</li>
</ol>
Spacing and layout
<ol>
<li>Put whitespace between your elements
</li>
<li>Put whitespace between your groups of elements
</li>
<li>Put whitespace between you website's sections
</li>
<li>Define where you want your audience to look first
</li>
<li>Establish a flow that corresponds to your content's message
</li>
<li>Use whitespace to build that flow
</li>
</ol>
BreakPoints:
480px
768px
1024px
1200px
Copied From Jonasschmedtman

Beautiful Typography

1. Use a font-size between 15 and 25 pixels for body text

2. Use (really) big font sizes for headlines

3. Use a line spacing between 120 and 150% of the font size

4. 45 to 90 characters per line

5. Use good fonts

6. Chose a font which reflects the look and feel you want for your website

7. Use only one font




```
Good Points :-

1. Sans-serif

Open sans
Lato
Raleway
Monsterrat
PT Sans


``` 





Using Colors Like a Pro

1. Use only one base color

2. Use a tool if you want to use more colors

3. Use color to draw attention

4. Never use black in your design

5. Choose colors wisely



Working with Images

1. Put text directly on the image

2. Overlay the image

3. Put your text in a box

4. Blur the image

5. The floor fade

6.  background-image: linerar-gradient() , url();



Working with icons

1. Use icons to list features/steps

2. Use icons for actions and links

3. Icons should be recognizable

4. Label your icons

5. Icons should not take a center stage

6. Use icon fonts whenever possible



Spacing and layout

1. Put whitespace between your elements

2. Put whitespace between your groups of elements

3. Put whitespace between you website's sections

4. Define where you want your audience to look first

5. Establish a flow that corresponds to your content's message

6. Use whitespace to build that flow

BreakPoints:
480px
768px
1024px
1200px

Copied From  Jonasschmedtman

Web Design Basics