Brand guidelinesBelka

Typography

Typography is organizing textual communication. This includes creating a typographic palette that aligns with the functional and aesthetic demands of what is being communicated.

It also includes the development of a sound formal hierarchy to stimulate an optimal understanding of the content. The correct and consistent appliance of typography ensures a recognizable tone of voice that supports the message and contributes to the brand experience.

Typefaces#

FF Real#

FF Real is the main font of Belka. We appreciate its technical look, warmth, and legibility. It is available in many weights, making it versatile for both print and screen. Belka uses FF Real Text Pro for both bodytext and headings. FF Real is designed by Erik Spiekermann, Ralph du Carrois and Anja Meiners and published by FontFont. Desktop- and webfonts are available via Adobe Fonts.

Get FF Real

Fira Mono#

Fira Mono is the secondary font of Belka. It’s a monospaced font that complements FF Real well, as it was designed by the same team that designed FF Real. Belka uses Fira Mono for displaying code samples, both inline and in codeblocks. Fira Mono is published under the SIL Open Font License. Desktop- and webfonts are available via GitHub.

Get Fira Mono

Elements#

Headings are set in the Book weight. Heading 2 and 3 have a decorative line that is drawn with an outdent (a negative indent) of 2 units. All headings, except heading 1, can be followed by an anchor icon in digital contexts.

Heading 1

Heading 1
FamilyFF Real Text Pro
WeightBook
Color#2A1F49
Size60 px
Lineheight60 px

Heading 2

Heading 2
FamilyFF Real Text Pro
WeightBook
Color#2A1F49
Size48 px
Lineheight60 px

Heading 3

Heading 3
FamilyFF Real Text Pro
WeightBook
Color#2A1F49
Size36 px
Lineheight45 px

Heading 4

Heading 4
FamilyFF Real Text Pro
WeightBook
Color#2A1F49
Size24 px
Lineheight30 px

Heading 5

Heading 5
FamilyFF Real Text Pro
WeightBook
Color#2A1F49
Size20 px
Lineheight30 px
Text-transformUppercase

Heading 6

Heading 6
FamilyFF Real Text Pro
WeightBook
Color#2A1F49
Size18 px
Lineheight30 px
Text-transformUppercase

Paragraph

Paragraph
FamilyFF Real Text Pro
WeightRegular
Color#0B051D
Size20 px
Lineheight30 px

Caption

Caption
FamilyFF Real Text Pro
WeightSemilight
Color#2A1F49
Size18 px
Lineheight30 px

Codeblock

Codeblock
FamilyFira Code
WeightRegular
Color#0B051D
Size18 px
Lineheight30 px

The blockquote is given an indent on both sides and will be placed on a slanted graphic form. See this chapter.

Blockquote

Blockquote
FamilyFF Real Text Pro
WeightRegular
Color#FA4838
Size36 px
Lineheight45 px

Unordered list

Unordered list
FamilyFF Real Text Pro
WeightRegular
Color#0B051D
Size20 px
Lineheight30 px

Ordered List

Ordered List
FamilyFF Real Text Pro
WeightRegular
Color#0B051D
Size20 px
Lineheight30 px

Table

Table
FamilyFF Real Text Pro
WeightRegular
Color#0B051D
Size20 px
Lineheight30 px

Semantics#

Emphasis & italics#

Keep the same font-color, but change the font-style to italics.

Strong & bold#

Keep the same font-color, but change the font-style to bold.

Set the font-color to #FA4838 and add underline.

Usage#

Rhythm and scale#

All dimensions, margins, and paddings are based on a 15 by 15 pixel grid. All line-heights and indents on typographic elements are multiples of 15 pixels too. Because type doesn’t follow box-sizes, font-sizes follow an arbitrary scale.

Download

Typography overview in PDF format(923 kB)Download

Alignment#

In order to ensure a clear, contemporary looking and calm reading experience, all running text should be left-aligned.

Line length#

If a line of text is too long, the reader’s eye will have a hard time focusing on the text. A line that is too short will cause the eye to travel back too often, breaking the reader’s attention.

Using FF Real for bodytext, we regard 55 characters (including spaces) as an ideal length of line. For multiple column work, a better average is 40 to 50 characters.

Casing#

Use sentence case only. In sentence case, only the first word of a sentence and proper nouns have initial capitals.

Negative text#

When light text is set on a dark background, optical corrections have to be applied. This can be done by choosing one weight lighter then you would do when selecting a font for using on a light background. For example, choose Semi-light, when you would otherwise use Regular on a light background.