A Few Design Questions

Hello, I’m new here. I’m restarting my web-design studies (I learned basic HTML/CSS two years ago but have been completely out of practice, starting again soon).

I had 3 questions that have been on my mind since re-beginning:

  1. Google Web Fonts:

Is it preferable to do the @font-face: url (google web fonts url for that font), or is it preferable to download the font, upload it into your website, and do the @font-face pointing to there?

In other words, is it best to host it on your own site or to let Google host it? What are the pros and cons of each?

  1. Divs, widths, padding and borders:

I just want a diagram that shows me these basic things:
Does the ‘width’ parameter include padding, or does it just control the text-area, with padding being added on the outside of the ‘width’ area? What about margins?
Are borders aligned to the inside or outside of a div? In other words, if I have a div of 100px with 0px padding, 0px margin, and a 2px width, will the width of the column including the border be 100px or 104px?

  1. The Grid System

I just watched a really low quality, mostly-useless video on this topic. Do you guys know of any tutorials/articles that you think explains how to use the grid well?

I’ll start. Never used google fonts. Many would likely say the same as they say with letting google host jquery - let google host it because many would already have it cached from another site that used it. However, I prefer more control. So I host my own stuff when I can.

I could try and explain all the padding and margin questions to you but it would pale in comparison to seeing for yourself. Simply setup two divs - give them each a height and width of 200px and a padding and margin of 10px. Color them both different colors. Download firebug. Now load it up and adjust all the values and see what happens. That is the best way.

Never tried a grid system. I’d say don’t. You’d probably spend more time trying to figure out how and why they did something than actually coding. Better to do it yourself.

Genereally , I am going to echoing Eric in this post, but maybe this will be a little more clear.

Google fonts chief advantages are selection, copy paste styles, and most of all popularity (aka caching). The latter is important to note because if you chose a font that is not so highly used , you are less likely to reap any caching advantages anyway. While goggles font selection is impressive and essentially free of copyright problems, it any one typeface could be dropped at any moment (google has great up time, but ultimately if a font author wants heir typeface off google, google has to comply)

  1. SPEAKING OF GOOGLE :wink: Search for “css box model” and you will get truly in depth answer. But the GIST of it is. for any BLOCK element EXCEPT TABLES… a padding AND border are ADDED to width. UNLESS width is auto.

Are borders aligned to the inside or outside of a div?
ugh relativity, my man (it’s a matter of perception) . But I suppose it if we followed the box model it would SEEM like they are added to the outside, since it adds to the declared dimensions. However, one should note that BG color/images show under transparent borders.

Now tall all of what I said an scrap it. With CSS3 you can determine box sizing ( whether or not padding is part of the size or added to it) and background attachment. Of course , all bets are off if your visitor doesnt have a browser that supports css3.

Grid systems:
As an AD I will tell you good idea / bad /bloated execution. Really.

Good idea, because all it’s doing is lining things up visually. This is a BASIC principle behind any graph design.

Bad execution, because because in order to do this MOST grid systems out there add to the mark up, make non semantic classes to “push/pull/etc” into a layout framework. WHICH you have to learn to use anyway… so why not just learn CSS and apply a modicum of math? Same deal, no bloat.

Hi flannel jesus. Welcome to the forums. :slight_smile: (And a prize for the most interesting username!)

Is it preferable to do the @font-face: url (google web fonts url for that font), or is it preferable to download the font, upload it into your website, and do the @font-face pointing to there?

I find that Google fonts are flaky and don’t work, but maybe that’s me. I prefer to use the fonts from FontSquirrel, which follow the second option you listed.

I just want a diagram that shows me these basic things:

Try the diagram on this page:

Does the ‘width’ parameter include padding

No. If your div is 100px wide and you have 10px padding each side, the total width is 120px. Same for margin and border.

Are borders aligned to the inside or outside of a div? … will the width of the column including the border be 100px or 104px

Outside. 104px.

Do you guys know of any tutorials/articles that you think explains how to use the grid well?

It’s just my humble opinion, but forget about 'em …

Thanks for your advice guys.
@ralph_m ;
That page you linked for box model had exactly the diagram I was looking for. Thank you. I suspected it was like that, from my vague memory of previous web experiments.

Again, thanks for the advice.

Cool. There are many versions of it, but that’s the page my mind first went to. Very old browsers got the box model wrong, but that’s a long dead issue now, thankfully. :slight_smile: