When you are going through the process of web design, it is important to know why you are going to have to put so much time into it. For starters, it is all about the user experience. Every aspect of web design can hold a major impact on the website’s usability. One web design aspect of typography. It is often overlooked. However, it is such a vital part of the design that too many design teams don’t pay attention to. There are several uses for typography that you should consider, such as; Large headlines, bold text blocks, to smaller text in the copy. In this article, you will learn about this key part of designing a website, and hopefully, you will see the combination of science and art in it.
Basics of Typography
Put in simple terms, typography is when type gets used in designs. It uses font, color, alignment, size, layout, and other factors to create more meaning behind the design. All of the listed factors affect the type of design on the page.
The two main font classifications that you can pick from are Sans Serif and Serif fonts.
Sans Serif fonts don’t have any extra detail at the end of the letter, whereas Serif embellishes the letters. The embellishments are known as tails or feet.
Typography on the Internet: Things You Should Consider
Type in print and type on the web have their differences, and you need to recognize them. With type on the web, you have to put thought into size, readability, contrast, and color.
On a monitor, the colors are created by light. That is why it is so important to think about the contrast of copy on a page. You don’t want the viewers to straining their eyes to read some text that is accompanied by poor contrast. The easiest color scheme to read is black text with a white background. It provides a lot of contrast. Web typography is dependent (to an extent) on color choice.
In body copy online, Sans Serif has been recognized as the easiest to read. Serif has a tendency to make it more difficult to follow with the eye, even though in the printed text the opposite is true,
However, with increased size and more leading, the additional vertical space that sits between the lines of the type still works just fine with Sans Serif fonts in the text body on websites. Headlines have received good responses when they are done in Serif. The headlines and headings cooperate with the font because of the special accent it gives. Also, Serif fonts are easier to read when the quantity of text is smaller.
The factor of size should be considered too when you are trying to pick a font style. If the text is too small, it is harder to read. Text that is bigger than it should be will take up needed space. It is important to find a balance between the two, picking a size that syncs to design well while remaining easy to read.
Font Control
For font control, you have many settings that dictate the way the font appears on a website. As we mentioned before, the size of the font is important. They follow three different measurement units, em, %, and px (Pixels).
In CSS, it is simple to declare font size. Below is an example of elements being assigned to a 2em unit.
p {
font-size: 2em;
}
The measurement for typography is em. It is common in web design because of how it will scale with finer increments of different sizes.
Pixels give you less control and are measured to be relative to screen resolutions. It will only use a whole number to determine the size, whereas em can use more specific numbers.
When it comes to percentages (%), this is a favorite option by many users. It offers control over the size of the fonts. It is basically determined by the browser’s settings for font size.
As for the look of your text, kerning and leading are easily controlled with CSS. You can control kerning through the property “letter spacing,” and it is essentially the space between the different characters. Leading is controlled by using the property “line-height.”
There are other possible measurements that aren’t as popular, Such as:
• x space (ex)
• Inches (in)
• Points (pt)
• Millimeters (mm)
• Pica (pc)
• Centimeters (cm)
The measurement pt is excellent for print style sheets. They are considered a print measurement. For web pages, pt isn’t a suggested unit, as there are huge differences between browsers. For example, Mac OS shows text about 25% smaller than other PC computers.
Fonts Safe For Web Pages
Now it is time to address a question we are sure running through your head, “What is web-safe font?” You need to know what the standard font is for websites. There are a select few fonts that make up a single group that can be found on most computers. Font choices are limited under CSS2 specifications for the web because of this.
If you want more control over how your text is presented, then make sure you are choosing a web-safe font. Your control over its presentation will extend across all browsers and the different operating systems. These are the most popular fonts for web pages:
• Arial (Helvetica on Mac OS)
• Georgia
• Lucida Console (Monaco on Mac OS)
• Verdana
• Courier
• Times New Roman (Times on Mac OS)
• Impact
• Palatino
• Comic Sans
• Lucida Sans (Lucida Grande on Mac OS)
• Tahoma
• Trebuchet MS
As we will explain, when you use any of the above fonts, you need to have a few options that you can lean on in your CSS.
Setting Fonts
When it comes to the display of fonts on your web pages, you have multiple ways that you use. If the font you are using is web-safe, you are able to declare it in CSS, like this:
font–family: times, Times New Roman, times–roman, georgia, serif;
If someone doesn’t have the first font you choose, you need to have several backups to adjust accordingly. The list of fonts you have is called the font stack.
CSS3 Web Safe Fonts
The specs of the current CSS3 allow you to pick from any TrueType or OpenType font that is licensed. You may do this through @font-face, can see in the example below:
Tools for Font Replacement
If you are still hesitant in using @font-face for the designs you are working on, you have several replacement methods that you can choose to use. Below we will cover a few of them.
sIFR
This is a method that is flash-based. You do need flash to create your site’s font file. The best use of it is on headlines or smaller blocks of text. The reason is the load time; it can drag a bit if you extensively use it on a page. However, there is a downside. It won’t work without having flash enabled on the browser, but the text is selectable.
Properties of fonts are best to be controlled globally. Lack of consistency in typographic content is a big mistake that most new designers make when working on a website. So, it’s only good practice if you set the font size, line height, family, weight, and color for the body element through CSS, like the example below:
body {font: 2em/2.3em times, Times New Roman, times–roman, georgia, serif; color: #fff;}
The heading styles should be set globally also (H3, H2, and H1). Something else that should be set globally is the link styles.
Similar fonts being chosen isn’t ideal. You need to avoid doing this by looking carefully at the font styles, as well as the design of the site. Make sure what you are choosing is appropriate. If you use a Serif heading, then it will be a good pair for body text in Sans Serif fonts. Another viable but tricky option is pairing two different Sans Serif fonts together.
Cufon
One of the favored font replacement tools is Cufon. It is used because of the relatively painless integration into the web page. On their website, you will find plenty of documentation. Also, they have a text generator that will provide code that you will need. Though it is a solid solution, it still has its drawbacks. Currently, users aren’t able to select the text that is rendered by Cufon.
Typography In Websites: Some Great Examples
Below you will find a list of websites that successfully use amazing typography on their pages.
Kari Jobe
Kari Jobe uses Courier, which is a serif font. It is paired with some Sans Serif fonts in a well-designed manner. These fonts work well together, offering a modern and bright feel to an old-world style.
Analog
The typography and theme of the website here are well matched. It is the perfect example of showing the role that type plays in the site’s look. It uses font, size, color, spacing, and layout to give it an enhanced look.
Information Highwayman
This site uses typographic background elements as the perfect backdrop, and it doesn’t draw attention from the body text. The style is complemented by a good-sized text body that is easy to read (Serif Font).
We Are VI
You will find several fonts working on this blog. The designer used typography to enhance the site while keeping it easy to navigate and stay organized.
SimpleBits
This user-friendly site is designed with lots of types. It is organized neatly with set styles. The red serif headlines work well with the sans serif body text, accented by uppercase type in the navigation.
