Fontjoy

Fontjoy is a font generator that helps the user to easily create a font pairing for a design project. For creative content services, please visit our website: https://www.artmiker.com

1. FONTJOY
• artmiker •
Produced by Artmiker Studios on:June 5, 2023. All Intellectual Property mentioned in this document are owned by their own respective owners. All Rights Reserved.
Font pairing made simple

2. Fonts are more than just a collection of letters; they are an expression
of style, mood, and personality.

Fonts are the visual embodiment of written communication,
influencing the way we perceive and interpret text.

From elegant and sophisticated scripts to bold and assertive sans-serifs,
fonts have the power to convey emotions, establish brand identities,
and enhance the overall reading experience.
Introduction

3. What is FONTJOY?
●Fontjoy is a font generator that helps
the user to easily create a font pairing
for a design project.
https: fontjoy

4. Font Pairing
●The goal of font pairing is to select fonts that share an
overarching theme yet have a pleasing contrast.
●Font pairing is a classic problem in the design world. Different
fonts can be used to draw attention, lead the eye, or even form the
foundations of a brand identity.
https: fontjoy

5. What are BAD font pairings?
●Pairing fonts that are very
similar, but just slightly
different creates visual conflict.
●Fonts that share no
relationship at all are not great
either.
●Things that look random and
haphazard tend to evoke a
feeling of discord (unless that's
the effect you're going for).
https: fontjoy

6. What Makes a GOOD Font Pairing?
●A common way to combine fonts is to use
fonts in the same family, or created by the
same designer.
●Another approach is to match various
typographic measures, like x-height and
ascenders/descenders.
●Contrast is important not only in font selection
but color and position as well.
●Good font combinations tend to be fonts that
share certain similarities, but contrast in
some specific way.
https: fontjoy

7. Graphical Perspective
●Y-axis represents the font weight, and
the X-axis the obliqueness.
●The fonts on the opposite sides of the
graph are possibly good pairings
because they have a lot of contrast. The
farther away they are from each other,
the more they contrast.
●Font pairs that are both far from each
other and oriented vertically/horizontally
are better candidates, because they
share one dimension in common (similar
weight or similar obliqueness).
https: fontjoy

8. Graphical Perspective
●Fonts vary by a lot more than
just obliqueness and weight, we
have to add a Z-axis for serifs vs
sans-serifs.
●Like before, our best candidates
are on opposite sides of the
graph but run parallel to the
axes. We might opt to keep
going and add more dimensions
for things like font width, letter
spacing, ligatures and so on.
https: fontjoy

9. Graphical Perspective
●Following this formula, we can
systematically find fonts that share
similarities but contrast in a key
way - eg. similar in obliqueness
and serifs, but different weights.
●Not all of these axes of contrast will
be visually pleasing, but the map
can serve as a guide to find unique
and sometimes surprising
relationships between fonts.
https: fontjoy

10. How It Works
●In machine learning terms, the coordinates on the map is a vector of
features.
●In simplistic cases we could go through all the fonts we have, and
rank them from boldest to thinnest. This might be a lot of work, but
doable for one person.
●If we have 10, 20 or even more features to grade, things become
more unwieldy and require some computer assistance.
●To automatically extract features, a common approach is to use a
deep neural net.
https: fontjoy

11. How It Works
●With this approach we don't actually need to specify which features
we want, rather the deep learning model discovers the features for
itself and we use the resulting data as our map.
https: fontjoy

12. Font Vectors
●Font vectors are a form of transfer learning that can be used to
create novel font combinations.

source: github.com/Jack000/fontjoy#readme

13. Font Vectors
●Extracting feature vectors from images isn't an entirely new idea.
You take an image, put it through a fixed feature extractor and get a
representative vector on the other side.
●If we use images of fonts, we get a vector that encodes the visual
information of the font.
●The font vector is an abstract representation of what the font looks
like. Because it's just a vector we can use vector arithmetic to
compare different fonts.
source: github.com/Jack000/fontjoy#readme

14. Font Vectors
●You can create feature vectors with a couple of lines in keras:

source: github.com/Jack000/fontjoy#readme

15. Font Vectors
●For font comparison, designers often use words like "Handgloves"
which contain typographically distinguishing letters like e, a and n.
●Since a mnemonic word isn't necessary for a machine learning
algorithm, we used a grid of important letters.
source: github.com/Jack000/fontjoy#readme

16. Font Vectors
●We treated each variant as a separate font, so the weights can be
included in the font vector. There are 1883 different fonts in the
dataset (from Google webfonts).
●The simplest usage of Font Vector is for visual similarity search:
source: github.com/Jack000/fontjoy#readme

17. Font Vectors
●If you've heard of word vectors, you've probably seen something like this:
source: github.com/Jack000/fontjoy#readme

18. Font Vectors
●It turns out we can do something similar with font vectors:
source: github.com/Jack000/fontjoy#readme

19. Font Vectors
●Through vector arithmetic we can isolate the features that represent
visual concepts like serifs, obliqueness, and weight - or even more
abstract concepts like legibility, kerning and color.
●One of the more interesting things we can do with font vectors is
font pairing, or the problem of selecting fonts that work together in a
design.
source: github.com/Jack000/fontjoy#readme

20. Font Pairing
Contrasting fonts can be used to emphasize a message or to guide the
eye and create visual interest.
source: github.com/Jack000/fontjoy#readme

21. Font Pairing
●We want fonts that contrast with each other, yet share certain
similarities.
●Fonts that resemble each other create an uncomfortable discord,
but wildly contrasting fonts look haphazard and unintentional.
source: github.com/Jack000/fontjoy#readme

22. Font Pairing
●Here we reach a small issue - the metrics that are commonly used
for vector comparison don't convey this concept of balance very well:
○Each person who logs in to Studio should have their own user.
oEuclidean distance (are the vectors similar in direction and
magnitude?)
oHamming distance (are the vectors roughly similar?)
source: github.com/Jack000/fontjoy#readme

23. Font Pairing
●All these are great for finding similar or contrasting fonts, but our
ideal match has similarities and contrasts in equal measure.
●So we have to make up our own similarity metric:
source: github.com/Jack000/fontjoy#readme

24. Font Pairing
●This is just the cosine distance split into two halves - the positive bits
and the negative bits. By doing this our similarity measure will
reward both similarities and dissimilarities - ie. we'll get fonts that
are very similar in some respects but very different in other respects.
source: github.com/Jack000/fontjoy#readme

25. Font Pairing
●The contrasting pairings that are
produced in this fashion don't
always work together (clearly not
all axis of contrast are visually
pleasing), but the hit rate is
surprisingly high.
source: github.com/Jack000/fontjoy#readme

26. Font Pairing
●Another consideration for body text
is legibility - many fonts that are
suitable for titles aren't very
readable at small sizes.
●To get the best balance between the
3 fonts we can try to optimize for
best overall contrast, while weighing
the legibility of the body font as a
secondary factor.
source: github.com/Jack000/fontjoy#readme

27. Citations:
Fontjoy. (n.d.). Retrieved May 08, 2023, from https://fontjoy.com
How it works. (n.d.). Retrieved May 08, 2023, from https://fontjoy.com/pairing/
Github. (n.d.). Retrieved May 08, 2023, from https://github.com/Jack000/fontjoy#readme

28. FOR CREATIVE CONTENT & CONSULTANCY SERVICES, PLEASE VISIT:
www.artmiker.com

29. END of SLIDE
www.artmiker.com