Design for web

Chapter 2: Typography

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
typography terms

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.

definition: typeface
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.

definition: font
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

font family: Vollkorn.

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'.

Font classifications

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.

  1. 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.
  2. Sans-Serif: Sans-serif typefaces are stripped of the serif extension, designed for digital display with a clean and modern appearance.
  3. 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.
  4. 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

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

Table of contents:

  1. TIME FOR “THE TALK”
    the elements of typography
  2. COULD THIS BE THE ONE?
    appropriate typeface selection
  3. MAKING IT WORK
    typographic details
  4. TIME TO COMMIT
    font licensing and creation

© FontShop , now on MyFonts

TYPELAB

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.

typography terms.

Type design is an amazing and once you look into the detail of how typefaces are designed, you might fall in love with typography ツ

games by method.ac

Kerntype screenshot.

Kern Type is a letter spacing game.

Kerntype screenshot.

Shape Type is a letter shaping game.

These 2 lovely little games to allow you to discover some of the intricacies of letter shaping as well as kerning. Enjoy ツ

Typesetting priorities

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.

Pairing typefaces

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.

Combining typefaces

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

Table of contents:

  1. Type:
    Some background on type and typography, covering designers, anatomy, families, classification, and the jobs that typefaces do.
  2. Context:
    A brief look at web compositions as coordinated chunks of typeset elements, shifting among many states simultaneously.
  3. Choosing typefaces:
    Strategies for selecting typefaces based on real design goals, to truly understand why a combination works or doesn’t.
  4. Judging combinations:
    Practical advice about identifying successful typeface combinations by using them and looking at them carefully.
  5. Critique:
    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.

Tim Brown, 2016

fonts on the web

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.

web-safe fonts

The available fonts are the ones installed by default via the operating system. The selection was the only reliable option in the early days of the web - check out the CSS FontStack for usage of fonts across operating systems.

list of system fonts for Mac and PC.

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:

  1. 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.
  2. a close alternative
    This is our first alternative font, or a font selection based on the availability of the preferred font on different system.
  3. one or more possible substitutions
    We can add several alternatives, usually about 3-4 fonts will suffice.
  4. 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.

list of system fonts for Mac and PC.

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.

this site's font stack in CSS:

font-family: 'Yaldevi', Helvetica, Verdana, Arial, sans-serif;

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.

implementing webfonts

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.

font-family: 'Yaldevi', Helvetica, Verdana, Arial, sans-serif;
font-weight: 400;

method 2: @font-face

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
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.

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 three steps:

  1. adding the font files
    create a new folder called 'fonts' in your website folder and add the converted files, ready to be applied via a relative path in the CSS.
  2. 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.
    @font-face {
    	font-family: 'Yaldevi';
    	src: url('fonts/yaldevi.woff2') format('woff2'),
    		url('fonts/yaldevi.woff') format('woff'),
    		url('fonts/yaldevi.otf') format('otf'),
    		url('fonts/yaldevi.ttf') format('ttf');
    	font-weight: normal;
    	font-style: normal;
    }
    
  3. 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;
    font-weight: 400;

Best practices

Before we get carried away we have to consider what effect adding multiple fonts for use in our designs will have on our webpages. During the design work's early stages, we will be looking at static mockups. Everything will display instantly and nothing will hinder our view of the designed pages and all their details. Even during the prototyping stages in HTML/CSS on a local copy of our page, all will appear well. However, implementing the fonts will mean putting extra burden on the browser to load the additional weight.

A well-designed webpage should load fast and be quick to render in the browser. Adding web fonts will add to the overall file weight and is therefore an important aspect to bear in mind during the early designs stages. If we were to use system fonts only for our design, it would only be our other assets, such as images or script files (like JavaScript) that the browser will need to load. The sum of all files to be loaded will mean that performance will be affected.

sustainability

old oak tree standing on green grassAnother aspect of delivering web content is sustainability. The increase in broadband speeds, higher performance of devices accessing the web and speed improvements via servers as well as browsers resulted in the fact that webpages are now much heavier than in the earlier days of the web. Back then, performance alone was a vital issue of consideration when publishing online content. Now this often seems less of a concern as even heavy pages may load fast on a good connection and an up-to-date device.

And this is an issue for 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 due to personal preferences or out of financial needs. Or they might be travelling, on a train with a very shaky wi-fi connection. 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. We need to consider that every file on our webpages is stored on a server. And every server has a finite capacity and is constantly switched on, 24 hours a day, 7 days a week - consuming electricity. 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 ツ

Modern Font Stacks

This excellent site is a passion project by Dan Klammer who published it on Github under an open license. It offers font stacks using system fonts for the newer font families. These system font stacks are organised by typeface classification, listing the modern OS. He points out that these are inherently the fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.

screenshot of website with 6 example font stacks

While it will not always be fitting or appropriate to use system fonts alone, Dan certainly demonstrates that the number of available fonts is growing and the variation of styles is something worth considering. There is no doubt that for certain websites the option of a font stack which uses only system fonts would deliver well.

For example: we can imagine a website that is to serve nature lovers and fell walkers who are walking through remote spots with slow or little connection. If the design relies solely on system fonts, there will be less burden on the connection, faster loading and a more reliable rendering of the design, perfectly fitting the purpose of the site and its user group's situations.

variable fonts

So far, we have been used to fonts which are designed in their different variants, offering multiple weights and styles via one or multiple files. This meant that our graphics apps, and our CSS rules, could call upon them to be displayed as fitting. The font was often split into different files, one file per variant. This made it easy to implement.

In 2016, a new font format was introduced: the Open Font specification, the variable font. This format now allows for a multitude of different variants to be included into a single font file. These variations include width, weight, slant and the uses of axes. The new format needed to be implemented in graphics applications as well as browsers ~ which began around two years later. This evolution continues.

The advantages of variable are many: we can include one single file into our designs and use the various different styles ~ this means faster loading, quicker display of our type and much refined typesetting. An opportunity to be creative and innovative, a chance to create even more unique and original designs with finely tunes typesetting.

Explore variable fonts

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).

Legibility concerns

easy flow of reading: Left-aligned text

lines aligned left.

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

lines aligned centre.

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”.

comparison of start of line.

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 works 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.

Quick tip: 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.

related reading

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.

comparison of page title set in sentence case and all uppercase, with graphic created for outline of the shape of the words.

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.

Related reading

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.

Much better!

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.

Gestalt theory

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.

multistability visuals: cube + vase.

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.

Design principles

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.

Proximity

illustration of grouped elements.

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.

Rhythm

illustration of reading rhythm via spacing.

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.

Balance

illustration of even and uneven balance

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.

Beyond legibility

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.

bauhaus book cover 1. bauhaus book cover 4. bauhaus book cover 11. bauhaus book cover 12.

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.

Massimo Vignelli, The Vignelli Canon (p92), 2009

Related reading

Exciting times ...!

The early web's typography was somewhat limited by basic CSS rules. This was sufficient to create good reading experiences and with some creative thinking (and the occasional 'crime' of extra markup), it was possible to produce engaging and exciting design with type. However, the refined control over some of the more intricate aspects of typesetting was lacking in CSS.

winged at symbol Now CSS for type is flying... it seems sky's the limit as new CSS rules are being announced and refined. Browsers are keeping up quicker than before to implement the new and exciting features. Just as typesetting for print, type for web can now be innovative, creative and fun ~ if not even more so ツ

This section will be updated over time and aim to point towards the newer developments in type for web. Some have been around for a while and are undergoing an update, others are just barely ready to be put in use. Always check the caniuse.com site for browser compatibility of the new features.

When responsive design was new, designers used the media queries to set breakpoints to adapt the design for the different sizes of the devices used to view the web. This meant adding rules for both layout and typesize to optimise the design and accommodate the varying space available.

A smarter and less code-heavy approach evolved which made use of the flexible CSS units for type sizing - based on percentages, character measures or viewports sizes. This made it possible (without the need for JavaScript) to set type which would adapt to the viewport as well as layout.

using viewport width

One simple and straight forward method is to use calc() for our font sizing and include a fraction of the viewport width. The following example will add 80% of the viewport width to the size of the font which will therefore scale up with the size of the browser window.

font-size: calc(2em + .8vw);

Tim Brown elaborated on this in his article "Flexible typography with CSS locks" (Typekit blog, 2016) when he demonstrated and explains how this could be useful for both font size as well as line height.

using clamp();

This function can be used for any sizing, including font sizing, and allows for three values to be declared. This allows us to specify boundaries, optimal settings for smallest, largest and preferred sizing.

clamp([value-min], [value-preferred], [value-max]);

Instead of having to worry about set break points, we can merely allow the clamp function to control the sizing of our fonts across different viewports. We can use any unit we prefer, and even add a mathematical calculation.

font-size: clamp(1.5em, 2em + .8vw, 2.5em);

Combining units and calculations, this method now makes it easy to create fluid typography through the ability to specify the scale of type. This function can then be use for layout and be implemented with variables for even more flexibility.

Utopia

logo of Utopia, fluid responsive designThis is a brilliant online CSS tool which offers interactive calculators to created fluid scales for spacing and typesetting. I would strongly recommend to watch the introductory video, presented by the two creators of Utopia, to learn more about fluid type scales and how to use them.

Flexible font sizing is now easy and will allow fine-tuned layouts and enhanced reading experiences. Whether we use a simple flexible unit alone, a more complex typescale or variables in combination with either ~ we can create sites which will adapt to the available space. This allows us to ensure an optimised presentation of the text, making it a pleasure to read.

Related reading

As CSS evolves, the rules we have at hand now allow us similar controls as we have for print design. Headlines, or bylines, on the web are notoriously difficult to manage. These text elements are usually intended to be eye-catching as well as very quick and easy to read. However, typesize and available space on different viewports and/or orientations means that their large, or small, set scale interfers with reading.

And now we can address this very issue via the new text-wrap CSS property which allows control over how the line breaks will appear within our text. At the time of writing (January 2024), this feature is supported in most popular browsers, too ツ

wrapping text with CSS

The default behaviour (i.e. if the rule has not been set) of text on a webpage is:

text-wrap: wrap;

Let's take a look at this website's homepage and the chapter info as an example. The screenshot shows how the text in for each of the two chapters is displayed to take the full width of the containing element. For the Introduction, set at full width, this looks fitting and reads well as the single line text does not require line breaks.

screenshot of chapter details on homepage

Without setting this rule, the default text presentation will break as needed to display all text at full width, regardless of how it might read. The text for Chapter 1 therefore shows an one word orphan (a single word on its own line at the end of a paragraph). Even Chapter 2 does not read very well despite the orphaned text part consisting of 4 words.

text-wrap: balance;

With the text-wrap set to balance, the browser will render the text quite differently and aim to even out the number of words shown in each line. Much better ツ

screenshot of chapter details on homepage

With the amount of words split fairly evenly, our eye does not need to travel to read each line. The heading and the byline form a neat 'chunk'. The legibility has been greatly enhanced by one single line of code, sweet!

using text-wrap

The text wrapping feature has been designed for addressing oddities in headlines and is not to be used for paragraphs or large text blocks. As the process of measuring characters and calculating a balanced display is computationally heavy, this feature is only supported for smaller blocks of text with limited words/lines (MDN Jan 2024: six for Chromium and ten for Firefox).

This is a fairly new feature and there are a few other values that will eventually be implemented ~ check out the MDN docs for reference.

If you have not already done so, it is worth reading up on other wrapping functions of CSS, such as this Deep Dive into Text Wrapping and Word Breaking, by Will Boyd.

design talk

dev talk

Experimenting with type

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 fitting headings (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.

Objectives

  1. select a section of the text and add it to an HTML file, marking up the content as fitting
    Your page should feature your chosen text section, quote the main title and author as footer.
  2. create a CSS file, link it to your page and add your chosen typeface/s
    You can use any method you like - the focus is primarily on your font pairing and typesetting.
  3. experiment with different font combinations and colours.
    Your page should express an atmosphere via your typesetting and choice and use of colour.
  4. make a copy of your design and create additional versions.
    TIP: move the HTML and CSS files into a suitably named folder ~ and create a copy of it for your next version.

Source files:

download source file text file + blank HTML

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.

being human
typeface:
Georgia, Krub
colours:
black & white →
green, yellow, black and white →
edge cases
typeface:
Fira Sans
colours:
black & white →
purple & yellow →
criticism
typeface:
Cutive, Open Sans
colours:
black & white →
rust & teal →

Experimenting with flexible units

The objective of this project is practice and play with the various different units to scale our fonts. The source file will offer text as headings, a blockquote and a pargraph to allow us to experiment and preview results quickly and easily.

Units/functions to trial

Test out the following units and functions to change both the container as well as the type sizes.

  1. viewport related units vw vh
  2. character related units: em % ch ex
  3. clamp function: clamp();
  4. use clamp function with included calculation: clamp(); + vw

Variable fonts

To add another challenge ~ check out some variable fonts and apply them to this page. Experiment with the available properties.

Project files & links

Source files:

download source file HTML/CSS + background image

Learn CSS

The 'Learn to style HTML using CSS' section of the MDN site will introduce CSS[1] 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

illustration of CSS rules, © MDN

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[2]. read: CSS styling text

footnotes

  1. Cascading Style Sheet
  2. 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