Web Design is 95% 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, ia.net, 2006
typeface? font? ~ what’s the difference?
The 2 commonly used terms of “typeface” and “font” seem to be used interchangeably these days and though this might not be too important for practical work, especially when designing for the web - it is an interesting aspect to consider and understand. The history of this terminology is worthwhile exploring further and will hopefully highlight the labour and love that goes not only into the design of a typeface but also the collation of variants into a font file. Here is a quick definition of the two terms.
The typeface is the design, the form. It can have variants, such as bold, italic etc, all of which will keep the form of their original typeface intact, merely becoming a stylistic variation of the original. Designers will consider and decide on typefaces to fit the design and purpose of their project in hand.
A typeface is something you see - the actual shape and form of the letters, carefully crafted by a type designer.
In contrast, the font is the file which allows the final type to be applied to the design. This used to be the collection of metal fonts for a type variant in the old days of print. Since the arrival of digital media, a font is now the file which you need to have installed in order to use your chosen typeface or type variant.
A font is something you use - the format which contains the variant of a typeface. This could be .ttf (TrueType font), or .otf (OpenType font), or any other digital font format.
Working with fonts
When we work on a design in any graphics app, we will need to make sure that the license permits our use for the various outputs and to have the font installed in order for the app to be able to use it.
The font's variants may come in one single font file or be comprised of several. Installation to our system (Mac or PC) is usually as simple as double-clicking the font file.
To use the font for web will be a different matter and more involved. For now, bear in mind that for working off-line, locally on your computer only, the installed font will display fine in your browser. To make it work online, the font file needs be online as well, see 'working with web fonts'.
Before we can look at selecting an appropriate typeface, it is important to learn about the different classifications. Generally speaking, there are four main categories. The following text is set to the default font family as a demo of the mentioned classification. See 'Working with web fonts' for more detail on how typefaces will work online.
Serif: Serif typefaces feature small decorative extensions, known as serifs, at the end of the main strokes. They are often associated with a more traditional and formal feel.
Sans-Serif: Sans-serif typefaces are stripped of the serif extension, designed for digital display with a clean and modern appearance.
Cursive: Cursive (also called display or fantasy) typefaces are usually quite elaborate in detail. They include handwritten or very decorative styles and should be used sparingly.
Monospace: Monospace typefaces allocate equal space for each character, resulting in a fixed-width design.
These four categories have now been expanded into more detailed sub-categories which extend the classifications to define the more distinct features. Check the first module on Typelab for details.
MEET YOUR TYPE
a field guide to love & typography
Table of contents:
TIME FOR “THE TALK”
the elements of typography
COULD THIS BE THE ONE?
appropriate typeface selection
To dive in deeper - check out this lovely site which includes 3 modules on learning more about typography, and setting type for the web. It includes an excellent glossary as well.
Type Lab is an in-depth guide to using typography on the web with the motto: Web typography made simple. This wonderful little site was created by one of my former students, Hannah Bloom, who has kindly given me this site to include in my material, for all of us learn from.
Type design is an amazing and once you look into the detail of how typefaces are designed, you might fall in love with typography ツ
These 2 lovely little games to allow you to discover some of the intricacies of letter shaping as well as kerning. Enjoy ツ
As webdesigners we have to consider how people navigate and consume online content. Research indicates that our attention spans are generally shorter, leading us to initially scan web pages, skim through headings and text/media before delving in deeper to read and view the given content. Consequently, when we make design choices and select typefaces, legibility has to serve as the guiding principle.
To ensure an effective design, our focus has to be on legibility, usability, accessibility, and the visual coherence within the site's context. Creating a clear visual hierarchy through the use of headings and subheadings, combined with appropriate spacing and layout, will facilitate easy skim reading and enhance the overall reading experience.
One approach to an engaging type design is to pair different typefaces, giving each its own context. For example, setting all headings in one font, and the main copy of the page in another will enhance the visual hierarchy and aid skim reading. It is usually best to limit the number of typefaces used to two or possibly three. Using too many fonts can result in an overly busy page which will be detrimental to legibility.
Combining typefaces can be effective if the characteristics and personalities create the right balance. There are a few guiding principles to keep in mind.
With so many options available, it can be tempting to let our personal taste lead the way. However, we need to check our choices will be clearly legible.
Offsetting heavier weights with lighter variants can be effective if the letter forms and shapes create a dynamic feel.
The type combination should be complementary to create a fitting feel in keeping with the site's context and message.
Other than selecting complementary typefaces, their scale and proportion within the page's layout has to be both balanced and appropriate to ensure a good reading experience.
Table of contents:
Some background on type and typography, covering designers, anatomy, families, classification, and the jobs that typefaces do.
A brief look at web compositions as coordinated chunks of typeset elements, shifting among many states simultaneously.
Strategies for selecting typefaces based on real design goals, to truly understand why a combination works or doesn’t.
Practical advice about identifying successful typeface combinations by using them and looking at them carefully.
An appraisal of five different sites’ type choices and typesetting, noting the relationships between their successes and the strategies and advice in this guide.
Thank you, Tim ツ
Because this pocket guide is no longer available for purchase, I’ve decided to make it available for free here on the Typekit blog. Download the PDF, and enjoy.
It is fairly straight forward to work on our designs in any graphics app as all we'll need to do is install the fonts. Having the fonts we have selected to use for our webdesigns installed means that while we work on the graphics app and in our code editors and browsers, the fonts will display as expected. Moving our sites online, however, means we will need to work with web fonts if everyone, accessing our site with the various different operating systems, is to see our carefully crafted designs using the fonts we chose.
In the early days, the choice of fonts was very limited as the font would need to be readily available on the system of the browser in use. This initially meant literally only relying on system fonts which of course varied between the operating systems (Mac/PC). This was quite a limitation but did push designers to be quite creative as well.
The available fonts are the ones installed by default via the operating system. This selection was the only reliable option in the early days of the web.
There are now more options to use fonts for the web. However, as this means that the font files will need to be online, hence could fail to load due to various different technical issues - these fonts remain important to consider. They will be declared in our code as fallback fonts for our final web designs. One thing to consider is that newer operating systems as well as graphics apps are adding to the commonly available font selection.
working with font stacks
To implement the final design's fonts on our website the font file will need to be uploaded on a server. This could be server the website is hosted on or a remote server offering webfonts. The font is then applied via CSS and its settings defined. This includes font size and weight as well as line height. The font is loaded alongside the web page's content and applied as the browser renders the page.
Font settings will require a so-called font stack. This is a list of fonts which the browser can use to render the page. If the first font file is not found, the second one will be used. If the second font file is not found, the third one will be used. And so on. The final rule will declare the generic font family which will result in the use of the system font.
The list of our chosen fonts, comma separated, should be as follows:
our preferred font
If the name of the font family is more than one word, we will need to add quotation marks around the full name.
a close alternative
This is our first alternative font, or a font selection based on the availability of the preferred font on different system.
one or more possible substitutions
We can add several alternatives, usually about 3-4 fonts will suffice.
generic font family
Lastly, we must include the correct font family. This will ensure a safe fallback should all other fonts fail to load or be missing on the system.
We will need to take care to select fonts which are ‘comfortable’ with each other, which are similar in x-height, character width as well as weight and we can ensure that our nicely crafted layout will not be compromised if our preferred font is not found. This is not quite as easy as it might sound. Typefaces of the same generic font family do vary, sometimes quite substantially, in proportion and weight.
This example shows text set in different sans-serif fonts in a graphics application (Illustrator). Though this is not a true representation of how a browser would render the font - it does show the difference in width of the given phrase quite clearly.
The main font for this site's design is Yaldevi, which is loaded via the CSS file from the Google font library. Should the font file fail to load, the browser will check for availability of the next font in order and implement whichever one is found first. Should none of the listed fonts be available, the generic system font will be used instead.
There are two methods of how a webfont can be implemented. One method uses a CSS file, as provided by the webfont service. The other is to use the self-hosted font file via @font-face. For both methods the font file is hosted online and loaded when the page is rendered in the browser.
There are a few different services offering webfonts: Google Fonts is a free service offering a growing number of fonts. Adobe Fonts will require an account and a monthly payment via the subscription.
Both offer the downloading of fonts for use in graphics apps as well as the usual methods of online implementation.
method 1: linked CSS file
This is an example of the code provided by Google fonts to load the selected webfont.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yaldevi:wght@400;600&display=swap" rel="stylesheet">
We then proceed to declare this font as preferred font stack in our CSS, adding the font alternatives and generic font family. As the link includes two weight via 'wght@' - we can add the required font weight to our type elements as fitting. In this case 400 is the regular weight, and 600 is bold.
To use this method, we will need to convert the font to web format and then write the appropriate CSS to load it.
web font formats
TrueType : .ttf
Developed by Apple as a competitor to Adobe’s Type 1 format, used in PostScript. TTF fonts were soon widely adopted as the most common format for system fonts and are now compatible with most operating systems.
OpenType : .otf
The OTF format was developed by Microsoft and Adobe and is based on the TrueType format. It includes typographical features such as ligatures.
Web Open Font Format : .woff
The WOFF format is now in its second version and designed specifically for web use. This format is a wrapper with compression applied and metadata added.
web font converters
We have the option to either download the appropriate web fonts or we will need to use tools designed to convert a given font format to the web equivalent.
provides customisation options and generates the necessary CSS code for embedding the web fonts into your website.
provides options to adjust font settings and generates the CSS code for implementing the web fonts.
offers customization options such as font subsetting and font hinting and provides the CSS code needed to use the web fonts.
using the webfonts
The files created by the font converters will include an example and instructions on how to load and implement the fonts. This will involve two steps:
loading the font
as the font files are uploaded alongside the rest of the website's files on the server, we will need to load them as part of the other assets before they can be used by the browser.
applying the font
once the font files are loaded, we can proceed to declare them as our preferred font within our font stack and apply them as any other font, setting size, weight and any other typographical features.
font-family: 'Yaldevi', Helvetica, Verdana, Arial, sans-serif;
sustainability & performance considerations
Another aspect for delivering web content is also sustainability. With the increase in broadband speeds, higher performance of devices accessing the web and speed improvements via servers as well as browsers, webpages are now much heavier than in the earlier days of the web. This is when performance alone was an issue that was vital to keep in mind when publishing online content. Now, even heavy pages may load fast on a good connection and device.
And this is an issue for a two reasons. Firstly, not everyone accessing the web will be on a reliable and fast connection. There are people who will be on older devices, slow connections, outdated systems and browsers ~ this might be for personal reasons or out of financial needs. Secondly, in these days of high energy consumption affecting our planet we have to be aware of the impact of our work and its carbon footprint. As web workers, this has to be an issue we bear in mind as we produce designs for web publishing.
Adding webfonts will now add to the overall weight and will affect the page load and will be less sustainable. From a design perspective, we will likely use one or two fonts which will be what is part of our final design. However, even using only one webfont alone can add substantial weight if many variants or weights are included. This will be an important aspect to keep in mind as loading the font can be detrimental to the overall performance ~ fast loading pages will always be more sustainable and be a better experience for our site visitors ツ
Debating web type
New designers often get drawn into aesthetics alone and subjective personal preferences when learning how to set type. And this is perfectly understandable too - and we should never hesitate to just have a play! To run with our instincts and initial ideas. Experimenting and having fun in the early stages of any design is always good and might lead to some fresh and fitting ideas. There are certain aspects however that we need to consider carefully to achieve effective typography for the web.
No matter how much we might personally prefer or like a certain approach to typesetting, there are some principles that have been proven to be true. In that case, it will be a matter of abandoning our own views in favour of nicely set, easy-to-read text. Importantly, our typesetting must be accessible, effective and enhance legibility.
This seems to be an ongoing issue—I‘d almost call it an obsession—with centre-aligning all text. Please, pretty please with a cherry on top, do not set the alignment of paragraphs and main copy to centred. It's just bad practice!
When we work on a webpage, its layout of both textual and visual elements, our focus should be on creating a nice flow of content. The design should be engaging but primarily it should be easy to understand and easy to skim read. Our page should show a clear hierarchy, aided by headings and sub-headings, and make reading a pleasure which requires little effort.
We will consider our audience carefully, including those who might have trouble reading, like those with any degree of dyslexia. This means well formatted text, set at decent size with appropriate line spacing ~ as well as easy-to-read alignment. For longer passages, this generally means avoiding centre alignment as well as avoiding justified text (which can cause difficulties for some due to the uneven word spacing).
easy flow of reading: Left-aligned text
When we align text to the left, the result is an even left margin. The right margin, i.e. the end of line, can remain uneven as this is when we will proceed to the next line anyway.
Each line will begin at the same horizontal point. This makes it easy to read as our eyes will merely return to the same point, and drop one line down. This requires little mental energy as we will find the beginning of the new line easily.
Left-aligned text allows us to focus on what we read, allowing us to easily go from one line to the next. Whether line breaks are used or not, the reading experience will be good.
choppy & slow to read: Centre-aligned text
In comparison, when we centre-align text, the result is an uneven margin on both sides. This applies to both the start and end of the line.
Each new line starts at a different horizontal point which then forces us to concentrate more, requiring more mental energy to read the content in hand. This is more tiring and cumbersome as the flow of reading is interrupted.
Line breaks will mean an even more uneven start of lines and straining our eyes by requiring even more movement to find the start of each new line.
If we compare the two preceding paragraphs side-by-side and highlight the start of each line, we can clearly see that more effort will be required from our readers when the text is centre-aligned. This is also referred to as ‘cognitive load’, as discussed by NN/g (Nielsen Norman Group) in their article “Minimize Cognitive Load to Maximize Usability”.
An additional issue will arise with a change in viewport width, i.e. when our text reflows for different screensizes on the different devices people will use to view our webpage. This is unpredictable and can result in even more varied distances to the first word on a new line for the centre aligned text.
This tends to be a common mistake by many who are new to web design and feel like experimenting - looking at the text rather than reading it. Novice web designers often feel centred text looks nicer, gives a text-heavy page a more engaging and interesting look. Experimenting with layout and type is great, and you should absolutely have a play and see what work and what does not. But let's remember that the most important aspect of good typesetting is legibility, and to create a nice reading experience for all.
Effective uses for centre-aligned text
There are, of course, instances when centre-aligned text can be an effective means to draw attention, to make a text element stand out and break up a text-heavy page. Good examples are the sub-/headings and blockquotes which are usually quite short. In this case, we might opt to add in line breaks to control how the text is displayed and to aid legibility.
To check legibility, read the text out loud.
This will highlight how well it flows.
When we design, our focus is on the overall appearance of our page. We tend not to read the copy consciously as we are familiar with it and are busy with the visual aspects of the design. Reading the text out loud, word by word, will show us where the applied typesetting might force unintentional breaks in our flow. Headings or short passages of text (2-3 lines) are usually easily read. Longer centre-aligned paragraphs, however, will clearly cause a more choppy result.
Uppercase lettering has its uses and can be quite effective in context. There are some stunning typefaces which only offer capital letters and when used sparingly, these are beautiful and will work well. This is not an argument against using caps per se, merely a plea to be mindful of their implementation in design.
It is important to always consider the use of all capital lettering quite carefully across all media. For example, if someone sends us a text message, asking us to check on an email they sent, it will come across very differently in tone and feel when set to sentence case as opposed to uppercase.
If the message reads like this: “Hi, please check your emails.” ~ it sounds quite direct and prompting but polite.
In contrast, if the message reads like this: “HI, PLEASE CHECK YOUR EMAILS.” ~ it now seems quite demanding, as if the person contacting us is shouting.
NO ONE LIKES BEING SHOUTED AT!
As with our choice of typeface for any text presentation, the way we set type will add personality, and expression to the text and will colour the experience for the reader. Sentence case, which sets the first letter of a sentence to uppercase and the rest in lowercase, reads well and will merely deliver the message. Choosing all caps for the same message will fundamentally change how it is received.
Legibility & accessibility
One argument against setting type to all uppercase is the reading experience, which applies to titles and especially long sections of text. While the typeface might be aesthetically pleasing in the form of its letters as capitals, it will have an effect on how fast it can be read ~ and on how easy it is read by everyone. While all caps can be attention-grabbing, we will not read the text as quickly as the shape of the words will no longer be distinct.
Let‘s have a look at the title of this section as an example. We have 3 words which all have quite a unique shape due to the initial capital, followed by the mixed letter sizes. The ascenders and descenders will reach to the very top, and go beyond the baseline below. This all adds to the unique shape of the word and therefore aids legibility. As readers, we rarely read the words letter by letter but we aim to skim read, recognising words by shape and quickly moving forward.
When we set the entire title, i.e. all 3 words, to capitals instead, we lose that distinct shape of each word. The title at a glance now looks like 3 blocks of even height, only varying in length. This slows down reading and will cause some readers difficulties which could so easily be avoided.
Some of the studies into reading by shape or letter recognition are now being disputed and claim that word recognition now is more in keeping with how we read. This merely supports the case for the importance of good typesetting and the use of sentence case as a clear representation of the words within text.
The power of CSS
When we add the textual content to our webpages we should always aim for a good reading experience, enhance the legibility for all. Accessible text will therefore merely require good input which is grammatically correct and does not add confusion when accessed in different ways - and styling which aims for good type size, line height and spacing.
One of the benefits of CSS is the power of shaping our designs for the best visual appearance. In the case of letter casing, this will allow us to keep all our content nicely accessible. If we, for example, want to set a heading to all capital letters - we can simply add our text in sentence case which is the most appropriate method for text input, be that in markup directly or when added via a CMS. We will use CSS to set the heading to all uppercase and it will look as planned. The added benefit is that this will now ensure that a screen reader will not mistake it for an acronym or abbreviation and read it out correctly.
It's important to consider all possible ways how someone might want to read our content. Some might use the 'reader' view, which will strip out lots of the styling we applied and render the text in a plain, clear and easy-to-read format, hence showing the text as input originally. Others will prefer the audio version and use screen readers or similar apps to access our text. Again, having the text written in a meaningful manner—without the implied emphasis all caps might bring—will yield the the best result.
White space is one of the most effective methods in visual media, be that for photography, illustration, design for print and web or app design. It allows us to create a balanced presentation of all elements which will be both accessible and easy to use. Also referred to as ‘negative space‘, it has nothing to do with the colour itself but rather the empty space used to separate content elements.
White space is present in type - it is part of a typeface‘s design in both the forms of the letters and the letter spacing. It is also part of the typesetting itself via line height and vertical space between elements. It will contribute greatly to a pleasant reading experience when implemented well.
If we ignore this aspect, or override default settings, text may become quite inaccessible, be difficult to read and drive our readers away.
Difficult to read
If we set our text with too little spacing and merely set each line as high as its letters (as this paragraph you are reading now) - it will look like a wall of words. This odd block of letters is difficult to read for most people and impossible for some.
If the text is set properly, the heading‘s bottom margin and the paragraph‘s line height will make reading easy. And a lot more pleasant, too.
White space can be used to achieve different kinds of effects: To establish an even and calm balance. To draw attention. To add focus. To create tension or to add dynamic. To pace the consumption of content.
By using white space as fitting our content and context, we can ensure that our webpage will not look cluttered or too noisy and busy. Appropriately generous spacing will allow the text and/or media to remain the focus of the page, fostering a calm and pleasant viewing experience.
To rationalise why white space works, we can refer to some classic design theories which have been around for longer than the web and have remained effective ever since. The following design principles can be traced back to the Gestalt theory which outlines one aspect of how we perceive the world and interpret visual clues. The word 'Gestalt' is German and means form or shape ~ and is often interpreted as meaning pattern. In the early 20th century psychologists found that our perception of visuals is not merely formed by the individual and separate parts but also by seeking connections via vicinity and environment. In addition, they found we can influence how we perceive a certain visual by our free will. We might see and interpret an image one way, then change our perception or even control it.
These two visuals are the famous examples to illustrate multistability, an equlibirum of multiple points which affect our vision and influence our interpretation.
The 1st visual, clearly depicts a cube. Most of us are able to switch between seeing the perspective in different ways: it can be seen as a cube which has its front plane (bottom left) facing the viewer, with its back plane towards the top right. Or it can be seen that the back plane is towards the bottom left with the front plane extruding towards the top right.
The 2nd visual,
can be seen as two entirely different subjects: do we see a vase? Or is this an image of a silhouette of two people's faces looking at each other? ~ again we could choose to interpret this one way or the other.
The Gestalt theory therefore proves that white space can influence how our audience might perceive our layouts. Early design theories established the following principles which rely on the use of negative space to establish certain patterns.
Grouping elements will imply a relationship between them. Examples of this are any written text (we use paragraphs to group a certain point, argument or section of text together), or on commercial sites where we will group the product with its descriptions, details and pricing to clearly show they relate to each other.
Our use of headings and subheadings in text heavy-pages serves not only to create a visual hierarchy but also to establish a certain rhythm. The headings, paragraphs, lists and blockquotes will all read slightly differently through the inherent or applied white space. The flow of reading will therefore have its own set rhythm which will aid understanding and enhance the readability by varying the pace.
White space allows us to create a certain balance within our page. We might choose to implement a symmetrical balance to create an even and calm presentation, resulting in a reassuring appearance and a fluent reading experience. Or we might opt for an asymmetric balance to create drama and draw attention to the various aspects of content.
One excellent way of understanding the power of white space is to look at print examples, be that magazine or book covers, or layouts of feature articles. The following four examples of the book covers for the Bauhaus publication show how effective the liberal and refined use of white space can be to create an eye-catching and dynamic design.
How we use white space goes beyond the facility of easy reading. While we will aim for clear and accessible presentation of content, there are other aspects which will have an effect on how the final layout will be interpreted.
[...] in typography the white space is more important than the black of the type.
The white space on the printed page is the correspondent of space in architecture. In both situations space is what qualifies the context. Naturally, the organization of information needs a structure to hold together, but one should not underestimate the importance of white space to better define the hierarchy of every component.
White space, not only separates the different parts of the message but helps to position the message in the context of the page. Tight margins establish a tension between text, images and the edges of the page. Wider margins deflate the tension and bring about a certain level of serenity to the page.
The article A Designer's code of Ethics by Mike Monteiro delivers some strong messages. Select a portion of the text and create a single webpage. Markup the text with a s fitting heading (add link to source and author credit as footer) and experiment with different typefaces and layouts as well as colours to focus in on one point specifically.
Remember the tip:
To check legibility, read the text out loud.
The objective of this project is to establish an atmosphere for the selected piece and its focal point. Work on multiple version of the same text, or select different section and allow yourself the space to play with implementing different typefaces and colours.
The following are examples of three different sections of the text, presented both in grey scale and colour. The layout is responsive and varies between smaller and larger viewports; this is something you might not be ready to add yet ツ one step at a time.
The 'Learn to style HTML using CSS' section of the MDN site will introduce CSS and is the next step in implementing your designs. HTML is for the markup of all content, all text and media that will be displayed on the webpage. CSS is what will control the visual presentation of this content. It allow us to specify typefaces, colour and layout.
read: Learn to style HTML using CSS
There is a section on 'Styling text' in keeping with this chapter. You will learn more about how to typeset your content correctly and understand the 'cascade' and how settings will be inherited by their parent element.
read: CSS styling text
the term 'parent element' refers to an element that contains another element within its structure. Such nesting of elements is important to consider when writing CSS as it will directly affect how the CSS rules are applied ↵