---
title: CSS Size Adjust for Font Face | A Quick Guide
description: CSS Size Adjust for the Font Face is the best solution for responsive font sizes and font families to accepts all the measurement units.
image: https://www.xenonstack.com/hubfs/xenonstack-css-size-adjust-for-font-face.png
---
- [](https://www.xenonstack.com/)
- - Foundry
Foundry
Unified reasoning foundation enabling seamless orchestration, analytics, infrastructure, and trust across intelligent ecosystems
[ Akira AI - Reasoning and Agent Orchestration Turn models into collaborative, policy-governed agents that learn and act together](https://www.xenonstack.com/agentic-platforms/akira-ai/)
[ ElixirData - Agentic Analytics Intelligence Explainable, decision-centric analytics for measurable business outcomes](https://www.xenonstack.com/agentic-platforms/elixirdata/)
[ NexaStack - Agentic Infrastructure Automation Secure, compliant, and high-performance AI deployment across cloud, edge, and on-prem](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/)
[ MetaSecure - Trust, Compliance, and Defense Continuous assurance with AI-BOMs, risk scoring, and agentic security](https://www.xenonstack.com/agentic-platforms/metasecure/)
[ Neural AI – Agentic Intelligence & Autonomous Innovation AI agents for intelligent automation and adaptive innovation](https://www.xenonstack.com/agentic-platforms/neural-ai/)
### Reasoning Stack
Powers intelligent systems with unified orchestration, adaptive analytics, scalable infrastructure, and built-in trust
[See in action ](https://www.xenonstack.com/agentic-ai/analytics-platform/)
- AI Agents
AI Agents
Pre-built autonomous agents designed for domain-specific intelligence, seamless integrations, and governed enterprise deployment
By Domain
[ Agentic Operations AgentSRE and AgentOps for automated reliability and IT operations](https://www.xenonstack.com/ai-agents/agentic-operations/)
[ Agentic Finance FinOps Agent and Budget Enforcer for optimized financial governance](https://www.xenonstack.com/ai-agents/agentic-finance/)
[ Agentic Risk and Compliance Audit Agent and Risk Assurance to automate compliance monitoring](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/)
[ Agentic Analytics Analyst Agent and Decision Advisor for AI-driven insights and strategy](https://www.xenonstack.com/ai-agents/agentic-analytics/)
[ Agentic Supply Chain AI-powered advisor for smart sourcing, vendor insights, and strategic procurement](https://www.xenonstack.com/ai-agents/agentic-procurement/)
[ Agentic Security AI-driven defense delivering proactive threat detection and autonomous security orchestration](https://www.xenonstack.com/ai-agents/agentic-security/)
By Integration
[ Snowflake AI Agents Pre-built connectors for real-time data intelligence on Snowflake](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/)
[ Databricks AI Agents AI agents for automated data workflows and insights on Databricks](https://www.xenonstack.com/ai-agents/databricks-ai-agents/)
[ ServiceNow AI Agents AI workflows to streamline service, incident, and operations automation](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/)
[ Jira/Project Management Agents AI agents for backlog grooming, sprint planning, and real-time project visibility](https://www.xenonstack.com/ai-agents/jira-agents-actions/)
[ SAP AI Agents AI copilots for finance, supply chain, and HR decisions across your SAP landscape](https://www.xenonstack.com/ai-agents/sap-agents-actions/)
[ Oracle AI Agents AI agents for financials, risk, and operations intelligence across Oracle applications](https://www.xenonstack.com/ai-agents/oracle-agents-actions/)
- Solutions
Solutions
Governed AI solutions driving measurable business outcomes across operations, finance, security, and analytics
[ ReliabilityOps — Cloud Reliability Automation Automate reliability checks and optimize uptime with continuous reasoning](https://www.xenonstack.com/ai-agents/cloudops-reimagined/)
[ IncidentOps — AI-Driven Site Reliability Resolve incidents faster with AI-led triage, contextual RCA, and adaptive recovery](https://www.xenonstack.com/ai-agents/sre-reimagined/)
[ PlatformOps — Unified Platform Automation Unify infrastructure and AI systems with reasoning-driven automation and compliance](https://www.xenonstack.com/ai-agents/platformops-reimagined/)
[ DefenseOps — Autonomous Threat Defense Detect, analyze, and neutralize threats autonomously with adaptive defense intelligence](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/)
[ TrustOps — Responsible AI and Continuous Governance Ensure transparency, fairness, and compliance in every AI system and decision](https://www.xenonstack.com/ai-agents/secops-reimagined/)
[ RiskOps — Predictive Risk Intelligence Predict, score, and mitigate risks proactively with real-time assurance intelligence](https://www.xenonstack.com/ai-agents/risk-management-aviator/)
[ FactoryOps — AI-Driven Industrial Automation Predict equipment failures and optimize production with adaptive intelligence](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/)
[ AssetOps — Automated Asset Reliability Enable predictive maintenance and optimize lifecycle performance continuously](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/)
[ QualityOps — Continuous Testing Intelligence Accelerate testing cycles with autonomous validation and reasoning feedback](https://www.xenonstack.com/ai-agents/qaops-reimagined/)
[ SourcingOps — Intelligent Procurement Automate sourcing, vendor analysis, and spend insights for agile procurement](https://www.xenonstack.com/ai-agents/procurement-reimagined/)
[ DataOps — Autonomous Data Pipeline Governance Ensure reliability, detect anomalies, and self-heal data pipelines automatically](https://www.xenonstack.com/ai-agents/dataops-reimagined/)
[ DecisionOps — Intelligent Decisioning Deliver explainable, auditable, and measurable outcomes with reasoning AI](https://www.xenonstack.com/ai-agents/desicison-reimagined/)
- Industries
Industries
Industry blueprints showcasing agentic transformation, real-world impact, and measurable outcomes across key sectors
[ Aerospace and Defense Autonomous flight systems and predictive maintenance powered by AI](https://www.xenonstack.com/industries/aerospace/)
[ Banking - Finance - Payments AI governance for secure, compliant, and adaptive financial operations](https://www.xenonstack.com/industries/banking/)
[ Manufacturing and Industrial Automation Smart factories using reasoning systems for real-time quality optimization](https://www.xenonstack.com/industries/digital-manufacturing-services/)
[ Enterprise - IT Operations AI-powered IT operations ensuring reliability, scalability, and cost efficiency](https://www.xenonstack.com/industries/enterprise-technology/)
[ Consumer – Experience – Tech Personalized digital experiences driven by explainable and trusted AI](https://www.xenonstack.com/industries/consumer-technology/)
[ Retail and Supply Chain Autonomous retail analytics enhancing operations, engagement, and forecasting accuracy](https://www.xenonstack.com/industries/retail/)
[ Travel – Hospitality – Guest Experience Agentic systems delivering personalized guest journeys with contextual intelligence](https://www.xenonstack.com/industries/travel-hospitality/)
- Resources
Resources
Explore insights, success stories, and learning programs that build knowledge and strengthen the AI transformation journey
[ Blogs Stay updated with the latest industry trends, news, and thought leadership](https://www.xenonstack.com/blog)
[ Insights Explore in-depth AI articles, use cases, and innovative applications](https://www.xenonstack.com/insights)
[ Use Cases Discover real-world applications of Agentic AI across industries](https://www.xenonstack.com/use-cases)
[ Case Studies Learn how organizations are achieving success with our solutions](https://xenonstack.com/case-studies)
[ Video Library Explore our collection of product demos, webinars, and AI thought leadership videos](https://www.xenonstack.com/videos/)
[ E-Books Download comprehensive e-books on AI, SRE, and more](https://www.xenonstack.com/e-book)
[ Presentations View our AI presentations, talks, and conference sessions on AI innovation](https://www.xenonstack.com/presentations/)
- Company
Company
Discover our people, principles, and purpose driving innovation, trust, and meaningful careers in the AI era
[ About Us Discover our mission, story, and the values driving our innovation and impact](https://www.xenonstack.com/about-us/)
[ Xenonstack Academy Enhance your skills with our comprehensive training programs and courses designed for modern tech professionals](https://www.xenonstack.com/xenonstack-academy/)
[ Contact Us Get in touch with us for support, business inquiries, or collaboration opportunities](https://www.xenonstack.com/contact-us/)
[ Leadership Team Meet the visionary leaders guiding Xenonstack’s strategic direction and innovation](https://www.xenonstack.com/about-us/leadership-team/)
[ Tao of Xenonstack Learn about the guiding principles and philosophies that shape our culture and solutions](https://www.xenonstack.com/about-us/tao-of-xenonstack/)
[ How We Work Understand our collaborative approach and work culture that drive successful outcomes](https://www.xenonstack.com/about-us/how-we-work/)
[ How We Grow Explore how we nurture talent, foster innovation, and promote sustainable growth](https://www.xenonstack.com/about-us/how-we-grow/)
[ Careers Join our growing team! Explore career opportunities to work at the forefront of innovation](https://www.xenonstack.com/careers/)
- Book Strategy Call
[](https://www.xenonstack.com/)
- Foundry 
[Akira AI](https://www.xenonstack.com/agentic-platforms/akira-ai/) [ElixirData](https://www.xenonstack.com/agentic-platforms/elixirdata/) [NexaStack](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/) [MetaSecure](https://www.xenonstack.com/agentic-platforms/metasecure/) [Neural AI](https://www.xenonstack.com/agentic-platforms/neural-ai/)
- AI Agents 
[Agentic Operations](https://www.xenonstack.com/ai-agents/agentic-operations/) [Agentic Finance](https://www.xenonstack.com/ai-agents/agentic-finance/) [Agentic Risk and Compliance](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/) [Agentic Analytics](https://www.xenonstack.com/ai-agents/agentic-analytics/) [Agentic Supply Chain](https://www.xenonstack.com/ai-agents/agentic-procurement/) [Agentic Security](https://www.xenonstack.com/ai-agents/agentic-security/) [Snowflake AI Agents](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [Databricks AI Agents](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [ServiceNow AI Agents](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [Jira/Project Management Agents](https://www.xenonstack.com/ai-agents/jira-agents-actions/) [SAP AI Agents](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [Oracle AI Agents](https://www.xenonstack.com/ai-agents/oracle-agents-actions/)
- Solutions 
[ReliabilityOps](https://www.xenonstack.com/ai-agents/cloudops-reimagined/) [IncidentOps](https://www.xenonstack.com/ai-agents/sre-reimagined/) [PlatformOps](https://www.xenonstack.com/ai-agents/platformops-reimagined/) [DefenseOps](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/) [TrustOps](https://www.xenonstack.com/ai-agents/secops-reimagined/) [RiskOps](https://www.xenonstack.com/ai-agents/risk-management-aviator/) [FactoryOps](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/) [AssetOps](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/) [QualityOps](https://www.xenonstack.com/ai-agents/qaops-reimagined/) [SourcingOps](https://www.xenonstack.com/ai-agents/procurement-reimagined/) [DataOps](https://www.xenonstack.com/ai-agents/dataops-reimagined/) [DecisionOps](https://www.xenonstack.com/ai-agents/desicison-reimagined/)
- Industries 
[Aerospace and Defense](https://www.xenonstack.com/industries/aerospace/) [Banking - Finance - Payments](https://www.xenonstack.com/industries/banking/) [Manufacturing and Industrial Automation](https://www.xenonstack.com/industries/digital-manufacturing-services/) [Enterprise - IT Operations](https://www.xenonstack.com/industries/enterprise-technology/) [Consumer – Experience – Tech](https://www.xenonstack.com/industries/consumer-technology/) [Retail and Supply Chain](https://www.xenonstack.com/industries/retail/) [Travel – Hospitality – Guest Experience](https://www.xenonstack.com/industries/travel-hospitality/)
- Resources 
[Blogs](https://www.xenonstack.com/blog) [Insights](https://www.xenonstack.com/insights) [Use Cases](https://www.xenonstack.com/use-cases) [Case Studies](https://www.xenonstack.com/case-studies) [Video Library](https://www.xenonstack.com/videos/) [E-Books](https://www.xenonstack.com/e-book) [Presentations](https://www.xenonstack.com/presentations/)
- Company 
[About Us](https://www.xenonstack.com/about-us/) [Xenonstack Academy](https://www.xenonstack.com/xenonstack-academy/) [Contact Us](https://www.xenonstack.com/contact-us/) [Leadership Team](https://www.xenonstack.com/about-us/leadership-team/) [Tao of Xenonstack](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [How We Work](https://www.xenonstack.com/about-us/how-we-work/) [How We Grow](https://www.xenonstack.com/about-us/how-we-grow/) [Careers](https://www.xenonstack.com/careers/)
- Book Strategy Call
## Interested in Solving your Challenges with XenonStack Team
## Get Started
Get Started with your requirements and primary focus, that will help us to make your solution
First Name \*
Please enter a valid First Name
Last Name \*
Please enter a valid Last Name
Business Email ID \*
Please enter a valid Business Email ID
Contact Number \*
Please enter a valid Contact Number
Company \*
Please enter a valid Company Name
Industry Belongs To \*
Please Select your Industry
Banking
Fintech
Payment Providers
Wealth Management
Discrete Manufacturing
Semiconductor
Machinery Manufacturing / Automation
Appliances / Electrical / Electronics
Elevator Manufacturing
Defense & Space Manufacturing
Computers & Electronics / Industrial Machinery
Motor Vehicle Manufacturing
Food and Beverages
Distillery & Wines
Beverages
Shipping
Logistics
Mobility (EV / Public Transport)
Energy & Utilities
Hospitality
Digital Gaming Platforms
SportsTech with AI
Public Safety - Explosives
Public Safety - Firefighting
Public Safety - Surveillance
Public Safety - Others
Media Platforms
City Operations
Airlines & Aviation
Defense Warfare & Drones
Robotics Engineering
Drones Manufacturing
AI Labs for Colleges
AI MSP / Quantum / AGI Institutes
Retail Apparel and Fashion
Please select all the required fields before proceeding
Proceed Next
## Interested in Solving your Challenges with XenonStack
## Personalization
Get Started with your requirements and primary focus, that will help us to make your solution
### What is your Key focus areas? \*
AI Workflow and Operations
Data Management and Operations
AI Governance
Analytics and Insights
Observability
Security Operations
Risk and Compliance
Procurement and Supply Chain
Private Cloud AI
Vision AI
### In Which Agentic Platform and Accelerator you are Interested? \*
Akira AI - Agentic AI Platform Multi Agent System
Metasecure - Autonomous SOC
Nexastack – Build and Managed Compound AI Stack
Data Foundry
XAI – Vision and AI Platform – Visual AI Agents
Strategy Consulting
AI Managed Services
Others (Please Specify)
### Which segment does your company belong to? \*
Startup
Scale Startup
SME
Mid Enterprises
Large Enterprises
Federal Government
Non Profits
Others (Please Specify)
### At what stage is your AI use case currently in? \*
Conceptualized: Use case defined, PoC pending
POC Completed
In Production with challenges
Not yet defined
Others (Please Specify)
### What are the primary challenges in adopting AI? \*
Data Quality Issues
Data Privacy and Compliance
Aligning AI with business goals
Unclear ROI from POCs
Integration with existing ERP systems
Scalability Challenges
Moving POCs in Production
Infrastructure Limitation
High Implementation costs
Others (Please Specify)
### What kind of infrastructure does your organization currently using? \*
AWS
Microsoft Azure
GCP
IBM Cloud
Oracle Cloud
On Premises
Others (Please Specify)
### Are you using any Data platform? \*
Databricks
SnowFlake
Amazon Redshift
Azure Synapse Analytics
Microsoft Fabric
Teradata
Oracle Database
SAP Hana
Informatica
Google Cloud BigQuery
Others (Please Specify)
### Preferred Approach for AI Transformation \*
Assisted Intelligence Agents as Co-Pilot
Collaborative Intelligence Agents as AI Teammates
Autonomous Intelligence Agents – AI Agents
Agentic Actions
Agentic Process Automation
### In Which Domain your Solution/Organization belongs to in-terms of Data Privacy, Trustworthy AI \*
Internal Organization
Highly Regulated Industry (Healthcare, Financials etc)
Medium Regulated
Non Regulated
### Captcha Verification \*
captcha text
Please select all the required fields
Review Previous
Submit
## your request has been submitted successfully !
Our XenonStack Team will shortly reach out to you. We are looking forward to showcase how XenonStack can transform your business.
.webp?width=1921&height=622&name=usecase-banner%20(1).webp)
[Enterprise Digital Platform](https://www.xenonstack.com/insights/tag/enterprise-digital-platform)
# CSS Size Adjust for Font Face | A Quick Guide
[Navdeep Singh Gill](https://www.xenonstack.com/insights/author/navdeep-singh-gill) | 10 September 2024
## Introduction to CSS font
Most developers work on different responsive screens, and the most common issue other than the design is font. Sometimes the font gets shrunk, and sometimes the font gets over zoomed-in with different screen sizes.
Most of the time, some of the font families are not supported by browsers, and it creates multiple issues and destroys the feel and UI of the web page.
So now the question arises of how we can resolve this issue. Now we have the answer for it.
> The splitting of code into components or numerous bundles which can be loaded when there is a demand or in parallel. Click to explore about, [Code-Splitting in ReactJs](https://www.xenonstack.com/insights/code-splitting-in-react)
### What is CSS font?
CSS font size adjusts all the measurement units in which font sizes are present, like rem, em, px and viewport units. It is the best solution for responsive font sizes and font families as we know that most of the time, font families are not browser compatible, so font size adjustment is the solution for it.
We can apply the font size adjust property to IDs and Classes and element selectors. According to the screen resolution, it is the best hack for the sudden decrease in font sizes.
### Syntax Introduction
#### Font Size
CSS font-size property shows glyphs of an assumed height based on the font. However, for a non-scalable font, the absolute unit of the font size is matched with the set size of the font. The scalable factor is applied to calculate the font size for the scalable font.
- **Absolute Number**: It refers to the computed font (value) size.
- **Relative Size**: It has the value according to computed font size and font table.
- **Length Percentage**: Specify that the font size is absolute
#### Font Size Adjust
When the font sizes are not behaving properly, we can use the font-size adjust property.
If we want to adjust the font-size property, the elements should be modified based on the height of the lowercase letter instead of the uppercase letter.
- **None**: Specifies that the font's x-axis height is not preserved.
- **Number**: This value refers to the value of the Number of first used fonts, and then the rest are available, which are scaled according to the below formula.
c = (a/a’) s
Where
For Example
If 18px Roboto (with an aspect value of 0.60) was unavailable and the next given font had an aspect value of 0.50, the font size of the substitute font used would be 18\*(0.60/0.50) = 21.75px
### Impact on Performance
When the font sizes are automatically responsive throughout the page so it would help us to increase our webpage performance, the impact of this method is very positive, and almost every developer should use this in their respective projects.
### Calibrating Fonts
You, as the author, determine the calibration target(s) for normalizing the font scale. You might normalize on Times, Arial, or system font, then adjust custom fonts to match. Or, you might adjust local fonts to match what you download.
#### Remote Target
It adjusts local fonts towards downloaded fonts.
> Conversational user interfaces is as easy to use and talk about as talking or having information from a human being. Click to explore about, [Principles for Best Conversational User Interfaces](https://www.xenonstack.com/insights/principles-for-conversational-ui)
## Implementation of CSS
Consider the following snippet, which adjusts a locally available font to match a small src custom font. A small custom font is a target for calibration, a brand font perhaps:
In the above example, we have the local font family (Arial) and the adjusted font-family Arial for the brand. In this case, the Arial font will calibrate according to the required size and provide smoothness according to the responsiveness.
Having a brand typeface as the target is also how Malte's calculator works. Choose a Google Font, and it will calculate how to adjust Arial to swap with it seamlessly. Here's an example of Roboto CSS from the calculator, where Arial is loaded and named "Roboto-fallback":
This process is a blessing for designers and developers.
Note:
#### Local Target
It adjusts downloaded fonts against local fonts.
In this case, we have an advantage for rendering things without any changes or adjustments.
Now after both the targets, we have to do a Final Tuning for a smoother user experience related to
fonts while shifting to multiple devices.
### Final Tuning
#### Ascent Override
It defines the height above the baseline of a font.
#### Descent Override
It defines the height below the baseline of the font.
#### Line Gap Override
It defines the line-gap metric for the font.
> CSS is near revolutionizing the concept of responsive design by adding some new queries. Click to explore about, [Component-Driven Responsive Design](https://www.xenonstack.com/insights/responsive-design-component-driven)
## How does CSS font-size-adjust Works?
In this particular image, we are using the comic sans font family for left-hand side words, and they have an aspect value of 0.53, and Calibri for the right-hand side words has an 0.47. So to resolve this issue, we have to take the highest aspect value in font-size-adjust.
The CSS font adjusts property's actual value impacts the predefined or used value of the 'Font-size' but does not impact its actual value. It only affects the dimension of the relative units supported by the font metrics like rem, ex, ch, etc., but it does not damage the scale of em units.
As we know that line-height values are defined in numerical, the CSS font-size-adjust property does not modify the used line-height value, but it adjusts the font-size value.
### Implementation
#### HTML
``
``
`font-size-adjust Example`
``
``
``
`