Type Neighbor

Type Neighbor is a Gatsby v3 starter with a static type tester.

Purpose

Type Neighbor is meant for type designers or foundries who use React or Gatsby for their specimen sites or portfolios. Its initial state is built with six fonts from the Google Fonts library for demonstration purposes. You can easily add your own self-hosted or hosted web fonts, adjust the CSS, and customize the json data that forms the basis of each individual type tester. It currently supports static font families or single fonts. Variable font tools and full glyph sets should be added in the future.

Getting Started

Create a Gatsby site.

Use the Gatsby CLI to create a new site, specifying this project. If you don't have the CLI installed already, see Gastby instructions.

gatsby new your-project-name https://github.com/tiotype/type-neighbor

Start developing.

Navigate into your new site's directory, install node modules, and start it up.

cd your-project-name
npm install
gatsby develop

Open the code and start customizing.

Your site is now running at http://localhost:8000.

Add Fonts

The following documentation is for self hosted web fonts. If you are using hosted fonts (such as Google Fonts or Adobe Fonts) simply @import the fonts in style.scss and continue to create your mixins and classes as referenced below.

Self-hosted fonts

Add your own self-hosted fonts to the fonts folder.

└── src
    └── assets
        └── fonts
            └── open-sans-v18-latin-regular.woff

@font-face declarations

Add the @font-face declarations for your self-hosted fonts to _webfonts.scss.

└── src
    └── assets
        └── scss
            └── _webfonts.scss

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-v18-latin-regular.woff2") format("woff2"), url("../fonts/open-sans-v18-latin-regular.woff")
      format("woff");
}

Mixins

Add font mixins to _mixins.scss.

└── src
    └── assets
        └── scss
            └── _mixins.scss

@mixin open-sans-regular {
  font-family: "Open Sans", serif;
  font-weight: 400;
  font-style: normal;
}

Font classes

Add font classes to _collection.scss.

└── src
    └── assets
        └── scss
            └── _collection.scss

.open-sans-regular {
  @include open-sans-regular;
}

Customize Homepage

Add your fonts to the homepage

The homepage font list is populated by data from fonts.json. Add each font's data to the fonts object in fonts.json.

└── src
    └── data
        └── fonts.json

{
  "fonts": [
    {
      "fontName": "Open Sans",
      "route": "open-sans",
      "type": "family",
      "className": "open-sans-regular"
    }
  ]
}

Customize Testers

Add tester data for each font

Each font tester imports data from its own json object. Create these json objects in json files in the data folder. For each font within a font family, create an array in that object.

└── src
    └── data
        └── openSans.json

{
  "openSans": [
    {
      "fontName": "Open Sans",
      "singleName": "Regular",
      "route": "open-sans-regular",
      "type": "single",
      "className": "open-sans-regular",
      "textDefaultBig": "The meeting felt that…",
      "textBig": "The meeting felt that…",
      "textDefaultSmall": "Aa",
      "textSmall": "Aa",
      "sizeMinBig": "0.4",
      "sizeMaxBig": "15.0",
      "sizeValueDefaultBig": "6.0",
      "sizeValueBig": "6.0",
      "sizeStepBig": "0.05",
      "sizeMinSmall": "0.4",
      "sizeMaxSmall": "15.0",
      "sizeValueDefaultSmall": "6.0",
      "sizeValueSmall": "6.0",
      "sizeStepSmall": "0.05",
      "lineHeightMinBig": "0.8",
      "lineHeightMaxBig": "3.0",
      "lineHeightValueDefaultBig": "1.4",
      "lineHeightValueBig": "1.4",
      "lineHeightStepBig": "0.05",
      "lineHeightMinSmall": "0.8",
      "lineHeightMaxSmall": "3.0",
      "lineHeightValueDefaultSmall": "1.4",
      "lineHeightValueSmall": "1.4",
      "lineHeightStepSmall": "0.05"
    }
  ]
}

While all the properties can be customized, the list below is a reference for the properties that are most useful to adjust for each individual font within a family.

Type Neighbor uses breakpoints from Bootstrap 5. See Bootstrap 5 Breakpoints.

// Font Info
fontName: The name of font family
singleName: The name of the individual font within family (e.g. weight or style)
route: The route for navigation
className: The class name of the individual font (referenced in _collection.scss)

// Specimen Text
textDefaultBig: The default specimen text used when tester is reset (on medium, large devices)
textBig: The initial specimen text used on tester page (on medium, large devices)
textDefaultSmall: The default specimen text used when tester is reset (on small devices)
textSmall: The initial specimen text used on tester page (on small devices)

// Font Size
sizeValueDefaultBig: The default specimen font size when tester is reset (on medium, large devices)
sizeValueBig: The initial specimen font size used on tester page (on medium, large devices)
sizeValueDefaultSmall: The default specimen font size when tester is reset (on small devices)
sizeValueSmall: The initial specimen font size used on tester page (on small devices)

Add tester page for each font

The properties in the json objects correspond to the controls on each font's type tester page.

└── src
    └── pages
        └── fonts
            └── open-sans.js

Map items from json object.

useEffect(() => {
  setFonts(
    fontsData.openSans.map(item => ({
      ...item,
      overflow: true,
      alignmentBig: "text-left",
      alignmentSmall: "text-center",
    }))
  )
}, [])

Sample of font properties in font tester controls.

<input
  type="range"
  name="line-height"
  min={item.lineHeightMinBig}
  max={item.lineHeightMaxBig}
  value={item.lineHeightValueBig}
  step={item.lineHeightStepBig}
  className="form-range range line-height"
  aria-label="Line Height"
  onChange={event => onLineHeightChangeBig(i, event)}
></input>

License

This project is licensed under the MIT License - see the LICENSE.md file for details

tiotype / type-neighbor