Lydia: Vertikalt grid med typografi

  • Författare
  • Meddelande
Användarvisningsbild

mos

dbwebb

  • Inlägg: 11180
  • Blev medlem: 10 nov 2011, 09:52
  • Ort: Ronneby / Bankeryd

Lydia: Vertikalt grid med typografi

Inlägg20 apr 2012, 11:11

Detta är en del i tutorialen Lydia: ett PHP-baserat, MVC-inspirerat CMF. Senast uppdaterad 2012-04-23.

Resetta stylesheeten så att all stylning tas bort. Bygg upp din typografi från grunden och låt den matcha det vertikala gridet.


Typografi och vertikalt grid

"The Smashing Magazine" har en bra artikel om teknisk typografi med vertikalt grid, "Technical Web Typography: Guidelines and Techniques". Den artikeln ger en grund till det som hanteras i denna tutorial där vi vill försöka matcha det vertikala gridet så mycket det går. I typografin handlar det då om att välja fontstorlekar och radavstånd så att det hela tiden matchar det vertikala gridet.


Nollställ CSS:en

Det första vi vill göra är att nollställa all formattering som standarden och webbläsaren tillfört. Vi vill utgå från noll formattering. För att göra de så utgår jag CSS-koden som Erik A. Meyer skrivit:
http://meyerweb.com/eric/tools/css/reset/

Efter lite modifieringar blir resultatet som följer.

Kod: Markera allt
/** --------------------------------------------------------------
* Reset. http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
*
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,
time,mark,audio,video{margin:0;padding:0;border:0;font-size:100.01%;font:inherit;vertical-align:baseline;}
body{line-height:1;}
ol,ul{list-style: none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}


Jag tar också och lägger till standard formattering för HTML5-elementen.

Kod: Markera allt
/** --------------------------------------------------------------
* HTML5 elements.
*
*/
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
[hidden]{display:none;}


Nu kan vi kalla stylesheeten för nollställd och så gott som all browser-stylning är borta. Nu kan vi börja bygga upp stylen igen, men nu kontrollerar vi dess alla delar. Men, först behöver vi en testsida.


En testsida med Lorem-text

Jag använder mig av webbplatsen http://html-ipsum.com/ och kopierar ihop en testsida som har alla rubriker och lite paragrafer med. Det blir en bra testsida att utgå ifrån för att börja bygga upp typografin.

CCTheme/h1h6.tpl.php (Min testsida)
Kod: Markera allt
<h1>HTML Ipsum Presents</h1>
         
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</blockquote>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<h3>Header Level 3</h3>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<pre>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</pre>

<h4>Header Level 4</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<table>
  <caption>Table 1. Example table</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<h5>Header Level 5</h5>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<ul>
   <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
   <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
   <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<h6>Header Level 6</h6>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<dl>
   <dt>Definition list</dt>
   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
   <dt>Lorem ipsum dolor sit amet</dt>
   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>


Jag lägger till en ny metod i min tema kontroller för att visa upp resultatet av testsidan. Så här ser det ut innan jag har börjat lägga till stylning av typografin.

Bild

Då sätter vi igång.


Välj storlekar och radhöjd som matchar @magic-number

Storlekar på rubriker och paragrafer och utrymmen mellan raderna skall alltså matcha den magiska nummret, @magic-number. Om de matchar så kommer också mitt vertikala grid att fungera. Mitt vertikala grid är ju kopplat till det magiska numret. Låt se hur man kan styla rubriker och paragrafer för att matcha det magiska numret.

Basfonten i alla webbläsare är 16px. För att definera den och undvika buggar i webbläsarna så brukar man sätta fontstorleken till 100.01%. Följande förklaring är hämtad från: http://www.communitymx.com/content/arti ... print=true

This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.


Detta betyder att fontstorleken normalt är 16px och jag måste då välja en radhöjd av 1.375em för att nå det magiska talet om 22px (16*1.375=22).

Jag väljer två olika font-familjer, en för rubriker och en för vanlig text. Hur man väljer typsnitt är en konst i sig. Jag nöjer mig med att konstatera att serif på rubriker och sans-serif på text ger en trivsam effekt. Jag väljer ytterligare en font-stack för monospace-fonter. Läs mer om font-stacker i en Sitepoint artikel.

Kod: Markera allt
@font-family-cambria    = Cambria, Georgia, Times, 'Times New Roman', serif;
@font-family-helvetica  = Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-monospace  = "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;


Jag börjar med att sätta standardfonten i body-elementet.

Kod: Markera allt
body{color:#222;font:100.01%/1.375 @font-family-helvetica;}


Jag går vidare och definerar rubrikerna.

Kod: Markera allt
.headings-general() {font-weight:normal;color:#111;margin-bottom:@magic-number;font-family:@font-family-cambria}
h1{.headings-general;font-size:2.375em;line-height:1.1579;border-bottom:1px solid #ccc;margin-bottom:@magic-number - 1px;}
h2{.headings-general;font-size:1.875em;line-height:1.4667;}
h3{.headings-general;font-size:1.375em;line-height:1;}
h4{.headings-general;font-size:1.25em;line-height:1.1;}
h5{.headings-general;font-size:1em;font-weight:bold;}
h6{.headings-general;font-size:1em;font-weight:bold;margin-bottom:0;}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0;}


Varför anger jag inte en enhet på radhöjden? Anledningen har med att göra hur radhöjden ärvs, du kan läsa mer om det i denna artikel om line-height av Eric A. Meyer. Resultatet av min stylesheet blir att h1 blir 38px och dess radhöjd blir 44px som är två gånger det magiska numret. Bra. Själva formlen som jag använder för att räkna ut det hela är som följer.

1. Jag vill att fonten skall ha en storlek om 38px, basfontens storlek är 16px och jag vill ange font-storleken i em. Med andra ord 38/16=2.375. Anger jag font-size:2.375em så blir resultatet 38px.

2. Radhöjden skall vara en multipel av det magiska talet och 44 är närmast 38. 44/38=1.1579 blir alltså radhöjden. Radhöjden är relativ sin fontstorlek som nu angivits till 38px (fast i em).

På samma sätt räknar jag ut resterande rubriker och när jag är klar så kommer jag att jobba med följande storlekar och radhöjder för rubriker.

    <h1> 38px radhöjd 44px /* 2.375em * 16px = 38 => line-height: 44/38 = 1.1579*/
    <h2> 30px radhöjd 44px /* 1.875em * 16px = 30 => line-height: 44/30 = 1.4667*/
    <h3> 22px radhöjd 22px /* 1.375em * 16px = 22 => line-height: 22 = 1*/
    <h4> 20px radhöjd 22px /* 1.25em * 16px = 20 => line-height: 22/20 = 1.1*/
    <h5> 16px radhöjd 22px
    <h6> 16px radhöjd 22px

När jag är klar med rubrikerna så går jag vidare med texten.

Kod: Markera allt
@link-color: #600;
/* Text elements */
p{margin-bottom:1.375em;}
a{color:@link-color;text-decoration:underline;
  &:focus,&:hover{color:lighten(@link-color, 10%);text-decoration:none;}
}
blockquote{margin-left:1em;margin-bottom:1.375em;}
strong,dfn{font-weight:bold;}
em,dfn{font-style:italic;}
pre{margin-bottom:1.375em;white-space:pre;}
pre,code,tt,.code{font:1em/1.375 @font-family-monospace;}


Hela tiden vill jag se till att radhöjden och eventuella paddings och marginaler skall matcha en multipel av det magiska numret. Jag försöker använda måttet em hela tiden eftersom det är relativt elementets fontstorlek och därmed skalar bättre än pixel-måttet.

Samma sak gäller för olika typer av listor.

Kod: Markera allt
/* Lists */
li ul,li ol{margin:0;}
ul,ol{margin:0.6875em 1.5em 1.375em 0;padding-left:1.5em;}
ul{list-style-type:disc;}
ol{list-style-type:decimal;}
dl{margin:0 0 1.375em 0;}
dl dt{font-weight:bold;}
dd{margin-left:1.5em;}


Även tabeller behöver stylas för att matcha det vertikala gridet. Här får jag dock frångå det magiska numret och välja 1.5 gånger @magic-number på grund av behovet av padding för varje rad.

Kod: Markera allt
/* Tables. Because of the need for padding on TH and TD, the vertical rhythm
  on table cells has to be 33px, instead of the standard 22px or 44px
  of other elements. */
table{margin-bottom:1.375em;width:100%;}
caption{text-align:left;font-style:italic;}
thead{border-bottom:2px solid #222;}
th{vertical-align:bottom;font-weight:bold;text-align:left;}
th,td{padding:5px 10px 5px 5px;}
tbody tr:nth-child(even) td, tbody tr.even td {}
tbody tr{border-bottom:1px solid #eee;
  &:hover{color:#000;}
}
tfoot{font-style:italic;}


Resultatet blir en sida med typografi som matchar det vertikala gridet (om vi gjort rätt). Så här kan det se ut.

Bild


Sammanfattningsvis

Det var en snabb genomgång grunderna med stylning och typografi mot ett vertikalt grid. Lydias grid-tema växer fram, sakta men säkert.

Du kan testa min kod och se källkoden som vanligt via följande länkar. Du loggar in med root:root eller doe:doe.

http://dbwebb.se/lydia/tags/v0.2.19/
http://dbwebb.se/lydia/tags/v0.2.19/theme
https://github.com/mosbth/lydia/tree/v0.2.19

Fortsätt med nästa tutorial.
...
..:
.... /mos

Vilka är online

Användare som besöker denna kategori: Inga registrerade användare och 31 gäster