Appearance
Typography
This document describes the typography rules for:
- IxDF site (layout and content, incl. RTE-generated)
- Internal documentation (incl. this one)
We follow APA Title Case for headings and button labels, and sentence case for field text and dropdown menus.
Characters
Apostrophes
Use straight apostrophes (') instead of curly apostrophes (’) for all contractions like 'd, 's, 've, 're, 'm, 't, 'll.
Straight apostrophes avoid rendering issues and keep UI text consistent.
| Do | Don't |
|---|---|
| We've Got Answers! | We’ve Got Answers! |
| It's ready | It’s ready |
| You'll love it | You’ll love it |
Quotes
Use straight quotes ("") instead of curly quotes (“”).
| Do | Don't |
|---|---|
| Click "Submit" | Click “Submit” |
| Search for "UX design" | Search for “UX design” |
- Mac:
Option+[andShift+Option+[(English layout) - Win: ?
Ellipsis
Use the ellipsis character (…) instead of three periods (...).
| Do | Don't |
|---|---|
| Loading… | Loading... |
| Read more… | Read more... |
- Mac:
Option+; - Win: ?
Headings
Use Title Case (APA) for all headings. Capitalize the first letter of major words (nouns, verbs, adjectives, adverbs, pronouns, and subordinating conjunctions). Keep minor words (articles, coordinating conjunctions, and short prepositions) lowercase unless they are the first or last word.
Reference: capitalizemytitle.com (APA mode)
| Do | Don't |
|---|---|
| Get a Certificate of Participation | Get A Certificate of participation |
| How to Design for Accessibility | How To Design For Accessibility |
| What You Need to Know | What you need to know |
Buttons
Use Title Case (APA) for all button text
Every word in a button label begins with a capital letter (based on Title Case standards).
| Do | Don't |
|---|---|
| Back to Home | Back to home |
| Sign Up Now | Sign up now |
| View All Courses | View all courses |
Keep button text to a single line
Use text that is proportional to the button size to keep it readable and have one line of text without changing the button layout.
| Do | Don't |
|---|---|
| Back to Home | Back to (line break) Home |
Text Links
Avoid extending underline to punctuation marks
When a link ends with punctuation (e.g., a question mark), the underline should stop at the last letter — not the punctuation.
| Do | Don't |
|---|---|
| [Which distinctions can you earn]? | [Which distinctions can you earn?] |
| [Learn more about UX]. | [Learn more about UX.] |
Note: (Brackets represent the linked/underlined portion)*
Punctuation
Add spaces around the slash symbol
When using / between words, add a space on both sides for readability.
| Do | Don't |
|---|---|
| UI / UX | UI/UX |
| View / Share Certificate | View/Share Certificate |
| Import / Export | Import/Export |
Symbol Formatting
These conventions define how numerical symbols such as $ and % should be visually styled when paired with numeric values. Symbols use smaller font sizes and proper hierarchy, making prices and percentages easier to read and consistent across the interface.
Use smaller font sizes for symbols
The $ symbol should use a smaller size than the number label. The % symbol should be placed after the number and also use a smaller size.
| Do | Don't |
|---|---|
| $50 | $50 (same size) |
| 50% | 50% (same size) |
Field Text
These rules define the naming conventions for all text displayed inside field components, including Input, Dropdown, Combobox, and Rich Text Editor (RTE). The rules ensure consistency across labels, helper texts, placeholders, and any internal text within form fields.
Use sentence case
Only the first word is capitalized. All following words remain lowercase unless they are proper nouns.
Examples:
- Payment method selection
- Update your account settings
- Create a new project
| Do | Don't |
|---|---|
| Email address | Email Address |
| Enter a valid email address | Enter A Valid Email Address |
Preserve proper nouns
Brand names, product names, organization names, and official terms keep their original capitalization even when they appear in the middle of a sentence.
Examples:
- Connect with your LinkedIn profile
- Install the Figma plugin to continue
- Sync data from Google Sheets
| Do | Don't |
|---|---|
| LinkedIn profile | linkedin profile |
| Connect your account with LinkedIn | Connect your account with linkedin |
Slash "/" formatting
Capitalize both sides when both are primary labels:
Use when the two items represent equal, standalone labels.
Examples:
- ZIP / Postal code
| Do | Don't |
|---|---|
| ZIP / Postal code | Zip / postal code |
Lowercase the second part when it is a variant or explanation:
Use when the second term is not a primary label, but clarification or additional detail.
Examples:
- Username / email
- Password / current password
- Phone number / extension
| Do | Don't |
|---|---|
| Username / email | Username / Email |
Dropdown / Select Menus
These rules define how all text inside dropdown menus should be written. They follow the same formatting standards as Field Text Rules: sentence case, proper noun preservation, and consistent slash formatting. The goal is to keep dropdown options readable, clear, and consistent across the interface.
Use sentence case
All dropdown item labels must follow sentence case. Only the first word is capitalized unless it contains a proper noun.
| Do | Don't |
|---|---|
| Add item | Add Item |
| Edit item | EDIT ITEM |
| Move item | Move Item |
Preserve proper nouns
Brand names, product names, and official terms must keep their original capitalization, even when placed in the middle of a phrase.
| Do | Don't |
|---|---|
| Connect to LinkedIn | Connect to linkedin |
| Import from Google Drive | Import from google drive |
Slash "/" formatting
Capitalize both sides when both are primary labels:
Use when the two items represent equal, standalone concepts.
| Do | Don't |
|---|---|
| Start Date / End Date | Start date / end date |
| Import / Export | Import / export |
Lowercase the second part when it is a variant or explanation:
Use when the second term clarifies or specifies the primary label.
| Do | Don't |
|---|---|
| Priority / high | Priority / High |
| Priority / low | Priority / Low |
International Considerations
Numbers
- Use comma for thousand separator:
1,000 - Use point as decimal separator:
36.6
Currency
Always include currency code: $100 USD
Dates
(To be defined — recommended: DD Month YYYY format, e.g., 15 March 2024, or ISO format YYYY-MM-DD for unambiguous international use)
Time
(To be defined — recommended: 24-hour format with timezone)
Other Guidelines
Links
Write descriptive link text. Avoid generic phrases like "click here".
| Do | Don't |
|---|---|
| Learn more about [UX design principles] | [Click here] to learn more |
| Read the [accessibility guidelines] | [This link] has more info |
Abbreviations
Spell out abbreviations on first use, especially for technical terms.
| Do | Don't |
|---|---|
| User Experience (UX) design... | UX design... (on first mention) |
| Rich Text Editor (RTE) | RTE (without explanation) |
Quick Reference Table
| Element | Casing | Example |
|---|---|---|
| Headings | Title Case (APA) | Get a Certificate of Participation |
| Buttons | Title Case (APA) | Back to Home |
| Field labels | Sentence case | Email address |
| Field helper text | Sentence case | Enter a valid email address |
| Dropdown items | Sentence case | Add item |
| Proper nouns | Original capitalization | LinkedIn, Google Sheets, Figma |
Rationale
We are an international team, we use different keyboard layouts, but need to produce consistent content that does not create confusion for international visitors.