Typography System

MYMUSICK uses distinct typography strategies in each theme. The original theme features a custom Gyanko font, while the formal theme uses modern Google Fonts with a clear hierarchy.

Font Families

Original Theme
Formal Theme

Gyanko Custom Font

The original theme’s primary brand font is Gyanko, a custom typeface loaded via @font-face.

@font-face {
  font-family: 'Gyanko';
  src: url("fonts/gyanko-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

Font Stack

Element	Font Family	Purpose
Body	`'Segoe UI', Tahoma, Geneva, Verdana, sans-serif`	Body text, metadata
`.title`	`'Gyanko', sans-serif`	Logo/brand text
`.bttlg`	`'Gyanko', sans-serif`	Buttons
`.sidebar a`	`'Gyanko', sans-serif`	Navigation links
`.intxt`	`'Gyanko', sans-serif`	Section headings

Character Set

Gyanko is a display font best used for headings and UI elements. Ensure the font file is available at fonts/gyanko-regular.otf relative to your CSS file.

Usage Examples

.title {
  font-family: 'Gyanko', sans-serif;
  font-size: 40px;
  letter-spacing: 2px;
  color: var(--accent);          /* #FF5757 */
  font-weight: normal;
  margin: 0;
}

Google Fonts Stack

The formal theme combines Bebas Neue (display) with DM Sans (body) for a professional, modern aesthetic.

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

Font Roles

Font	Variable	Usage	Characteristics
Bebas Neue	`--font-display`	Titles, headings, large text	All-caps, condensed, bold
DM Sans	`--font-body`	Body, UI text, labels	Clean, geometric, legible

DM Sans Weight Scale

Light: 300

Metadata, captions

Regular: 400

Body text

Medium: 500

Buttons, labels

Light Italic: 300

Emphasis

Usage Examples

.title {
  font-family: var(--font-display);  /* Bebas Neue */
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--accent);              /* #e8ff47 */
  font-weight: normal;
  line-height: 1;
}

Type Scale

Original Theme Sizing

Desktop
Mobile (@max-width: 600px)

Element	Size	Font	Usage
`.title`	`40px`	Gyanko	Logo/header
`.intxt`	`25px`	Gyanko	Section heading
`.sidebar a`	`24px`	Gyanko	Navigation
`.bttlg`	`16px`	Gyanko	Buttons
`.search`	`16px`	Segoe UI	Input fields
`#nowPlaying`	`18px`	Segoe UI	Player text
`.song strong`	`14px`	Segoe UI	Song title
`.song small`	`12px`	Segoe UI	Artist name

Element	Size	Change
`.title`	`28px`	-12px
`.intxt`	`25px`	No change
`#nowPlaying`	`14px`	-4px
Other elements	Same	Unchanged

Formal Theme Sizing

Desktop
Mobile (@max-width: 768px)

Element	Size	Font	Usage
`.intxt`	`clamp(42px, 5vw, 72px)`	Bebas Neue	Hero heading
`.login-form h3`	`32px`	Bebas Neue	Dialog heading
`.title`	`28px`	Bebas Neue	Logo
Body	`15px`	DM Sans	Base text
`.sidebar a`	`14px`	DM Sans	Navigation
`.search`	`14px`	DM Sans	Input
`.song strong`	`13.5px`	DM Sans	Song title
`.bttlg`	`13px`	DM Sans	Buttons
`#nowPlaying`	`13px`	DM Sans	Player text
`.song small`	`12px`	DM Sans	Metadata

Element	Size	Change
`.intxt`	`36px`	Fixed size
`.title`	`24px`	-4px
`#nowPlaying`	`13px`	No change
Other elements	Same	Unchanged

Letter Spacing

Both themes use letter-spacing for display typography to enhance readability and brand presence.

.title {
  letter-spacing: 2px;     /* Logo: moderate tracking */
}

/* No letter-spacing on other elements */

Bebas Neue naturally has condensed proportions, so increased letter-spacing improves legibility at display sizes.

Line Height

Original Theme

/* Uses browser defaults for most elements */
/* No explicit line-height declarations */

Formal Theme

.title {
  line-height: 1;          /* Tight for logo */
}

.intxt {
  line-height: .95;        /* Extra tight for hero */
}

/* Body elements use browser defaults (~1.5) */

Text Overflow Handling

Both themes implement ellipsis truncation for song metadata:

.song-info {
  overflow: hidden;
}

.song strong,
.song small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Text Colors

Original Theme

body {
  color: var(--text-light);      /* white */
}

.title {
  color: var(--accent);          /* #FF5757 coral */
}

#nowPlaying {
  color: black;                  /* High contrast on teal */
}

Formal Theme

body {
  color: var(--text);            /* #e8e6df warm white */
}

.title, .login-form h3 {
  color: var(--accent);          /* #e8ff47 yellow */
}

.sidebar a {
  color: var(--muted);           /* #6b6b72 gray */
}

.sidebar a:hover {
  color: var(--text);            /* Brighten on hover */
}

.song strong {
  color: var(--text);            /* Primary text */
}

.song small {
  color: var(--muted);           /* Secondary text */
  font-weight: 300;              /* Lighter weight */
}

Responsive Typography

Original Theme

@media (max-width: 600px) {
  .title {
    font-size: 28px;             /* Down from 40px */
  }

  #nowPlaying {
    font-size: 14px;             /* Down from 18px */
  }

  /* Other sizes remain constant */
}

Formal Theme

.intxt {
  font-size: clamp(42px, 5vw, 72px);
  /* Scales between 42px (mobile) and 72px (desktop) */
}

Text Alignment

.intxt {
  text-align: center;            /* Centered headings */
}

#nowPlaying {
  text-align: center;
}

/* Mobile specific */
@media (max-width: 600px) {
  #nowPlaying {
    font-size: 14px;
    /* Already centered */
  }
}

Font Loading Strategy

Original: @font-face
Formal: Google Fonts

Self-Hosted Font

Font Declaration

@font-face {
  font-family: 'Gyanko';
  src: url("fonts/gyanko-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

File Structure

Ensure the font file exists at:

project/
├── css/
│   └── estilooriginal.css
└── fonts/
    └── gyanko-regular.otf

Fallback

Always include fallback fonts:

font-family: 'Gyanko', sans-serif;

If gyanko-regular.otf fails to load, the browser will fall back to the default sans-serif font, which may significantly change the appearance.

CDN-Hosted Fonts

Import Statement

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

CSS Variables

:root {
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
}

Apply Variables

body { font-family: var(--font-body); }
.title { font-family: var(--font-display); }

Loading Optimization

The display=swap parameter in the Google Fonts URL ensures:

Immediate text rendering with fallback fonts
Swap to web fonts once loaded (no invisible text)
Better perceived performance

Google Fonts are cached across domains, so users likely already have Bebas Neue and DM Sans loaded from other sites.

Best Practices

Limit Font Weights

Only load the weights you actually use (300, 400, 500 in formal theme)

Use Variable Fonts

Consider variable fonts for better performance if many weights are needed

Fallback Stacks

Always include system font fallbacks: sans-serif, serif, monospace

Optimize Display Fonts

Use display fonts sparingly for headings and brand elements only

Accessibility

Font Size Minimums

Ensure body text is at least 14px for readability. Both themes meet this requirement:

Original: 16px (search), 14px+ (song info)
Formal: 15px (body), 13px+ (UI elements)

Relative Units

Consider using rem instead of px for better accessibility:

/* Current (px) */
body { font-size: 15px; }

/* Accessible (rem) */
html { font-size: 100%; }  /* 16px default */
body { font-size: 0.9375rem; }  /* 15px at default zoom */

Using rem units allows users to scale text globally via browser settings without breaking your layout.

Typography Utilities

Common text treatment patterns found in both themes:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Get Started

Features

Styling

Development

​Typography System

​Font Families

​Gyanko Custom Font

​Font Stack

​Character Set

​Usage Examples

​Google Fonts Stack

​Font Roles

​DM Sans Weight Scale

Light: 300

Regular: 400

Medium: 500

Light Italic: 300

​Usage Examples

​Type Scale

​Original Theme Sizing

​Formal Theme Sizing

​Letter Spacing

​Line Height

​Original Theme

​Formal Theme

​Text Overflow Handling

​Text Colors

​Original Theme

​Formal Theme

​Responsive Typography

​Original Theme

​Formal Theme

​Text Alignment

​Font Loading Strategy

​Self-Hosted Font

​CDN-Hosted Fonts

​Loading Optimization

​Best Practices

Limit Font Weights

Use Variable Fonts

Fallback Stacks

Optimize Display Fonts

​Accessibility

​Font Size Minimums

​Relative Units

​Typography Utilities

Build docs developers (and LLMs) love

Typography System

Font Families

Gyanko Custom Font

Font Stack

Character Set

Usage Examples

Google Fonts Stack

Font Roles

DM Sans Weight Scale

Usage Examples

Type Scale

Original Theme Sizing

Formal Theme Sizing

Letter Spacing

Line Height

Original Theme

Formal Theme

Text Overflow Handling

Text Colors

Original Theme

Formal Theme

Responsive Typography

Original Theme

Formal Theme

Text Alignment

Font Loading Strategy

Self-Hosted Font

CDN-Hosted Fonts

Loading Optimization

Best Practices

Accessibility

Font Size Minimums

Relative Units

Typography Utilities