Typography
Relevant source files
The following files were used as context for generating this wiki page:
Typography in this project defines the visual hierarchy, readability, and brand identity of the Google search interface clone. It encompasses the selection of font families, sizing scales, and color schemes applied to various interface elements, ranging from the prominent brand logo to functional navigation links and search input fields.
The system relies on a combination of global font declarations and specific class-based overrides to ensure consistency across different components like the header, main search area, and footer.
Global Font Configuration
The project establishes a baseline typographic style for the entire document using the <body> selector. This includes setting a default font size, line height, and a font stack that prioritizes modern sans-serif typefaces.
| Property | Value | Context |
|---|---|---|
| Font Family | Roboto, sans-serif or 'Arial', sans-serif | Global Document |
| Base Font Size | 13pt or 16px | Body and Inputs |
| Text Color | #1f1f1f | Primary Content |
Sources: index.html:17, style.css:4, style.css:46
Font Inheritance Flow
The following diagram illustrates how typographic properties flow from the body to specific UI components.
The diagram shows the distribution of font settings from the global body level to specific functional modules.
Sources: index.html:17, style.css:1-10, style.css:32, style.css:67
Component-Specific Typography
Brand Logo
The logo utilizes a distinct typographic style to mimic the brand identity. It features a large font size and bold weight, with individual letter coloring handled via specific utility classes.
- Size: 80px
- Weight: Bold
- Colors: Blue (
#4285F4), Red (#EA4335), Yellow (#FBBC05), Green (#34A853)
Sources: style.css:11-23
Search Interface
The search interface requires high legibility for user input and suggestions. The input field uses a larger font size compared to the body text to improve the user experience during interaction.
This diagram outlines the specific font sizes assigned to the search input and suggestion elements.
Sources: style.css:2-3, style.css:32
Navigation and Footer Links
Navigation elements and footer links use a reduced font size and specific color states to differentiate them from primary content.
- Top Navigation (
.gbcp): 14px font size with a line-height of 28px. - Footer (
#footer): 13px font size with specialized link colors. - Link Colors: Primary links use
rgb(104, 29, 168), while navigation links usergb(112, 117, 122).
Sources: style.css:32, style.css:67-73, style.css:4
Typographic Style Definitions
The following table summarizes the CSS classes and IDs responsible for typographic styling across the application.
| Selector | Font Size | Color | Description |
|---|---|---|---|
.logo | 80px | Multi-colored | Main brand logo typography |
.mWefFb | 18px | #1f1f1f | Primary search input text |
.gbcp | 14px | rgb(112, 117, 122) | Top navigation bar links |
#footer | 13px | rgb(31, 31, 31) | Footer text and links |
.gsfi | 17px | - | Search suggestion font size |
Sources: style.css:2, style.css:12, style.css:32, style.css:37, style.css:67
Summary
Typography in the project is structured to prioritize functional clarity in the search and navigation areas while maintaining brand recognition through the logo's styling. By utilizing a mix of relative and absolute units (pt and px), the system ensures a consistent reading experience across different sections of the page.