The Space Between Letters
Name: Kerntype
Developer: Crafted by Mark MacKay and María Munuera
Platform: Browser
High-level Instructional Goal: As novice in design and typography you are shown phrases in different fonts. It is your job to move and align each letter to the best of your ability for appropriate spacing and readability. The player’s solution is then scored and compared to a typographer’s solution. The player continues this with different phrases and fonts to help build up their knowledge in typography.
Learning Objectives
What do I need to know prior?
The player does not need to have any knowledge in design, fonts, typography or lettering. However, as all the words and phrases are only in English, the player should be familiar with the english alphabet and capital versus lower case letters. The player does not need to be fluent in english, but should have a basic understanding of reading.
What can I learn?
The player will learn the fundamentals of pleasant and legible typography. The main concept that this game teaches as hinted in the title KernType is Kerning. Kerning is defined as the space between letters or characters, which ultimately has an impact on the readability of the printed text. Kerning is not a mathematical formula of even spacing, but rather a visual practice of the perceived space between letters. The player will begin to learn that each letter has a different shape and so will need to fit with another letter in a way that works, as opposed to a specific measurement for all the letters in the word. The player will also learn to recognise shapes of letters such as those that are slanted or those that have crosses. The player will also learn to understand the relationship between space and letter shape. (Canva, https://www.canva.com/learn/kerning/ 2020). The player will build a sharper eye for the detail of each letter shape, judging space between characters, and recognising the negative space that exists around each character.
In addition, as the player keeps playing this game they have the opportunity to grow their repertoire of fonts and become familiar with a variety of fonts from different time periods such as Gotham Black from 2000, Sabon Small Caps from 1966 and Baskerville Italic in 1757.
How can these skills transfer outside the game?
The player will have a sharper eye for detail as well as the notion of negative space around the item of focus. The player can use these skills in the context of other creative or design areas. The player will have a better eye for interior design and paying closer attention to the shape of an object and how it should best placed in relation to a different shaped object around it. The player will also be able to apply this knowledge in graphic design, logo design, readability for advertisements, web design and even utilising Kerning to optimise for space on a fixed area such as a newspaper or book.
Viewing KernType through the MDA Framework
Mechanics
The player is given a word or phrase against a minimal grid. The player then has the ability to select each letter and move the letter left or right, pixel by pixel, with their arrow key on the keyboard, or move the letter 10 pixels at a time.
Below each word, the player is shown relevant information about the font which they can read before beginning to move the letters, as well as reference when moving the letters. The three pieces of information that the player is shown below is:
- Typeface
- Designer
- Release
The player does not have a time limit and is able to take as long as they need to feel satisfied with the final kerning of the word. Once the player feels satisfied they are able to click ‘Compare’. The player is then given a score out of 100, to see how well they kerned the letters for the best readability.
The player then has the option of three radio buttons:
- ‘Both’ to view their kerning overplayed on the solution
- ‘Solution’ to view the solution alone
- ‘Your Kerning’ to view their kerning alone
The player can then click next and move to the next kerning challenge. In each play session, there are 10 rounds for the player to complete as well as an overall score.
Dynamics
The biggest anticipation for the player is waiting for their score once they are finished and have clicked the compare button. If the player receives a low score below 90, they feel slightly frustrated and are eager to know what detail they might have missed about a letter. They will want to spend longer and pay closer attention to the solution, in order to see which letter they might have missed something about and look closely at the Typeface to see how a letter looks differently in that font. They will toggle between the overlay of both solutions as well as just looking at the solution itself. The player feels driven to learn what they missed to improve for the next round. The player might also change their strategy of how they look at the letters, and choose to first identify and pick out letters that are slanted or have tails to ensure they are not overlooked.
Also once the player has received a score above 90, they feel a sense of accomplishment and pride. They will want to continue on this streak and only get scores above 90 or above their personal best. They will feel even more compelled to be as meticulous as possible to ensure they have kerned to the best of their ability. Thus the score is what makes the player more and more methodical in each round to ensure they don’t receive a lower score than what they received below.
Aesthetics
Challenge: The player faces the challenge of trying to kern each letter to ensure the best readability and pleasing legibility. It is a challenge to use their visual judgement to see whether the appropriate spacing is given to the particular letter based on the font and it’s shape, as well as consider what it’s surrounding letters are. The player is playing for a score out of 100 and is trying their best to keep their average as high as possible, and not have a lower score than they did in the last puzzle. The players is also given the challenge of learning to kern in different fonts and with different letters combinations.
Discovery: The player is truly able to explore and discover the world of kerning and the foundation of aesthetic typography. The game offers the player the opportunity to discover the entire concept of kerning by themselves by just jumping straight in with a word and having them move the letters, without any instructions for what to pay attention to. The players themselves will begin to discover the different edges around a letter and how they should be spaced next to another letter as they keep practicing and receiving scores. The player also has the ability to discover Typeface names and the date they were born in order to build their repertoire and recognise several groups of typefaces.
Overall the experiential aesthetics of the game allows for a novice in typography to discover the world of basic typography in a calming and methodical manner, with the challenge of trying to achieve a higher score each time.
What Learning Principles are employed?
Feedback
The player is given feedback after they have completed the kerning of all the letters of a word in that round. They are first given a score out of 100, but they are also able to see an overlay of their kerning in white against the solution of a professional typographer which is behind in blue. This feedback of seeing their kerning in the foreground with the solution in the background shows visually how much each letter may have been misaligned, and gives the user a chance to comprehend how the solution is better created for the best readability. The user has this chance to reflect on how they could have aligned a particular letter better and recognise what they have have overlooked in a letter, such as a serif letter ‘T’ having the tail and need to be spaced closer to the next letter on the right.
Variability
The game utilises variability in three different aspects in order to teach the concept of kerning. The first aspect is in having variability in the words, and thus letter combinations the user has to kern in each round. The second variation is in the Typeface itself, where the typeface is different in each round: ranging from Gotham Black in 2000 to Baskerville Italic in 1757. The third layer of variation is in the style of the Typeface such as: medium, bold, serif, semi serif bold. Therefore, through variability in each round novice is able to develop and learn the skill of kerning letters for visually pleasing readability.
Guided Attention
On the home screen the player is given a simple arrow and dashed outline to show how a letter can be moved, to give them a basic sense of the action they need to take throughout the game to move letters. Each word is placed on a line with a faint grid in the background, which helps guid the user to see the line of the bottom of each letter, the tops of all the letters and the ending line of the first and last letter. In addition, when a user clicks on a letter, the color changes to blue and has a small horizontal arrow indicating the direction in which the letter can be moved.
How do the EDGE framework components support each other?
The components have been interlaced together to form a calming and encouraging environment for a novice to learn about the new concept of Kerning and begin able to discover the field of pleasing typography. The gamer offers the player to build their knowledge of Kerning from scratch by being able to learn through physically moving letters based on their own visual judgement. The player is able to take their time to achieve kerning to the best of their capability before being able to then receive a score and feedback through a visual comparison of their kerning against a professional typographers. The player is able to move through the game in a composed manner and explore the array of typefaces from different time periods that are given in each round. The player has their own sense of motivation to continue to better their score and be able to achieve a kerning close to a professional typographers.
What could be added?
Although the user is given feedback by seeing a comparison of their kerning against the professional solution of a typographer, they could be given further detailed feedback on the specific shape of that letter in a font, such as a written tip of paying closer attention to the letter y as it has a slant in its shape. They could also receive tips in general for each round when they receive their score, such as “notice how the tail of the letter Q is presented in the Baskerville Italic”, to help users pick up on the variability of letters across fonts and help in training their eye to notice small specific details. Another example is if the game could also present small facts about kerning such as it being about the perceived space rather than the actual space between characters. Receiving small tips, facts or notes after each round can help in the overall learning process.
In addition, the game could also consider utilizing the principle of activating preconceptions, where famous logos, icons, magazines or brandnames could be used to illustrate how they have been kerned. Players may be able to recall instances they have seen to further strengthen their learning of Kerning.
Conclusion
Overall, Kerntype is a soothing and inviting game for individuals completely new to typography. The player is able to carefully go through a series of words to kern in order to achieve the best readability, and have their solution scored and compared to the solution of a professional typographer. The game offers a wonderful opportunity to gain exposure to a wide variety of classic typefaces dating back to Baskerville which was released in 1757, as well as variation of style across these typefaces. The player has the ability to walk away with the ability to kern letters for appropriate readability and be able to recognize how different letters should be placed in relation to each other. Never heard of Kerning? This could be the game for you.
