Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Alanto Monteiro Jones
10,816 PointsWhen working with typography which is better practise:
When working with typography which is better practise: creating the text first or creating an overall design of the site?
3 Answers
Mattox Shuler
Treehouse Guest TeacherHey Alanto, I think it's both, and it depends on what kind of site you have. The typography can inform the overall design and the design can inform the typography. If you're creating a heavily typographic site then type might play the leading role, whereas if the site is more illustrative or photo-heavy then type might play a supporting role in informing the design.
Kevin Lozandier
Courses Plus Student 53,747 PointsIt'd say both are best understood through a content-first or "content-out" approach.
A common approach in content-first design is to do things first through Haml with a Markdown Filter, Markdown, or something similar first with core visual figures/photos marked up like the following:
# Main Heading
<img src="http://fc04.deviantart.net/fs70/f/2011/068/1/9/1942fe56a8bb06a1337838ce621ae685-d3b9wi6.jpg" />
Caramels powder croissant ice cream candy canes danish halvah sugar plum dragée. Pastry biscuit pie halvah unerdwear.com fruitcake powder. Dessert fruitcake jelly beans chupa chups cake. Topping fruitcake chocolate cake jujubes cookie apple pie sesame snaps muffin. Candy canes liquorice tootsie roll chocolate bar. Marzipan danish chocolate donut fruitcake apple pie gummi bears gummi bears. Chocolate bar jelly tart icing soufflé toffee topping gingerbread. Liquorice marshmallow danish ice cream gummi bears cookie gingerbread. Unerdwear.com jelly jelly beans pastry soufflé oat cake brownie jelly beans. Danish pastry unerdwear.com oat cake liquorice. Pie chocolate cake gummi bears. Pudding bonbon lollipop chocolate bar toffee cake. Ice cream gummi bears wafer gummi bears. Carrot cake cheesecake marzipan macaroon danish dessert cookie oat cake jelly-o.
Jujubes fruitcake dragée croissant. Chocolate cake chocolate gingerbread. Wafer powder pudding cookie. Sweet roll ice cream gummies jelly-o apple pie tootsie roll. Macaroon gingerbread sweet applicake cake. Chocolate bar croissant chocolate. Tart croissant marzipan applicake topping apple pie jelly beans apple pie. Icing unerdwear.com jelly beans halvah ice cream topping pastry ice cream marshmallow. Pudding marshmallow jujubes bonbon bonbon jelly applicake cookie. Toffee lemon drops apple pie cake donut pie jelly topping. Pudding sugar plum soufflé cake pudding dessert. Sweet roll brownie halvah jelly-o icing wafer cookie caramels jelly-o.
## Secondary Heading
Tart croissant cotton candy icing cotton candy gummi bears cotton candy. Cheesecake dessert gummi bears dragée sesame snaps cotton candy gingerbread tiramisu. Gummi bears halvah fruitcake jelly-o. Jelly ice cream caramels sweet roll candy pastry candy canes. Dessert oat cake candy canes biscuit cotton candy chupa chups candy canes. Candy canes cookie jelly pie biscuit. Croissant tiramisu ice cream soufflé macaroon lemon drops caramels candy canes. Chocolate icing soufflé carrot cake pastry jelly beans bonbon. Gingerbread toffee brownie. Pie chocolate icing applicake gingerbread. Apple pie pudding candy canes gummies jujubes. Cotton candy danish sweet chocolate bar lollipop cupcake. Tart apple pie cookie dessert tart muffin dessert.
After this step, It's then common to generate the html version of such content with the correct hieararchy of sectioning HTML5 elements (header, main, aside, section, article, & etc) and other semantic elements (b, strong, ruby, & etc) applied.
This today also includes the correct WAI-ARIA annotations.
Then you establish the base styling of the website based on such markup.
With such things accomplished, it is then approrpiate to most proponents of such an appraoch to think about overall layout after various rounds of sketching/ideating what you now see from the content you're representing on the web.
Such an appraoch ensures your typography can adapt optimally for a variety of contexts, accomodate the content effectively, and be more progressively enhanced more easily than other approaches.
This also allows you to be as aware of your contraints based on the content as much as possible before investing a considerable amount of time on things less concerned with the content such as background-images, grids, and so on.
This incrementally allow you to make more informed decisions on the overall design of the site, including content-out layout (grids based on the ratios and dimensiosn of the content).
Aurelian Spodarec
7,369 PointsI think to create the overall site first maybe because you then can adjust the typography depending how it would look but it may be vice versa .
Or you can create one page and see how this will look and change it.
Hope this could help .