Results 1 to 5 of 5

Thread: Fonts and typography

  1. #1
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19

    Fonts and typography

    I'm finally getting around to creating a website for a domain name I've owned for a long time. This will be a personal site with family history, old (like 19th century old) photographs, Civil War letters, family stories, and more.

    This is the first site I've developed from scratch in a dozen years. It will definitely be 100% HTML5/CSS3. However, I have a couple of questions about font and typography. Back in the dark ages you had to choose fonts based on what a majority of people might have had installed on their computer. With "webfonts" that's no longer the case. Is there a couple of fonts you use that you really like? I'm looking for one font for major headers (possibly a "vintage-style"?) and another, easy-to-read font for the body content. Perhaps with another for a site "logo" since I have this idea about using the domain name as the logo. Going to Google's webfonts display confused me more than helped me .

    Informationally, I'm considering gray and dark-gray-going-on-black background colors with an off-white or "linen" font color. My thinking is that the photos will display better against the background colors and the font color won't be so bright against them as to be annoying. I'm open to suggestions there as well...

    I'm seriously artistically and design challenged, so any help will be greatly appreciated!

    Thanks,
    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  2. #2
    Rick
    Join Date
    May 2002
    Location
    Minneapolis, MN
    Posts
    1,752
    Rep Power
    18
    Google's font site takes some getting used to, but it's still where I'd send you. They have a pretty good selection, the fonts generally come in the right formats for all browsers, and there are no licensing issues so they're guilt-free. And you can even @import them directly from Google so you can improve your site loading speed in many circumstances.
    Rick Trethewey

  3. #3
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Thanks Rick. I'm not real sure about these yet, but I chose "Amaranth" for headings <h1>-<h3> and "Raleway" for the body text. They were a "recommended pairing". Still working on color.

    Is there a difference in load time using @import vs. <link rel="stylesheet" href="blah">?

    I'd also forgotten about all the little details that go into developing from scratch. favicon, logo, apple-touch-icon, robots.txt, .htaccess, boilerplate pages like copyright, about, contact, and much much more. Wow, I've spent a lot of time with these things, don't yet have a couple of them done, and haven't really got anything in the way of content yet!

    Full disclosure here. This site is not hosted at PowWeb. I won't be posting links to it and this will probably be the only thread I ever start about it. If you want the address PM me.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  4. #4
    Rick
    Join Date
    May 2002
    Location
    Minneapolis, MN
    Posts
    1,752
    Rep Power
    18
    The mark-up method generally doesn't matter much in how you load a font in terms of page load speed. It all comes down to an HTTP request and the server response. However, there can be a loading speed advantage in hosting the font on a separate "domain" (there's a specific term for this that escapes me) because most browsers have a limit of 4 simultaneous HTTP connections to a given "domain". The good news is that a subdomain, for example, would work as a second, alternate "domain". So, if you set up a subdomain to hold your common page elements like images, stylesheets, and/or scripts, you can improve page load times - often significantly - especially if you throw cache controls on top.

    I happened to be playing around in Google Analytics this week and noticed that one of my sites was getting a mediocre loading speed score. The analysis report linked to a nifty speed testing tool from Google at https://developers.google.com/speed/pagespeed/insights/ that lets you test any page and gives you some advice on how to improve the loading speed. You might give it a try. Good luck!
    Rick Trethewey

  5. #5
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Interesting stuff! The only thing they really don't tell you is what a "good" score is. I got a 73/100 for mobile and 87/100 for desktop. Is that a D and a B?
    [Edit]Found this: "A higher score is better and a score of 85 or above indicates that the page is performing well."[/Edit]

    A couple of the suggestions given are easy to implement. A couple more maybe not so much. I've never messed with mod_deflate, not even sure I can use it. I know I need to make my design more "responsive" for mobile, but that's a task for another day.

    If my little almost text-only (1 small graphic) page that calls 2 external fonts, one CSS file and 2 JQuery files (1 external) only gets an 87, I'd hate to see what most for-profit pages get. Think about how heavily laden they are with ads, flash, graphics, sliders, scripts to render all of those, etc.

    Experimenting continues. Thanks again for another great resource!
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •