HOMEOUTPUTJW.SANS
Cart
0
(JW.s) Jw.Sans
A geometric and humanistic sans-serif born from frustration.
(001 — 005)
My Favorite Pangram. ever.
Pack my box with five dozen liquor jugs.
(002 — 005)
Custom "Stretch" Characters.
PACK MY BOX WITH =FIV=E DOZEN LIQU=OR JUGS.
(003 — 005)
A layout used for the screensaver promo.
Screen
scree
scre
scr
sc
s
— S
— SA
— SAV
— SAVE
— SAVER
(003 — 005)
An old layout for the archive page.
Archive
Archive
Archive
Archive
Archive
Archive
Archive
Archive
Archive
( B → 001 // 005)
GEN—
ESIS

When I started designing my site and thinking about how I wanted to represent my personal brand, I knew typography was going to be a very important piece. I tend to be very minimal and let things be more type driven, so the nuances of whatever font I used would need to convey the exactly right feeling. In searching through my catalog of fonts and what I could find around the web, I was able to land on several options that I felt were about right. As I started designing and getting to see how they felt being applied to different scenarios, I kept finding things I didn’t like about them all. Some were great in all caps, but had wonky lowercase characters. Some just had odd-ball characters that made no sense. Some didn’t have all the weights I was looking for. Some didn’t have special characters. Without boring you any further, I found reasons to not like any of them through this process of designing my brand (over 2 years.)

After a lot of churn, I came to believe I would just have to compromise on a font that I felt would be the best of whats available. With the prospects of going independent, I began to fixate on just how much more important my personal brand will be going forward. After a lot of thought, I came to the conclusion that compromising on a cornerstone of my brand was a shitty yield for the effort already poured into it. Out of frustration, I basically thought “fuck it, I should just make it myself” without any experience or understanding of actually making a font myself. So... I got the trial of FontLab. It kinda made sense. Made characters. Bought FontLab after the trial lapsed.

...and here we are: JW.Sans ® (V1.0).

( B → 002 // 005)
Charact—
ERISTICS

Having done that churn on my personal brand for years, I had a pretty good idea of the look I wanted going in. While my tastes have certainly evolved over the years, I feel I've always had these through-lines in my personal preferences:

×
Geometric
×
Clean
×
Masculine
×
Modern
×
Edgy(ish)
×
Elevated
×
Imperfect

After reading that list, you might (rightly) point out that some of those things are at odds with each other– or at least have friction. Such as 'clean' and 'imperfect' (amongst others). Two opposing characteristics can co-exist in fonts, but it's definitely a balancing act. There's a lot of different ways in which to achieve a balance within type design, and none of them appear to be an exact science... how a fonts generally 'feels' is still a bit arbitrary to me. There's a lot of people who want to create a font entirely within a quantitized system mapped to the golden ratio– but to me the result will be sterile, or kitschy depending on the base unit. Like most of my design, I landed somewhere in the realm of systemizing most aspects, but finding opportunistic (and purposeful) places to divert. I kept thinking back to my music production days and appreciating the intentionally off-beat notes that creates a swing/groove, that would in-turn add character and a humanistic element. (Listen to J Dilla's drums if you want a reference of what I'm after here.) I'm sure purist will shit on it, but I really don't care. This is not for sale, and I don't want anyone else to want this font anyways.

Knowing that I didn't want everything mathematically perfect, I would draw characters using a lot of math-based shapes and curves, but ultimately trust my eye as I modified them. In analyzing other fonts and understanding typography in general, you come to learn that different types of shapes sitting next to each other can optically effect each other. A prime example is the rounded shapes that duck below the baseline to look level with flat bottomed shapes sitting on the baseline. Things like that reinforce my belief that that I should basically trust my eye since even the fundamentals of type design already diverge from mathematical parity.

Not knowing the best workflow, I basically started designing individual characters just the way I wished other fonts would have. I started with a base design of a relatively common looking sans-serif, 'grotesque-ish' font, but then kept trying different deviations and tested how well they did or didn't interact with others (And repeat. Having looked at so many other fonts, I had an idea of how many characters I should be looking to push). With these deviations, I also left myself an 'out' by designing alt characters that I could turn on/off via custom syntaxes, activated by OpenType (more on that next) to maintain the right feel/balance.

( B → 003 // 005)
↳ Uppercase
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
( B → 004 // 005)
↳ Lowercase
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
↳ Numerals + Symbols
1
2
3
4
5
6
7
8
9
!
@
#
$
%
^
&
*
(
)
œ
´
®
¨
ˆ
ø
π
å
ß
ƒ
©
˙
˚
¬
Ω
ç
˜
µ
¡
£
¢
÷
§
Þ
↳ LigatureS
Using and Abusing opentype ligatures to more readily access obscure / custom characters, and to embed custom formatting.
(001 // 005)
Super and Subscript Numbers
(Input)
^00_0
^11_1
^22_2
^33_3
^44_4
^55_5
^66_6
^77_7
^88_8
^99_9
(output)
^00_0
^11_1
^22_2
^33_3
^44_4
^55_5
^66_6
^77_7
^88_8
^99_9
(002 — 005)
Syntax for Stretched Style Alts.
(Input)
=R
=O
=E
=T
=D
=F
=B
=A
(output)
=R
=O
=E
=T
=D
=F
=B
=A
(003 — 005)
Formatting to access various arrows
(Input)
->
<-
—>
<—
/>
</
(output)
->
<-
—>
<—
/>
</
(002 — 005)
Random Symbols I thought I'd want around.
(Input)
[shutter]
:)
[time]
[logo]
XxX
[lock]
(output)
[shutter]
:)
[time]
[logo]
XxX
[lock]
(002 — 005)
Formatting to access various arrows
(Input)
1\2
1\4
3\4
(output)
1\2
1\4
3\4
( C → 001 // 005)
Obscure
Characters

In most fonts, there's a lot of semi-common characters that I would like to use, but don't always remember how to access. A lot of time, I'd have to google "XYZ character" and copy/paste the resulting character in order to actually use them. This is a huge pain in the ass, and is enough of an inhibiter for someone as lazy as myself from ever using those characters. Or if I really really wanted to use them, I'd start guessing different combinations of shift + option + characters + numbers, and promptly waste a ton of time. It seemed like a dumb problem to have. Was that "copyright" character option + c? (Of course not, you moron... it's obviously option + g because that makes the most sense.) I wanted to understand what I could do to make this a non-issue.

While I was familiar with ligatures in common letter combinations (like ff, etc), I didn't know it was the solution to my problem. My first indication was remembering a font I had that would somehow change “-“ and “>” into →.  I really didn't know how it was technically done, but I knew that it was something I wanted in my font... and it seemed tangental to my issue at hand. And yea, after a quick look around the web of how something like that was done in FontLab, I came to understand the realities of ligatures, and how I could use them to more practically access more characters.

The idea that ligatures are created by conditionally substituting specific combinations of characters for one (or multiple) was a new concept.  I always thought it was a universal set of rules where, if 'character x' and 'character y' are used next to each other, the software would have an option to over-ride that set for something else. While that is pretty close to how it works, the key differentiation from reality is that those substitutions are all manually added to the font, and not some pre-determined set of combinations. That manual component was key.

( C → 002 // 004)
Developing
A Syntax

With that in mind, I set out to create a custom syntax/short-hand that I could use to make a lot of uncommon characters more readily accessible. I was elated that with just a little bit of work, I could permanently end my google searches and random key-combo quests. As someone who processes things visually, I started thinking of what characters I could use that resemble the character I was digging for. For example:

×
"()" to denote characters bound within a circle —>"(" + "R" +")" = (R)
×
"/" to activate up angled arrows —> "/" + ">" = />
×
"\" to activate down angled arrows —> "/" + ">" = />
×
"—" to activate long arrows —> "—" + ">" = —>, "<" + "—"=<—

Another important factor to consider when developing this syntax was to make sure I didn't accidentally trigger unwanted ligatures. Naturally this is something I found out in testing, but it helped inform decisions to develop a syntax that is both obvious, and a reliant on combinations thatI would never input in any other scenario. Seeing how the syntax was starting to take shape for pre-existing characters, my brain naturally started seeing characters as modifiers for ones thats didn't exist yet.

( C → 003 // 004)
Custom
Characters

After that first exercise in developing an actionable syntax, I saw an opportunity to bake-in character variants via ligatures. I know there’s typically options in character panels to toggle on/off style alts, but I (rightly or wrongly believed) that’s applied to text blocks as a whole. With the system I wanted to build, I could readily toggle style alts in-line without having all alt style triggered at once. This would also enable me to have multiple style alts of the same character based on different characteristics, and easily find the combination best suited for that specific instance.

The real origin for style alts as a whole came for stretched alts by adding an "=". Originally it was using a dash as the combination to activate stretch characters, but as mentioned previously, this triggered a lot of unwanted ligatures. A "-" or "–" or "—" + "X" character are all common, especially in the way that I write. An equal sign plus a character, however, that isn't something I could ever see happening unless I got back into calculus or something (which contrary to popular belief, you don't actually use in real life). Seeing as my entire site navigation was based on a horizontal movement, I alos thought stretched characters could be a nice addition to play into that lateral movement. As with anything, things quickly escalated and my brain started going a little wild with it:

×
"=" to denote characters stretch style alts —>"=" + "R" +")" = =R
×
"∆" to denote characters alternates (deltas)—> "∆" + " t" = ∆t
×
"[ ]" to activate general symbols —> "[" + "l" + "o" + "g" + "o" + "]"—> [logo]
( C → 004 // 004)
Custom
Formatting

In further working with my font, I started to see a lot of reoccurring styles in my formatting, and I again saw a way to make my life easier. With things like numbered lists, or attaching numerical values to text via super and sub-positioned numbers, I opted to make those accessible as well. This would allow me to bake common formatting needs directly into the font, such as:

×
"^" to denote characters elevated to a super script —> "^" + " 3" = ^3
×
"_" to denote characters lowered to subscript —> "_" + "4" —> _4
×
"\" to activate pre-formatted fractions —> "1" + "\" + "4" —> 1\4

There's a lot more that I'm hoping to add in with regards to formatting– I feel like I'm just scratching the surface. I full realize my SEO is going to look like jibberish, but I think thats an acceptable trade-off for what the yields are. I'll also probably bake in some ligatures to mess with anyone who tries to pirate this font :)

↳ Test Drive
Without any plans for release, Here's where you can try Jw.Sans® if you'd really like.

* Be sure to give the ligatures and custom formatting a go– it'll work :)
**And try not to press return, it will require a refresh after.

(JW.Sans — 200 — Light)
(JW.Sans — 300 — Regular)
(JW.Sans — 400 — Medium)
(JW.Sans — 600 — Bold)
(JW.Sans — 700 — Black)**

** The 700 Black weight is still very much a work in progress. My novice work-flow creates very janky base characters (based on other weights), that I then I have to go in a re-draw significant portions of it. When this prompt is gone, it's been (somewhat) fixed.

Told you not to press enter. THis is a hacked submission form,
so you'll need to refresh to get the inputs back, sorry.
Oops! Something went wrong while submitting the form.
( E → 001 // 003)
Font
UPDATES

The current version is V1.0, and even now I see tons of things that need work. I really hope for this to be a living/breathing font that continues to grow in reach, complexity and most importantly, convenience. I'm just getting started with designing my own system, so I'm sure there will be a lot more things that I want to build into the font as I put it into more extensive use.

I also am totally new at designing fonts.. so I also don't know what I don't know. I thought developing the font forms itself would be a lot of work.. let alone getting into all the kerning, kern classes, hinting, OpenType schenanigans, etc. etc. Im using this font as a guinea pig to really understand the software, and the art of typography in general. That being said, if you see something I'm doing really terribly, please tell me– I likely don't know, but would love to. I can see glaring issues with hinting and some kerning disasters, but thankfully nothing too glaring for most people not dissecting the details.

All that being said, I really don't know what if anything I'll say about the updates since this is a personal project. I'll likely update the journal with a post about what I did, what I learned, etc. etc... but since this is an internal project, I wouldn't expect much new here unless there's a breakthrough of some sort... don't hold your breath.

( E → 002 // 003)
Why no
RELEASE?

No plans to release this font at the moment for quite a few reasons:.

×
I only want it used to represent me and my 'brand'.
×
I eye balled the shit out it, you don't want it.
×
Some technical elements are leveraged from someone else's font.
×
There's so much dumb/unprofessional stuff baked into it.
×
I've always seen this as a personal experiment.

I've seen the way fonts are pirated and ripped... but please don't be those people. I know if I put anything on the web, it's ultimately available to those who are determined... but nobody should be that determined to get my first attempt at a font. It's not that good, and there's plenty of tangential alternatives that are way better. Oh and I'll prolly drag you if I find out you have it, or used it because I'm still a child.

( E → 003 // 003)
TAKE
Aways

I always knew creating a font was a huge undertaking from watching co-workers make one, but I never thought through the added exponential work as things change across 5 weights. Had I been smart, I would have gotten one font-weight done perfectly and then done the others... but I wanted to design with a number of weights and learn as I go because I'm impatient. I've found that I need to learn things the hard way to ensure they stick, and this was no different.

As mentioned, I have a lot ofthings to fix, and a lot of room to grow and improve with this font. I've been so busy scrambling to launch my 'studio' that I've been having to 1/4 to 1/2 ass most everything just to survive. It'll get better– I'll fix the hinting, the kernings, the random corners on characters, and hopefully keep pushing my custom syntax further... or maybe find some other feature to abuse.

Knowing how long this has all taken, I'd like to say I will develop more fonts, but I can't say for sure yet. I like the idea of being paid to develop one for a brand, but using spare time to develop a font is hard to justify at this point. As alluded to earlier, I'd love to talk to people if they have any additional thoughts or perspective on what I did or my views on it. This is new to me, and that makes me a n00b– thats just the way of the world.

Cart
0
(Output) Catalog