Coding a logo
Designing a personal brand using just a text editor
For several years now, I have been using my own personal brand, which I sketched out in my spare time when I was bored. It is a very simple logo, without pretensiousness, created with the aim of personalizing my communication and giving a visual identity to my personal projects.
When it came to digitizing the idea, I was faced with a choice: should I use traditional, commercial graphics software or alternative, open-source software such as Inkscape and Penpot? In either case, the idea was to spend an afternoon dragging around vectors, shapes, and rectangles until I came up with something I was happy with.
My designer-nerd side wasn’t entirely satisfied with the idea of having to do everything in the traditional way, and as a keen optimizer, I liked the idea of programming my own logo.
Coding a logo
The reason I decided to write code to design my logo was that a programming approach would force me to think differently.
In this, I was inspired by the philosophy of John Maeda and his famous Design by Numbers. Although he himself admits, “I realized how uninteresting it is to program,” it is precisely this methodical rigor that allows us to define a deeper and more intrinsic relationship between the parts that make up a sign. It wasn’t just a matter of drawing lines in graphics software, but of establishing a connection of precise and scalable proportion and geometry.
I wanted the process to be transparent, and for the original and final files to be open and editable. I also wanted total control over the process that generated them, without depending on a subscription or software that calls home and quickly becomes outdated.
Even worse: the idea of not being able to use my files in a few years because they were locked in some cloud that was no longer accessible terrified me.
For this reason, I chose to use a text editor to write my logo in code form and process it with FOSS software. It wasn’t just a matter of saving money, but a matter of principle.
In the end, I live to innovate.
And I love to learn new things!
The creative process
The idea came to me a few years ago, when I sketched the initial letters of my name, F and S, in a notebook. I stylized them with straight lines and right angles and precise proportions.
I took the sketch and tried to imagine different possibilities:
- square
- circular
- square, negative
- circular, negative
I also wanted to be able to use it on traditional and digital media:
- a stamp
- business card
- letterhead
- favicon
- website
- avatar
Designing my personal brand and testing it in different forms and across multiple media using graphics software seemed to me to be an inefficient and very repetitive way of doing things.
Programming it turned out to be the best strategy.
In fact, once I had put it into code, I was able to quickly test the results on a series of guidelines and templates that I had defined at the beginning.
First prototype of the logo written in LaTeX
The first crazy idea I had was to use LaTeX to code the logo. Or rather TikZ, which is a language for producing vector images and illustrations to be included in LaTeX.
The choice to use LaTeX is not accidental, given that I have been using it since university to write documents, letters, and even photobooks. I learned to write code in LaTeX even before learning to write semantic languages such as HTML and then CSS.
LaTeX was the training ground that allowed me to train my eye to distinguish the structure of information from its graphic design. At the time, it was precisely this approach that made me understand that content and presentation are two distinct entities: a vision that radically changed the way I design, leading me to define not only the object, but also the rules that generate it.
Writing the logo in LaTeX would allow me to easily include it in documents, as well as export it in different formats.
So I wrote two functions: one for the circular version of the logo and the other for the square version, both in positive and negative variants.
The following is only the function for printing the logo in square format:
% FS-logo-square.tex
%
\definecolor{logoBlack}{rgb}{0.1,0.1,0.1}
\definecolor{logoWhite}{rgb}{1,1,1}
\newcommand{\FSlogoSquare}[3]{
\begin{tikzpicture}[scale=#1]
% Initialize variables
\def\lineColor{none}
\def\borderColor{none}
\def\bgColor{none}
\def\bgOpacity{0}
% Is black?
\ifthenelse{\equal{#2}{black}}{
\ifthenelse{\equal{#3}{default}}{
% Black is the default
\def\lineColor{logoBlack} % Black letters
\def\borderColor{logoBlack} % Black ouline
\def\bgColor{logoWhite} % Background
\def\bgOpacity{0} % Opacity 0 = transparent
}{
% Black negative
\def\lineColor{logoWhite} % White letters
\def\borderColor{logoBlack} % Black outline
\def\bgColor{logoBlack} % Black background
\def\bgOpacity{1} % Full opacity
}
}{
% Is white?
\ifthenelse{\equal{#3}{default}}{
% White is the default
\def\lineColor{logoWhite} % White letters
\def\borderColor{logoWhite} % White outline
\def\bgColor{logoBlack} % Background
\def\bgOpacity{0} % Opacity 0 = transparent
}{
% White negative
\def\lineColor{logoBlack} % White letters
\def\borderColor{logoWhite} % White outline
\def\bgColor{logoWhite} % White background
\def\bgOpacity{1} % Full opacity
}
% Outline
\draw [line width={5mm*#1}, \borderColor] (-4.75,-4.75) rectangle (4.75,4.75);
% Background
\fill [\bgColor, opacity=\bgOpacity] (-4.5,-4.5) rectangle (4.5,4.5);
\ifthenelse{\equal{#3}{default}}{
% Letter F
\draw[\lineColor, line width={5mm*#1}]
(-2,-3) -- (-2,2.5) -- (-0.5,2.5);
% Letter S
\draw[\lineColor, line width={5mm*#1}]
(0,-2.75) -- (1.25,-2.75) -- (1.25,2.5) -- (2.5,2.5);
}{
% F - line only
\draw[\lineColor, line width={5mm*#1}]
(-2,-3) -- (-2,2.5) -- (-0.5,2.5);
% S - line only
\draw[\lineColor, line width={5mm*#1}]
(0,-2.75) -- (1.25,-2.75) -- (1.25,2.5) -- (2.5,2.5);
}
\end{tikzpicture}
}
I then created a guideline document in which I collected the different versions and renderings of the logo, variants, sizes, and templates for letterhead and business cards.
The great advantage of creating the logo in this way allowed me to refine the details, simply by modifying the original function and recompiling the guidelines. In a single document, I had everything I needed to make decisions and iterate with the design process.
For example, it allowed me to realize that I wasn’t crazy about the circular version and that I would never use it. The same goes for the negative variant, the one without a border.
And I continued in this direction.
The final result in LaTeX was perfect both on printed paper and on the web. However, the code is verbose and certain conversion mechanisms, require multiple steps.
The real hurdle turned out to be the use of the logo in other documents. Although I had chosen LaTeX precisely for its compatibility with my old templates, convinced that a shared ecosystem would streamline the work, the technical implementation was anything but straightforward.
I was wrong. After my first attempts at integration and several mistakes, disappointment drove me to find a simpler and more effective solution.
As much as I consider myself a designer with a nerdy heart who loves writing code, I am still a designer, and my limited programming skills and frustration at not being able to achieve my initial vision were difficult to manage on an emotional level.
Typst, the perfect synthesis of code and design
It is a markup language that, like LaTeX, focuses entirely on the separation of content and form.
Initially, I was very skeptical: being a young project that had only just started in 2023, I still considered it immature. The idea of investing time and energy in learning such a young tool, honestly, scared me.
After the classic “Hello world,” I quickly became familiar with this language and began converting my main templates and logo.
The alternative to Tikz in Typst is called Cetz and allows you to define vector images from code. As an example, the current code for generating my personal brand is defined by:
// FS logo
#import "@preview/cetz:0.4.2"
#let fs-logo = [
#cetz.canvas(length: 1cm, {
import cetz.draw: *
// Background
set-style(fill: white, stroke: none)
rect((-5, -5), (5, 5))
// Square
set-style(fill: black, stroke: none)
rect((-5, -5), (-4.5, 5))
rect((4.5, -5), (5, 5))
rect((-4.6, 4.5), (4.6, 5))
rect((-4.6, -5), (4.6, -4.5))
// Letter F
rect((-1.76, 2.5), (-0.75, 3))
rect((-2.25, -3), (-1.75, 3))
// Letter S
rect((1, 2.5), (2.5, 3))
rect((1, -2.6), (1.5, 2.6))
rect((0, -3), (1.5, -2.5))
})
]
#let fs-logo-standalone = [
#set page(width: auto, height: auto, margin: 0cm)
#fs-logo
]
#fs-logo-standalone
I quickly converted all my templates to this language; managing logo integration and manipulating proportions with surgical precision is no longer an obstacle, but an immediate and natural operation.
From logical rigor to human gesture
Choosing to program my visual identity turned out to be the best decision in the end. I transformed a potentially repetitive and “tedious” process—to quote Maeda—into a logical, versionable system capable of maintaining absolute consistency across every platform, from print to the web.
Stepping outside the comfort zone of commercial tools to embrace open alternatives is a powerful creative choice: it means regaining total control over your work, transforming design into an architecture of rules and relationships rather than simply manipulating vectors and pixels.
However, to balance this digital rigor, I felt the need for a human touch.
I ordered a stamp with my logo so I could print my own business cards, which are strictly handmade.
It’s a human, analog and unique gesture that I use to personalize every postcard, letter, or photo print in an increasingly digital and standardized world.
