WK8/9: Web Typography + Units + Vector Graphics (SVG)

Week 9 Tutorial

In the Week 9 tutorials:

We’ll recap the online-only content from Week 8.
There’ll be one-to-one consultations with tutors to start guiding the design and development of your second assessment.

Week 8 Tutorial

We hope you’ve had a terrific mid-semester break. Moving forward into the remainder of the semester there has been some slight adjustments to the tutorial schedule. This week’s material (Week 8 / Tutorial 7) is online only. In Week 9 / Tutorial 8 your tutor will wish to speak to you individually to consult with you regarding your web interface mockup that should present your UI Concept from Assignment One. You need to take advantage of this time by ensuring you have a mockup and have planned your interactions so your tutor can appropriately guide and recommend you on the techniques involved in realising your project and what is reasonable in terms of technical production.

The subsequent tutorial in Week 10 / Tute 9 will cover two scroll-based Javascript plugins, skrollr.js and fullpage.js. By this time your tutor will have told you in the previous week whether either of these plugins may be a focus for you so be sure to pay attention!

The final two weeks of tutorials will be primarily individual consultation, however, if there is strong demand for certain techniques/plugins in a large number of students plans, then further tutorial material may also be covered across all classes for any such techniques. Be sure to try and make progress each week to realise your project so that if you face any challenges each week you can address these in your consultations in each of these weeks.

Remaining Unit Tutorial Outline*

Mid-Semester Break
Week 8 / Tute 7	Web Typography + Units + Vector Graphics (Online Only)
Week 9 / Tute 8	Individual Consultations
Week 10 / Tute 9	Scroll-based Javascript Libraries (skrollr.js + fullpage.js)
Week 11 / Tute 10	Individual Consultations
Week 12 / Tute 11	Individual Consultations (Week of A2 Submissions)

* Subject to Change

Interfacing for Consumption on the Web

Web design is about interfacing for information consumption. To do this successfully it’s important that the information we present to our users is in fact consumable. As with all design, typography plays a major part in how effective your web design is. Infamously, it has even been said that perhaps 95% of web design is typography.

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

— Oliver Reichenstein (Information Architects)

Choosing and Treating a Typeface

Typeface Choice

Choosing an appropriate typeface is naturally the first step in good typographic usage on the web. There are plenty of factors that come to play when choosing a typeface. These typographic concepts play a part in the effectiveness of your chosen typeface. Hopefully, you recognise some of these general typographic concepts and principles from your typographic design unit.

Your typeface choice should communicate the mood or emotion of the word/concept it represents
Choose serifs when they can help the flow of the eye as it reads, but avoid when the typeface is too small or on screens with low resolutions where serifs prevent legibility
Understand ‘typeface classifications‘ – and understand what values and ideas are associated with the classification your typeface falls within
Consider whether the typeface you’ve chosen is appropriately legible for the amount of text it’s used for (ie. don’t use Papyrus for paragraphs as it inhibits readability. Perhaps don’t use it ever.)
Avoid all-caps typefaces for extended reading – lowercase letters promote readability and letter identification
Use only one to a few different typefaces and only add new typefaces where you can justify their use

Implementing your Typeface

Web Safe Fonts

Browsers by default can only display fonts that are on the user’s computer. This used to mean web designers could only use fonts that were known to be ‘web safe’ – that are already installed on the majority of computer around the world. Such fonts include Arial, Times New Roman, Courier, Georgia, and Verdana.

@font-face

CSS3 brings typography to life on the web! With @font-face you can link to your own font files that the browser will download and apply to your site. You can’t just use any font file, however. .woff is currently the standard and most browser compatible, however, there are other formats that provide extended compatibility with older browsers. Check out more of the @font-face spec at w3schools.

@font-face {
    font-family: myFirstFont;
    src: url(relative-location-of-font-file.woff);
    font-weight: 400;
}

div {
    font-family: myFirstFont;
}

Licensed to use a font on the web but don’t have appropriate web font files? You can use a web font generator such as Font Squirrel’s but be sure not to generate web fonts that you are not licensed to use on the web as this is illegal!

Font Squirrel’s Web Font Generator

In addition to loading in your own font files, you can load in font files from other font services on the web.

Google Fonts

Google Fonts is one such source of external web fonts that you can easily integrate into your website for free by linking to their external CSS. Their CSS will add the web font using the same web font technique as above. Once this is done you can use your fresh new typeface! You can customise what font weights and styles you want to include. Be warned, however, the more styles and weights, the longer the load time!

You will need to link to their CSS in the head of your HTML…

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using Google Fonts</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    </head>

… or alternatively, import their stylesheet from within your CSS using @import like so…

@import url('https://fonts.googleapis.com/css?family=Roboto');

… then you can use their font family, weights and styles as you desire!

font-family: 'Roboto', sans-serif;

Adobe Typekit

Adobe’s Typekit is a valuable tool for members of their Creative Cloud. It allows designers to sync high-quality and premium fonts to their PC for use with Adobe’s software. Typekit also provides a suite of fonts available for use in ‘web kits’. This means you can legally use some fairly high-end and expensive typefaces essentially for free! Of course, this causes your web project to have a dependency on your Adobe subscription and cancellation of your subscription will likely prevent your Typekit fonts from being served to the sites you registered them for.

Embedding their font is easy, and somewhat similar to Google Fonts. Add their injection Javascript snippet to the head of your web page. Don’t copy-paste this snippet, though. Each web kit has a unique ID so yours will be different. Follow the steps in the video above!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using Typekit</title>
        <script src="https://use.typekit.net/[YOUR TYPEKIT WEB KIT ID].js"></script>
        <script>try{Typekit.load({ async: true });}catch(e){}</script>
    </head>

… and fire away with your new typeface in your CSS!

font-family: "reklame-script";

Wow what a lovely font!

Typeface Treatment

It isn’t as simple as choosing a typeface, however. That’s just the first step. Anyone can choose a good typeface, but they can equally treat it just as poorly. Here are some properties of web typography that play a huge part in the end UX for your interface.

Size

Treating your typeface with an appropriate size is quite obviously one of the foremost important typographic choices a designer has to make – that which cannot be seen, cannot be read. Be careful when sizing your typeface, as size is a matter of physicality and perspective. Achieving an ideal font size is dependent on screen resolution, contrast, and distance from the reader’s eye to the medium.

A font size of about 14-16px might be ideal for mobile and tablet devices, but inappropriate for desktop devices as the screen is further away. Combining the use of media queries and the assumption that higher-resolution devices will be further away from the viewer’s eye to optimise your type for readability.

Distance matters when it comes to size – Information Architects

font-size: 16px;

@media screen and (min-width: 1600px) {
    font-size: 20px;
}

‘Responsive’ font sizing can also be achieved by using the vw property to define the size of type in proportion to the width of the browser. This makes for a fluid type sizing and can be used to ensure your type fits well on scaled devices. Be careful not to allow the type to become too small or too large, however. When your typeface becomes too small or too large, use a media query to reset the font-size to an absolute size. For more information on achieving this check out CSS Trick’s Viewport Sized Typography.

Viewport Sized Typography by CSS Tricks

Leading / Line Height

A very important property for body copy. Typography needs vertical breathing space in order to be easily read. In print, this is called leading. In web, we call this line-height.

Line-height should always be defined without units, as a ratio of the type’s font-size. An ideal font line-height is generally around 1.5. There’s no one perfect value and you’ll find different sites will have their own ideals and some will even use the golden ratio.

line-height: 1.5;

Line Length

Line length is an oft-neglected property that plays a significant part in allowing information to breathe and that also informs readability. Don’t fall for allowing your type to fill all the space it can, this can cause a disconnect between the end of one line and the start of the next and cause your reader’s eyes to traverse great distances. Instead, limit your line lengths to a length that is more readable. Be sure not to make your line lengths too short, however, as this forces your reader to continually disrupt their flow of reading to change lines.

A line length of roughly 50-60 characters is recommended by experts in UX at the Baymard Institute and a similar size range is also a recommendation as part of Google’s Material Design philosophy.

Optimal Line Length as recommended by Google

To achieve a maximum line length, best practice is to use the em unit (1em = current font-size property ≈ width of the ‘M’ in current typeface) to set a max-width on the relevant element.

p {
    max-width: 50em; /* Maximum width is 50 times the p font-size */
}

Letter Spacing

Letter spacing. Often a neat property to adjust to change the feel your type has, but also very effective at improving the readability of all-caps text. Always use 5-12% letter spacing (tracking) to your all caps text to enhance its readability.

This should ideally be done with the em unit – defining letter-spacing in em‘s means the spacing width is relative to the size of the font. Should the font-size change, the letter-spacing will change accordingly.

letter-spacing: 0.05em;

Contrast / Colour

Appropriate colour choices for both typefaces and their background is important to ensure there is enough contrast between the text and its background. However, too much contrast can also make typography appear heavier and sharper on the eye. Try avoiding ever using extremely luminous colours on extremely dark backgrounds and vice versa but do ensure there is enough contrast to maintain optimal readability. Try testing you colour combinations with a contrast testing tool, such as WebAIM designed to assess the accessibility of your colour choices.

Screen Legibility

Legibility is perhaps the crux of good type, and all of the above factors play a part in determining how legible your type is. However, in web design, it’s also important to consider how legible a typeface is on a screen. Both a typeface’s weight and design can cause issues with legibility on screens.

On lower resolution screens, typefaces that are too thin or too bold have issues with rendering as the weight of the typeface and its curves need to approximate to a pixel mapping and the result can be disfigured character forms.

Thankfully, as screens become higher and higher in resolution (eg. retina screens) this issue is becoming less and less of a problem and eventually will be non-existent.

ScreenSmart fonts as explained by typography.com

Units for Web Typography & Responsive Design

There are more units in web than just the px. Of course, all elements on your screen will ultimately compute to having a px width, or px font-size, you can use alternative units that make your lengths and font-sizes more dynamic. There’re quite a few different units available:

px, ~~pt, pc~~ (absolute/pixel-based)
~~mm, cm, in~~ (physical length-based)
~~ex, ch,~~ em, rem (font-size-based)
vh, vw, vmin, vmax (viewport-based)
% (percentage inheritance-based)

The ones crossed out you’ll probably never find a use case for (well perhaps physical lengths for print media queries and stylesheets). The others, such as em, rem, vh, vw and %, are very useful in today’s responsive web. Let’s take a look at them now.

px

Probably the safest but also the least versatile unit on the web. With the px you can specify the exact number of pixels you want your element to size to. Most appropriate for media query definitions (as your condition is based on the pixel width of the window) and for specifying lengths you are absolutely sure only want to cover x number of pixels, ie. elements that use background-position with pixel offsets (see Twitter’s ‘Fave’ animation).

em

The length of the em unit is equal to the computed value of the font-size property of the element on which it is used. If using the unit as a font-size itself, then it is equal to the font-size of element’s parent. Extremely useful to give an element padding, margin, border and border-radius values that are proportional to the font-size of the element. Can suffer from compounding inheritance, where each child potentially can inherits its parent’s font-size. This creates a sort of multiplier effect.

See the Pen Em + Rem Units by Michael (@michaelschmidt_) on CodePen.0

rem

The length of the rem unit is equal to the font-size of the document’s root element . Useful for basing your sizes off the browsers default font-size, or to allow for the ability to adjust all lengths defined with rem units by adjusting the font-size of the element. Also avoids the issue of compounding inheritance, which the em unit suffers from.

See the Pen vmKVeK by Michael (@michaelschmidt_) on CodePen.0

vh

Equal to 1% of the height of the browser window. Scales accordingly if the window is resize. Useful for setting heights and min-heights that are proportional to the screen (such as full-screen panels).

See the Pen vh by Michael (@michaelschmidt_) on CodePen.0

vw

Equal to 1% of the width of the browser window. Scales accordingly if the window is resize. Useful for setting widths and min-widths that are proportional to the screen (such as full-screen panels), and setting font-sizes of elements to create somewhat responsive typography.

See the Pen vw by Michael (@michaelschmidt_) on CodePen.0

vmin & vmax

vmin and vmax operate the same way vh and vw work, except instead of defining which axis of the window you want to base your measurement, you choose either this smallest (vmin) or largest (vmax) side. This is slightly less compatible with browsers than vh and vw themselves.

Using SVG (Scalable Vector Graphics)

SVG is the standard format for vector graphics on the web. SVG’s are great for logos and any other vector elements you want to retain expandability.

The added benefits of using an SVG is the size of the file, compared to bitmap images such as JPEG’s which can be quite large in size, vectors offer a smaller more customizable method.

See the Pen X-ray me (SVG Experiment) by Noel Delgado (@noeldelgado) on CodePen.0

Why use SVG?

Small file sizes
Scales to any size
Looks great on HD screens
Design control like interactivity, animation and filters

A Beginner’s Guide to Using SVG

Using SVG can be as simple as saving your files with the .svg extension from your favourite vector graphics software such as Illustrator. You can use an .svg file the same way you would any other image in img tags or background-image properties in CSS. However, if you open up the .svg file in a text editor you will find SVG code that you can embed directly into your HTML. Doing this allows you to control and animate your SVG with CSS and Javascript. Checkout this guide at CSS tricks for some beginner SVG usage techniques.

See the Pen SVG with Filters by Chris Coyier (@chriscoyier) on CodePen.0

Using SVG on CSS Tricks

Next Tute Prev Tute