After being on, what I guess we'd refer to, a hiatus due to err... personal, emotional... entanglement (?) I've been out of the HTML game for some time. Like 4 weeks tops. But that's a lot of time to forget things. I feel super behind right now, but I also finally feel ready to get straight back on that horse.
Before it all kicked off, I'd started a project to recreate the registration page on Bravura London's online store. I like this site, it's clean, accessible and it has a kicking colour palette. I also wanted to attempt a project that included forms, after publishing Project 02: Forms & Buttons, putting practise into more practise.
 |
| Top: Original, Bottom: Recreate |
As usual, there are ever-so-slight differences between the original and my rendition. Mostly to do with positioning. That is something I just can't seem to put to bed. As for styling, in terms of adding custom fonts, matching the tables and buttons, creating spritesheets I'd say that all went rather well indeed.
Adding A Custom Font
As I'm sure we're all aware, there are a select number of font families that are deemed web safe (Read more on W3Schools CSS Web Safe Fonts). These are fonts that can typically be read by any browser, on any computer as they should be installed by default. We're talking your serif, your sans serif, your monospace here.
Within these generic families are a selection of generic typefaces for when you need to specify a particular style. The typefaces within each family generally won't have much variation, once again, they're a selection of big hitters that should be available to most browsers and computers. For example, Times and Georgia would fall within the serif family. But what if you call Georgia and the user doesn't have it installed? Well, you can use a fallback that the browser can refer to if the desired typeface isn't available.
In CSS you would call:
{
font-family: "Times New Roman", Times, serif;
}
Calling font-family, you guessed it, refers to you wanting to change the typeface that is displayed. In this case we're going with Times New Roman. If you want to call a specific typeface, you will always need to do so within quotation marks ("), this is generally to avoid errors with spaces and punctuation. Times is a generic typeface, there are no quotes here because it is a single word and should come pre-installed. If the user does not have Times New Roman available to them, the browser will render Times instead. Finally, if you don't have Times, well, you fallback on serif. All these fonts are serif fonts and therefore, there should not be much visual discrepancy between what you see and what the user sees if they don't have all fonts available.
The rendering order is from left-to-right. If the user does not have the font that is being called, the browser will try the next one in the list.
We all know the classics; Times New Roman, Arial, etc. but there are thousands upon thousands of custom fonts out there, below the radar, waiting to be rendered. The two custom fonts used within the Bravura site are Lato and Dosis. Never heard or them? Nor I. Your browser won't have heard of them either, so you'll have to tell it where to find them. This is done within the <head> section of your HTML sheet.
Thankfully, both these fonts can be found within Google Fonts. This is an archive of elegantly designed open source typography. Google Fonts will also provide you with the characters and the weights for you to easily copy-paste into your code.
In HTML, my <head> code now looks a little like this:
Just like loading in a CSS stylesheet, we are loading in the data for our typefaces, including the font weights we need to use. As Google Fonts set everything up nicely for us, we just have to refer to the correct location in the href and the call the typeface within our CSS document.
This is a very friendly and free way of using custom fonts to improve the design of your site. Be weary that users still may not be able to download these custom fonts, so have comfortable fallback fonts that still render to the desired effect.
As per usual, the accompanying code. I got all fancy this time and called my stylesheet as a separate file, so if you wish to view it correctly, please check the file names.
HTML
CSS
