Line Height
Line height is the vertical distance between two types of lines of text, measured from the baseline of one type of line to the baseline of the next. Traditionally, in metal types, this was a combined measurement of font size and lead bars that were insert
Written by: Prince Pal
Your UI/UX Designer. Consultant. Partner. Over the past 18 years, I designed websites and apps for enterprise-level clients like Stanford-HCI Research, Accenture, Juniper Networks, Gemalto, Virtual Dental Care & much more.
A
- AB Testing
- Above The Fold
- Acceptance Criteria
- Accessibility
- Accordion
- Adaptive Design
- Adobe XD
- Advanced Prototype
- Affinity Diagram / Affinity Map
- Agile Software Development
- Aliasing / Anti-Aliasing
- Alignment
- ALT Text
- Analogous Colors
- Analytics
- Android App
- Angular
- Animation Design
- Anomalous Trichromats
- Anthropometry
- API
- Artificial Intelligence (AI)
- Ascender
- Assistive Technology
- Audit
- Augmented Reality (AR)
- Auto Complete
- Auto Correct
- Avatar
C
- Cache
- Call-To-Action
- Canonic Perspective
- Card Sorting
- Cascading Menus
- Cascading Style Sheets (CSS)
- Case Study
- Causation
- Charts
- Chatbot
- Checkbox
- Chromostereopsis
- Chunking
- Click Dummy
- Click Stream
- Cognitive Biases
- Cognitive Friction
- Cognitive Load
- Cognitive Processing
- Cognitive Walkthrough
- Color Palette
- Color Theory
- Color Wheel
- Combo Boxes
- Command Line Interface
- Commits
- Competitor Analysis
- Complementary Colors
- Concept Sketch
- Concept Sprint
- Consistency
- Content Design
- Content Management System (CMS)
- Content Strategy
- Context Effect
- Context Sensitive Popup Menu
- Contextual Inquiry
- Contrast
- Conversational Interface
- Conversion Rate
- Cookies
- Corporate Identity
- Correlation
- Counters
- Critique
- CRM (Customer Relationship Management)
- Cross Checking (Cross Validation)
- Customer Experience (CX)
- Customer-Centric
D
- Dark Pattern/Dark UX
- Dashboard
- Data Collection
- Data Science
- Data-Driven Design
- Date/Time Picker
- Decision Matrix
- Demographic
- Descender
- Design Deliverables
- Design Exercise
- Design Facilitation
- Design Patterns
- Design Sprint
- Design System
- Design Thinking
- Design Validation
- Design Verification
- Detailed Design
- Deuteranopia
- Developers
- Dialogue
- Diary Study
- Dichromats
- Direct User Data
- Disabled (Button / Control)
- Django Web Framework
- Docker
- Domain Expertise
- Döner Menu Icon
- Dot Voting
- Dribbble
- Drop-Down List Box
- Dropdown Buttons
- Dropdown/Dropdown Lists
E
- E2E Tests
- Early Adopters
- Early Prototype Testing
- Edge Case
- Efficiency
- Empathy
- Empathy Map
- End User
- Engagement
- Environmental Profile
- Ergonomics
- Error Analysis
- Error Detection
- Error Handling
- Error of Commission / Error of Omission
- Error Rate
- Ethical Design
- Ethnographic Study
- Ethnography
- Executive Champion
- Expectancy Test
- Experience Architecture
- Experience Design
- Explicit Save
- Eye Ball Tracking
I
- Iconography
- Ideation
- Image Map
- Inclusive Design
- Index Page
- Indirect User Data
- Industrial Design
- Infographics
- Information Architecture (IA)
- Informational Components
- Input Control
- Interaction Design (IxD)
- Interaction Designer
- Intuitive Design
- Inverted Pyramid Writing
- Invision Studio
- Ionic
- iOS App
- IP Address
- Irregular Shapes
- Iteration
- Iterative Design
- Iterative Testing
L
- Labels on website
- Landing Page
- Late Adopters
- Law of Common Region
- Law of Prägnanz
- Law of Proximity
- Law of Similarity
- Law of Uniform Connectedness
- Layout Graphic
- Leading
- Lean UX
- Learnability
- Legibility in design
- Likert Scale
- Line-height
- Line Length
- Linux
- Liquid Layout
- List Box
- Live Site Analysis
- Lo-Fi Prototypes
- Load Time
- Loader or Loading Bar
- Localization
- Logo
- Long Tail Keywords
- Look & Feel
- Luminance
P
- Padding
- Page Flow
- Page Types
- Pagination
- Pain-Points
- Pairing Designing
- Paper Prototype
- Paradox of Choice
- Paradox of Specificity
- Parkinson’s Law
- Pattern Recognition
- Peak-End Rule
- Persona
- Phi Phenomenon
- Pixel Density
- Pluralistic Walkthrough
- Practicality Test
- Preference Data
- Presentation Design
- Product Designer
- Product Management
- Product Roadmap
- Production Environment
- Progress Bar
- Progressive Disclosure
- Progressive Web Application (PWA)
- Prototype
- Proximity Principle
- Proxy PO
- Psychodynamics
- Psychographics
- Pull Request
- Python
R
- Radio Button
- Rapid Prototyping
- Rating Scales
- ReactNative
- Readability
- Reading Grade Level (RGL)
- Recall and Recognition
- Remote Usability Test
- Representative Sampling
- Requirements-gathering
- Research and Planning
- Resolution
- Responsive Web Design
- REST API
- Retention
- Retro
- Return On Investment (ROI)
- Reverse Card Sort
- Review
S
- SaaS
- Saccades
- Sans Serif
- Satisficing
- Saturated Color
- Scannability
- Scenario
- Schema (Pl. Schemata)
- Screen Readers
- Scrum Master and Scrum Artifacts
- SDK (Software Development Kit )
- Search Field
- Segments
- SEO
- Serial Position Effect
- Serif
- Service Design
- Sidebar
- Sitemap
- Sketch
- Slack
- Slider
- Small Field Tritanopia
- Software
- Source Code
- Spin Button
- Sprints
- Stakeholder Interviews
- Standards Design
- Statement of Work (SOW)
- Static Layout
- Storyboard
- Styleguide
- Summative Testing
- Survey
- SVG
- Switch or Toggle
- Symphony
U
- UI Design
- UI Element
- UI Kit
- Un-Moderated Usability Testing
- Unique Selling Proposition (USP)
- Unit Testing
- Usability Testing
- Use Case
- User Experience (UX)
- User Flow
- User Groups
- User Interface (UI)
- User Interview
- User Journey Map
- User Onboarding
- User Profile
- User Research
- User Satisfaction
- User Scenario
- User Stories
- User Testing
- User-Centered Design (UCD)
- UX Audit
- UX Documentation
- UX Portfolio
- UX Researcher
- UX Writing
- UX/UI Developer
What is Line Height?
Overview
Line height is the vertical distance between two types of lines of text, measured from the baseline of one type of line to the baseline of the next. Traditionally, in metal types, this was a combined measurement of font size and lead bars that were inserted between each line (called "leading").
The line height sets the height of a line box; it is commonly used to determine the distance between lines of text. On block-level elements, it specifies the minimum height of the line box within the segment. On non-replaced inline elements, this limits the height used to calculate the line box height.
Line height can be expressed in various units, including points, pixels, ems, and rems. Thinking in percentages is probably the easiest way to understand the relationship between font size and line height. Setting a line height of 150% in a design application multiplies our font size by 1.5.
LET’S WORK TOGETHER
Boost your design scope with Think 360
Book a call with us and get the party started!
Book A Demo