Typography¶

Typography is a fundamental element of our visual identity. Consistent use of the correct typographic families ensures readability and reinforces brand recognition.

Primary Typeface Family¶

Plus Jakarta Sans¶

Plus Jakarta Sans is the official typeface of Bluu. It is a modern, clean, and highly readable sans-serif font, ideal for both digital interfaces and printed materials.

Characteristics

Style: Modern geometric sans-serif
Designer: Tokotype
License: Open Font License (SIL OFL)
Availability: Google Fonts, Adobe Fonts
Available weights: 200, 300, 400, 500, 600, 700, 800

Downloads¶

Google Fonts
Variable Font: Supports variable weights for optimization

Weights and Uses¶

Weight	Value	Primary Use
ExtraLight	200	Decorative text, large subtitles
Light	300	Quotes, secondary text
Regular	400	Main body text
Medium	500	Moderate emphasis, subtitles
SemiBold	600	Subtitles, secondary headings
Bold	700	Main titles, buttons
ExtraBold	800	Featured headlines, limited use

Typographic Hierarchy¶

For Web and Applications¶

Headings¶

/* H1 - Main Title */
h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1A1A1A;
}

/* H2 - Secondary Title */
h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

/* H3 - Subtitle */
h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0;
  color: #1A1A1A;
}

/* H4 - Minor Subtitle */
h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 20px;
  line-height: 1.5;
  color: #1A1A1A;
}

/* H5, H6 - Small Subtitles */
h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 16px;
  line-height: 1.5;
  color: #2D2D2D;
}

Body Text¶

/* Body - Main Text */
body, p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400; /* Regular */
  font-size: 16px;
  line-height: 1.6;
  color: #1A1A1A;
}

/* Large Text */
.text-large {
  font-size: 18px;
  line-height: 1.7;
}

/* Small Text */
.text-small {
  font-size: 14px;
  line-height: 1.5;
  color: #4A4A4A;
}

/* Caption */
.caption {
  font-size: 12px;
  line-height: 1.4;
  color: #8A8A8A;
}

Interactive Elements¶

/* Buttons */
button, .button {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 16px;
  letter-spacing: 0.01em;
}

/* Links */
a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500; /* Medium */
  text-decoration: underline;
  color: #3747B0;
}

/* Labels */
label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 14px;
  color: #2D2D2D;
}

For Print¶

Titles¶

Element	Font	Weight	Size	Use
Headline	Plus Jakarta Sans	700	36-48pt	Covers, main titles
Title 1	Plus Jakarta Sans	700	24-32pt	Main sections
Title 2	Plus Jakarta Sans	600	18-22pt	Subsections
Title 3	Plus Jakarta Sans	600	14-16pt	Minor subtitles

Body¶

Element	Font	Weight	Size	Leading
Body	Plus Jakarta Sans	400	10-12pt	14-16pt
Caption	Plus Jakarta Sans	400	8-9pt	10-11pt
Footnote	Plus Jakarta Sans	300	7-8pt	9-10pt

Type Scale¶

Based on a modular scale with ratio 1.250 (major fourth):

Level	Size	Use
6	61px	Display (exceptional use)
5	49px	Hero headlines
4	39px	H1
3	31px	H2
2	25px	H3
1	20px	H4
Base	16px	Body text
-1	13px	Small text
-2	10px	Caption

Spacing and Alignment¶

Line Height¶

Titles: 1.2 - 1.3 (more compact)
Body: 1.5 - 1.7 (more spacious for readability)
Buttons: 1.0 - 1.2 (tight)

Letter Spacing¶

Large titles: -0.02em to -0.01em (slightly negative)
Body: 0 (normal)
Uppercase: +0.05em to +0.1em (slightly positive)
Buttons: 0 to +0.01em

Alignment¶

✅ Recommended: - Left: Long texts, paragraphs, main content - Center: Hero titles, CTAs, featured elements - Right: Numbers, prices, tabular elements

❌ Avoid: - Justified: Can create irregular spacing (only if necessary with hyphenation)

Line Length¶

For optimal readability:

Ideal: 50-75 characters per line (approximately 600-800px)
Minimum: 45 characters
Maximum: 90 characters

.content {
  max-width: 70ch; /* 70 characters */
}

Responsive Typography¶

Recommended Breakpoints¶

/* Mobile */
@media (max-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  body { font-size: 16px; }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }
  body { font-size: 16px; }
}

/* Desktop */
@media (min-width: 1025px) {
  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
  h3 { font-size: 24px; }
  body { font-size: 16px; }
}

Monospaced Font (Code)¶

For code and technical elements, using Plus Jakarta Sans maintains visual coherence.

Alternative for Code¶

If a specific monospaced font is required:

JetBrains Mono or Fira Code

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}

Accessibility¶

Minimum Sizes¶

Web: 16px for body text (never less than 14px)
Mobile: 16px to avoid automatic zoom on iOS
Print: 10pt minimum for main text

Contrast¶

Verify color contrast according to Color Palette
Gray text on white must meet WCAG AA minimum
Avoid light gray text (#8A8A8A) in small sizes

Readability¶

✅ Best practices: - Use Regular (400) for body text - Don't use weights below 300 in small sizes - Ensure adequate contrast - Avoid italic text in long paragraphs

Numerals and Special Characters¶

Plus Jakarta Sans includes:

✅ Proportional numerals (better for text)
✅ Tabular numerals (better for tables)
✅ Fractions
✅ Currency symbols ($, €, £, ¥)

Use of Numerals¶

/* Tables and alignment */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Flowing text */
.proportional-nums {
  font-variant-numeric: proportional-nums;
}

Implementation¶

Google Fonts¶

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">

CSS @import¶

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

Variable Font (Recommended)¶

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap" rel="stylesheet">

Usage Examples¶

Landing Page¶

[H1: Bold 48px] Welcome to Bluu
[Body: Regular 18px] The best personal finance platform
[Button: SemiBold 16px] START NOW

App Interface¶

[H2: Bold 32px] Your Transactions
[H4: SemiBold 18px] January Expenses
[Body: Regular 16px] Transaction description
[Small: Regular 14px, Gray 700] 2 hours ago

Printed Materials¶

[Headline: Bold 36pt] Bluu Brand Manual
[Title 1: Bold 24pt] Typography
[Body: Regular 11pt] Plus Jakarta Sans is the official typeface...
[Caption: Regular 9pt] Figure 1.2 - Typographic examples

Consistency: Consistent use of typography reinforces brand identity and improves user experience.