Skip to content

Commit

Permalink
Prepare v1.003 release, update builds, update documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
burodepeper committed Oct 19, 2017
1 parent ff73dbb commit e3d2b59
Show file tree
Hide file tree
Showing 49 changed files with 719 additions and 235 deletions.
127 changes: 35 additions & 92 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,123 +1,66 @@
# Fifteen

![](images/fifteen-sample.png)
Website: https://burodepeper.github.io/fifteen/

Fifteen is a proportionally sized typeface optimized for source code. It was initially developed as an experiment in font metrics and has since evolved as my personal typeface for both source code and identity. As such, it is still very much under active construction and receives frequent updates.

## A typeface designed for source code
---

Fifteen needs a little time to get used to. It differs from traditional typefaces for source code in two distinct ways: it is proportionally sized, and it doesn't strictly use the baseline to align the characters to.
## Usage

Reading source code in characters that are aligned in a grid (as monospaced typefaces are) has its advantages, which is why it is the default approach. It has certain disadvantages too though that simply can't be solved within a monospaced grid. The limited space within the fixed size of a glyph box restricts the possibilities to make clear distinctions between similar looking characters (i.e. uppercase O vs. the number 0). Besides cramming as much information in a limited area, that fixed size also dictates the horizontal rhythm of your code. It makes it harder to read code as a natural language. Proportionally sized typefaces have the potential to solve these two issues. The primary downside to them is losing the ability to align your code, apart from leading whitespace, which is obviously not an issue.
### Downloads (.ttf and webfont)

Fifteen is designed on a 15px tall grid, of which 7px are used for the x-height, with a stroke width of 1px for Regular (1.5px for Bold, and 0.5px for Light). The glyphs themselves are constructed from simple geometric shapes, to stay close to the conceptual shape of their respective characters; i.e. an o is a circle.
Check the [releases](https://github.com/burodepeper/fifteen/releases) for the latest stable version, or browse the most recent [build](https://github.com/burodepeper/fifteen/tree/master/build) in the repository.

However, the thing you either love or hate about Fifteen, is the vertical alignment of the characters; or rather, the fact that numbers and capitals aren't aligned to the baseline. Instead, (almost) everything is vertically centered, creating visually pleasing horizontal kebabs of code.

![](images/sample-alignment.png)

## Character sets and font variants

Regarding characters: ASCII > Latin > Greek & Cyrillic

Regarding weights: Regular > Bold > Light
### Webfont via CDN

I have plans for making tests (of the ASCII subset) for a monospaced, italics, and one classically aligned to the baseline. These tests have low priority though.
Add the following snippet to the `<head>` of your website. You can now use `font-family: 'Fifteen-Web', sans-serif;` in your CSS.

Fifteen currently comes in at a little over a thousand glyphs, most of them available in Regular, Bold and Light. The table below displays various character sets and how well they are covered.
By default, only the most used characters are included in the default webfont, and it is also limited to Regular (400), Bold (700) and Thin (100). Alternative endpoints can be found with a little digging.

| Character Set | Glyphs | Regular | Bold | Light | Coverage |
| --- | --- | --- | --- | --- | --- |
| ASCII | 95 | 95 | 95 | 95 | **100%** |
| Windows 1252 | 217 | 217 | 217 | 217 | **100%** |
| Mac Roman | 242 | 242 | 242 | 242 | **100%** |
| WGL4 | 655 | 655 | 564 | 534 | 89.2% |
| MES-1 | 335 | 335 | 335 | 335 | **100%** |
| Google Fonts Core | 216 | 216 | 216 | 216 | **100%** |
| Google Fonts Plus | 370 | 370 | 370 | 370 | **100%** |
| Google Fonts Pro | 145 | 145 | 143 | 143 | 99.1% |
```html
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fifteen/build/web/Fifteen-Web.css'>
```

\*) These numbers are (somewhat) accurate as of 2017-10-11
[![](https://data.jsdelivr.com/v1/package/npm/fifteen/badge)](https://www.jsdelivr.com/package/npm/fifteen)

## Downloads and webfont
---

Check the [releases](https://github.com/burodepeper/fifteen/releases) page for the most recent 'official' builds. You can find versions for both desktop and webfont usage there.
## Issues and suggestions

If you want the latest of the latest, you can find the most recent builds in the [build](https://github.com/burodepeper/fifteen/tree/master/build) directory. Note that these builds will most likely contain bugs and glitches.
If you run into any issue, or if you have a suggestion on how to improve fifteen, please [submit it as an issue](https://github.com/burodepeper/fifteen/issues) or email me at <david@burodepeper.nl>.

The latest stable release (v1.002) contains the subsets ASCII, Latin-1 Supplement and Google Fonts Core for a total of 216 glyphs. If you want the full width, you'll have to build the fonts yourself.
### Planned changes and improvements

### Webfont via CDN
- Italic variants
- Extra Bold (800) and Black (900) variants
- Improved spacing and kerning; a continuous effort
- Extend glyphs to cover MES-2 and more punctuation, mathematics and various symbols
- Improved hinting
- Custom subsets/builds for webfonts
- Alternate glyph designs
- Improved distinction between ASCII and similar characters

Include the following line in your `<head>` and then use `font-family: "Fifteen-Web"` in your CSS. Bold (`font-weight: 700`) and Light (`font-weight: 300`) are included.
Check the [TODO](https://github.com/burodepeper/fifteen/tree/master/TODO.md) for additional specifics.

```html
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fifteen/build/web/Fifteen-Web.css'>
```

[![](https://data.jsdelivr.com/v1/package/npm/fifteen/badge)](https://www.jsdelivr.com/package/npm/fifteen)

## Development
### Known issues

Fifteen is primarily developed as my personal typeface, and most considerations made are based on my environment and obviously heavily opinionated. I tend to tweak things almost on a daily basis, to get it _just right_.
- Glyphs with (complex) diacritics will most likely be clipped in certain software, especially on Windows.

I've made it publicly available, both in source and usage, because I believe it has grown to a point where it could be interesting to others. I welcome and appreciate your feedback and suggestions.
---

### Contributions
## Development and contributions

If you are interested in contributing to this project, I very much welcome you, but please contact me first via this repo. Because of the personal nature of this project, it would be a shame if your contribution wouldn't be used.
Because of the personal nature of this project, I am open, but also somewhat reluctant towards (substantial) contributions. Suggestions of whatever kind are _very welcome_!

Fifteen is designed and developed using [Glyphs](https://www.glyphsapp.com) which is a prerequisite for working from source.

### Focus of further development

Below is a summary of my current aims and interests.

- [ ] **Maintenance**
- [ ] Share glyph bearings (instead of kerning)
- [ ] Kerning and spacing
- [ ] Consecutive `###`
- [ ] `sp`, `sh`
- [ ] `Wi`
- [ ] `pp`
- [ ] `□■`
- [ ] `rA` `yA` `vA` `wA` `oA`
- [ ] `eV` `oV` `oY`
- [ ] `Fo`
- [ ] `Li`
- [ ] `Gl`
- [ ] `Ke`
- [ ] `As`
- [ ] Better re-use of components
- [ ] Switch to Open Font License?
- [ ] **Glyph Design**
- [ ] **Character set compliancy**
- [ ] WGL4
- [ ] Bold
- [ ] Light
- [ ] Google Fonts Pro
- [ ] Bold
- [ ] Light
- [ ] **ASCII improvements**
- [ ] `W` (U+0057): less wide
- [ ] `w` (U+0077): less wide
- [ ] Greek
- [ ] Cyrillic
- [ ] **Alternatives** for:
- [ ] `a`: circle with small stem
- [ ] `g`: old-fashioned g
- [ ] **Variants**
- [ ] Mono (experiment with ASCII at first, perhaps a larger subset at a later stage)
- [ ] Baseline (ASCII characters aligned to baseline, as a test)
- [ ] Italic (just ASCII at first)
- [ ] Bold Italic
---

### Known issues

- Glyphs with (complex) diacritics will most likely be clipped in certain software, especially on Windows.
## License and voluntary conditions

## License
Fifteen is released under the [MIT License](LICENSE). I'm looking into switching to using the Open Font License, but that shouldn't change anything.

Fifteen is released under the [MIT License](LICENSE).
While not strictly part of the license, if you intend to use Fifteen in a commercial project, a voluntary donation towards further development of fifteen, or a charity focused on the environment, is welcomed.

While not strictly part of the license, if you intend to use Fifteen in a substantial way, I obviously like to hear about it.
If you end up using fifteen in whatever capacity, I'd very much like to hear about it.
74 changes: 60 additions & 14 deletions TODO.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,65 @@
# TODO

## General goals
- [ ] Light variant
- [ ] Italics for Regular, Bold and Light
- [ ] Hosting webfont via npmjs.org and jsDelivr
- [ ] Bold and Light of Greek
- [ ] Cyrillic alphabet
## Kerning

## Glyphs to be added
- [ ] Consecutive `###`
- [ ] `sp`, `sh`
- [ ] `Wi`
- [ ] `pp`
- [ ] `□■`
- [ ] `rA` `yA` `vA` `wA` `oA`
- [ ] `eV` `oV` `oY`
- [ ] `Fo`
- [ ] `Li`
- [ ] `Gl`
- [ ] `Ke`
- [ ] `As`
- [ ] `COUNT`
- [ ] `LAZY`
- [ ] `SEVEN`
- [ ] `ГД`
- [ ] `n-W`

## Glyph (re)design
- [ ] lowercase `w` (U+....)
- [ ] lowercase `y` (U+....)
## Alternate glyphs

## Kerning
- [ ] lowercase `a` (U+....) and `l` (U+....) and similar
- [ ] comma `,` (U+....)
- [ ] In programming `i++`, the first `+` feels too snug to the i
- [ ] `a`: circle with small stem
- [ ] `g`: old-fashioned g

## Improve distinction from ASCII characters

- [ ] `A`
- [ ] `B`
- [ ] `E`
- [ ] `3`
- [ ] `K`
- [ ] `M`
- [ ] `N`
- [ ] `H`
- [ ] `O`
- [ ] `P`
- [ ] `C`
- [ ] `T`
- [ ] `X`
- [ ] `Y`
- [ ] `S`
- [ ] `Z`
- [ ] `I`
- [ ] `a`
- [ ] `e`
- [ ] `o`
- [ ] `p`
- [ ] `c`
- [ ] `x`
- [ ] `s`
- [ ] `i`
- [ ] `j`
- [ ] `y`
- [ ] `u`

## Webfonts

- [ ] Automate buildings subsets with a limited character set to reduce the size of the downloads

## Maintenance

- [ ] Set parameters for position and size of the underline
Binary file modified build/ttf/Fifteen-Bold.ttf
Binary file not shown.
Binary file modified build/ttf/Fifteen-ExtraLight.ttf
Binary file not shown.
Binary file modified build/ttf/Fifteen-Light.ttf
Binary file not shown.
Binary file modified build/ttf/Fifteen-Medium.ttf
Binary file not shown.
Binary file modified build/ttf/Fifteen-Regular.ttf
Binary file not shown.
Binary file modified build/ttf/Fifteen-SemiBold.ttf
Binary file not shown.
Binary file modified build/ttf/Fifteen-Thin.ttf
Binary file not shown.
Binary file modified build/web/Fifteen-Bold.woff
Binary file not shown.
Binary file modified build/web/Fifteen-Bold.woff2
Binary file not shown.
Binary file modified build/web/Fifteen-ExtraLight.woff
Binary file not shown.
Binary file modified build/web/Fifteen-ExtraLight.woff2
Binary file not shown.
Binary file modified build/web/Fifteen-Light.woff
Binary file not shown.
Binary file modified build/web/Fifteen-Light.woff2
Binary file not shown.
Binary file modified build/web/Fifteen-Medium.woff
Binary file not shown.
Binary file modified build/web/Fifteen-Medium.woff2
Binary file not shown.
Binary file modified build/web/Fifteen-Regular.woff
Binary file not shown.
Binary file modified build/web/Fifteen-Regular.woff2
Binary file not shown.
Binary file modified build/web/Fifteen-SemiBold.woff
Binary file not shown.
Binary file modified build/web/Fifteen-SemiBold.woff2
Binary file not shown.
Binary file modified build/web/Fifteen-Thin.woff
Binary file not shown.
Binary file modified build/web/Fifteen-Thin.woff2
Binary file not shown.
7 changes: 7 additions & 0 deletions build/web/Fifteen-Web.basic.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Regular.woff2') format('woff2'),
url('Fifteen-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
32 changes: 0 additions & 32 deletions build/web/Fifteen-Web.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,6 @@
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-ExtraLight.woff2') format('woff2'),
url('Fifteen-ExtraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Light.woff2') format('woff2'),
url('Fifteen-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Regular.woff2') format('woff2'),
Expand All @@ -30,22 +14,6 @@
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Medium.woff2') format('woff2'),
url('Fifteen-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-SemiBold.woff2') format('woff2'),
url('Fifteen-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Bold.woff2') format('woff2'),
Expand Down
55 changes: 55 additions & 0 deletions build/web/Fifteen-Web.full.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Thin.woff2') format('woff2'),
url('Fifteen-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-ExtraLight.woff2') format('woff2'),
url('Fifteen-ExtraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Light.woff2') format('woff2'),
url('Fifteen-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Regular.woff2') format('woff2'),
url('Fifteen-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Medium.woff2') format('woff2'),
url('Fifteen-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-SemiBold.woff2') format('woff2'),
url('Fifteen-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'Fifteen-Web';
src: url('Fifteen-Bold.woff2') format('woff2'),
url('Fifteen-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
Loading

0 comments on commit e3d2b59

Please sign in to comment.