FontJoy

Montserrat Generate balanced contrast Font pairing made simple Lora Generate font combinations with deep learning Hind Madurai Click (Generate) to create a new font pairing, (Lock) to lock fonts that you want to keep, and (Edit) to choose a font manually. The text is editable, try replacing it with your company name or other copy. The goal of font pairing is to select fonts that share an overarching theme yet have a pleasing contrast. Which fonts work together is largely a matter of intuition, but we approach this problem with a neural net. See Github for more technical details. How it works GithubFont visualizerLogo maker Keep in touch news related to Fontjoy and deep learning, a few times a year. Font pairing made simple Font name --- Back to fontjoy How it works Font pairing in design, font pairing with machine learning 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. What exactly is a good font pairing? This is a difficult question to answer, but we can start with an easier question - what are bad font pairings? Pairing fonts that are very similar, but just slightly different creates visual conflict. This is actually a core tenet of design - contrast is important not only in font selection but color and position as well. Fonts that share no relationship at all are not great either. Intent is another foundational aspect of design - things that look random and haphazard tend to evoke a feeling of discord (unless that's the effect you're going for) 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. Good font combinations tend to be fonts that share certain similarities, but contrast in some specific way. If we simplify this and view it from a graphical perspective, we might create a map to guide our search. Let's say that the 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) Since fonts vary by a lot more than just obliqueness and weight, we have to add more dimensions. Eg. A Z-axis for serifs vs sans-serifs. Now we have a 3D map, and 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. As the number of features increase, the dimensionality of our map increases - 4D, 5D, 6D etc. We won't be able to visualize the map past 3D, but the math is the same in all cases. 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. There could also be contrasts that are not ideal - fonts that are similar in weight, but contrast in obliqueness and serifs. 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. In machine learning terms, the coordinates on the map is a vector of features. How do we create these vectors? 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. 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. There are more details on the deep learning aspect of this project on Github HomeGithubFont visualizerGenerating colors --- Embedding Projector Open documentation Report a bug Fetching projector config... Close DATA Color by Use categorical coloring For metadata fields that have many unique values we use a gradient color map by default. This checkbox allows you to force categorical coloring by a given metadata field. Sphereize data The data is normalized by shifting each point by the centroid and making it unit norm. Load data from your computer Load data Publish your embedding visualization and data Publish Load data from your computer Step 1: Load a TSV file of vectors. Example of 3 vectors with dimension 4: 0.1\t0.2\t0.5\t0.9 0.2\t0.1\t5.0\t0.2 0.4\t0.1\t7.0\t0.8 Choose file Step 2 (optional): Load a TSV file of metadata. Example of 3 data points and 2 columns. Note: If there is more than one column, the first row will be parsed as column labels. Pokémon\tSpecies Wartortle\tTurtle Venusaur\tSeed Charmeleon\tFlame Choose file Click outside to dismiss. Publish your embedding visualization and data If you'd like to share your visualization with the world, follow these simple steps. See this tutorial for more. Step 1: Make data public Host tensors, metadata, sprite image, and bookmarks TSV files publicly on the web. One option is using a github gist. Step 2: Projector config Optional: Metadata Sprite Bookmarks template_projector_config.json { "embeddings": [ { "tensorName": "My tensor", "tensorShape": [ 1000, 50 ], "tensorPath": "https://gist.github.com/.../tensors.tsv", "metadataPath": "https://gist.github.com/.../optional.metadata.tsv" } ]} Step 3: Host projector config After you have hosted the projector config JSON file you built above, paste the URL to the config below. Path to projector config Your shareable URL Test your shareable URL Click outside to dismiss. Checkpoint: Metadata: t-SNE t-distributed stochastic neighbor embedding PCA Principal component analysis Custom Search for two vectors upon which to project all points. Dimension 2D 3D Perplexity The most appropriate perplexity value depends on the density of the data. Loosely speaking, a larger / denser dataset requires a larger perplexity. Typical values for perplexity range between 5 and 50. 30 Learning rate The ideal learning rate often depends on the size of the data, with smaller datasets requiring smaller learning rates. 10 Re-run Stop Iteration: 0 For fast results, the data will be sampled down to 10,000 points. How to use t-SNE effectively. X # Variance (%) Z # Variance (%) Y # Variance (%) PCA is approximate. Total variance For fast results, the data was sampled to 50,000 points and randomly projected down to 200 dimensions. Search by / Left / .* Enable/disable regex mode. / Right / .* Enable/disable regex mode. / Up / .* Enable/disable regex mode. / Down / .* Enable/disable regex mode. Bounding box selection Enable/disable night mode Enable/disable 3D labels mode Points: Loading... Dimension: Loading... Reset zoom to fit all points Help with interaction controls. 3D controls Rotate Mouse left click. Pan Mouse right click. Zoom Mouse wheel. Holding ctrl reverses the mouse clicks. 2D controls Pan Mouse left click. Zoom Mouse wheel. Click anywhere to dismiss. Show All Data Isolate selection Clear selection / Search / .* Enable/disable regex mode. by neighbors The number of neighbors (in the original space) to show when clicking on a point. 100 distance COSINE EUCLIDIAN Nearest points in the original space: Showing only the first 100 results... BOOKMARKS (0) Open this drawer to save a set of views of the projection, including selected points. A file containing the bookmarks can then be saved and later loaded to view them.