UI/UX - lesson 3 | HackIndia Skills

Key point

One idea

Readable type is not about fancy fonts. It is about size, spacing, weight, and consistency.

Use fewer text styles, make body text comfortable, and make headings clearly different from normal text.

What readable means

A recruiter may open your project on a laptop. A judge may check it on a phone in a noisy hall. Your text has to work in both places.

For most app screens, start with 16px body text. Use 20px to 24px for section headings. Use 28px to 32px only for main page titles.

Your to-do

Set a type scale

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Pick one font family for the whole app.
Set body text to 16px or 1rem.
Set line height around 1.5 for paragraphs and descriptions.
Use 2 to 4 font weights only, such as regular, medium, semibold, and bold.
Save these as reusable styles, classes, or design tokens.

0 of 5 done

Common mistake

Many hackathon UIs use tiny grey text because it looks clean in a screenshot. It becomes hard to read on a phone, especially outdoors or in a crowded college venue.

Do not use 12px for important labels, inputs, errors, or button text. Keep small text for helper notes only, and check contrast in the next lesson.

Example

Simple CSS setup

You can define a small type system once and reuse it across your screens. This is enough for most hackathon apps.

Use class names that describe purpose, not appearance. Later, if you change sizes, your screens stay easier to maintain.

/* styles.css */
:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

.page-title {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
}

.section-title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}

.body-text {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

.helper-text {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
}

.button-text {
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
}

Tip

Use AI carefully

You can ask ChatGPT or Gemini to create a type scale for your app. Give it your app type, target device, and framework.

Check the result yourself. Remove extra font sizes. Make sure body text is at least 16px and that headings are clearly larger than body text.

Prompt:
I am building a mobile-first hackathon app for college students in India.
Create a simple readable type scale for React CSS.
I need styles for page title, section title, body text, helper text, input labels, errors, and buttons.
Use only 4 font sizes and 3 font weights.

Check real screens

Do not judge type only inside Figma or your code editor. Run the app and read it like a user.

Open three working screens. Can you scan the title first, then the important action, then the details? If everything feels equally loud, reduce weights and sizes.