Five simple steps to better typography - Part 4 : Journal : M...
Popularity Report
 |
|||
|
|||
|
|||
|
|||
|
|||
|
Rank
URL Tag Cloud
- typography
- , design
- , fonts
- , reference
- , css
- , webdesign
- , font
- , type
- , names
- , hierarchy
- , leer
- , scale
- , informationdesign
- , size
- , jacksoncouse
- , web/design
- , *****
- , blog post
Bookmark History
Saved by 18 people (-3 private), first by anonymouse user on 2006-03-20
- Loudpop on 2008-11-18 - Tags typography , design , css , reference
- Nickobec on 2008-09-30 - Tags typography , scale
- Siliconmeadow on 2008-04-29 - Tags webdesign , typography
- Ldminteractive on 2008-04-26 - Tags typography , font , size , names , hierarchy
- Lucite on 2008-04-26 - Tags typography
Public Sticky notes
Highlighted by om19bao
Highlighted by om19bao
These are the pixel sizes for my main headings:
- 11px /16.5px - Body copy and leading.
- 24px - Main heading used as section headings on the Homepage, Portfolio homepage and entries.
- 18px - Headings for journal entries and portfolio subheadings.
- 16px - All navigational and content tertiary headings.
- 13px - All other headed elements.
This would give me the following styles visually
These translate into the following way into CSS, using percentages for scaling purposes.
- 11px /1.5em - Body copy and leading.
- 218% - Main heading used as section headings on the Homepage, Portfolio homepage and entries.
- 164% - Headings for journal entries and portfolio subheadings.
- 145% - All navigational and content tertiary headings.
- 118% - All other headed elements.
Highlighted by om19bao
Highlighted by om19bao
body {
font: 11px/1.5em "Lucida Grande";
}
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;
}
h1 {
font-size: 218%;
}
h2 {
font-size: 164%;
}
h3 {
font-size: 145%;
}
h4 {
font-size: 118%;
}
Highlighted by lucite
Public Comment