手机UI文字排版先保证任务能完成：商品名看得全，价格与单位不分离，提示能读懂，按钮放大后仍可操作。用字体、字号、字重和间距建立层级，再检查窄屏、长文与系统大字体。不要把16px正文或某个“黄金比例”当成所有手机界面的通用标准。
以外卖菜单为例，可以在Pixso的UI设计画板中同时摆放短名称、两行长名称和较大的文字版本，比较商品图、价格、过敏提示与购买按钮的关系。设计的重点不是把所有字塞进固定高度，而是让信息增多时仍有合理顺序。
1. 注重排版的可读性
优秀的排版有助于识别内容、理解导航和避免误操作。移动界面空间有限，字体选择必须放在真实任务里看：读一行商品名、比较价格和连续阅读介绍，对排版的要求并不完全相同。
在外卖APP中，菜单项描述、价格和过敏信息都应清楚可读。类别、筛选器和按钮的文字也要容易辨认，否则用户即使看清商品，仍可能不知道怎样继续下单。不要只用短英文占位文字判断中文菜单是否合适。
1.1 衬线字体与无衬线字体
衬线与无衬线字体各有视觉特征，不能简单认定某一类总是更易读。应比较实际字体在目标字号下的笔画、字面、字间空间与易混字符。中文、英文、数字还可能使用不同的回退字体，需要一起检查。
例如，衬线字体的某些字形可能更容易区分，但小字号下过细或过密的笔画也可能影响辨认。无衬线字体常用于移动界面，却不能代替真实设备上的观察。品牌标题可以有表现力，价格、订单号和操作文字优先保证识别。
电商移动APP排版模板可用于观察引导页的标题与按钮关系。把模板换成自己的长标题后，还应重新判断换行与按钮位置。
1.2 字体组合
字体组合应为内容分工服务。一个界面可以用同一字体的不同字号与字重建立层级；确需组合时，再区分品牌标题与高频操作文字。不要仅为显得丰富，在每张卡片里换一套字体。
在音乐APP排版模板中，可以比较问候语、专辑名和播放信息的主次。用于外卖菜单时，则应把这种分工换成商品名称、价格、规格和提示，而不是照搬视觉尺寸。
字体文件的体积、字重数量和加载方式会影响资源成本，不能简单断言“使用两种字体一定加载慢”。设计交付应明确实际使用的字体与字重，减少无目的的变化。
1.3 易混淆字形
验证码、订单号或优惠码中的1、l、I以及0、O容易混淆。应把这些字符放在目标字号与真实背景中比较，不能只看字体名称或大尺寸字样。必要时还可在内容规则上避免使用难区分的字符。
1.4 字号和点击区域不是同一件事
文本需要能读清，按钮也需要有足够的可操作区域；两者不能互相替代。加大按钮的内边距可以扩大点击区域，不必把标签放大到挤占整行。反过来，文字很大但周围没有可点击空间，仍可能难以操作。
手机设计稿与原生实现也要区分单位。Android的布局dp与字体sp承担不同作用，字体sp会响应用户的文字大小偏好；不能把设计稿中的一个px值不加说明地用到所有平台。
在Pixso里选取手机画板后，先放入真实菜单数据：例如较长的套餐名称、带小数的价格、多种规格与一条过敏提示。再复制一个大文字版本，看内容能否自然增高。避免在每个问题出现时都用缩小文字解决。
2. 建立清晰的视觉层次
字号、字重、颜色与间距可以共同表达主次。外卖菜单中，商品名与价格服务于选择，规格帮助比较，过敏提示关系到判断，不能简单归入最淡最小的“辅助文字”。网格帮助对齐，内容的重要性决定视觉顺序。
2.1 正文行高
合适的行高与字体、行宽和内容长度有关。先用完整的商品说明检查相邻行是否粘连、换行后能否顺利找到下一行，再调整行高。商品简介、长篇说明和短标签可以使用不同规则，不必都采用同一个倍数。
价格与单位尽量作为一个可理解的整体呈现；商品名变成三行时，价格可以移至下一行，而不是压缩到难读的角落。过敏提示应跟随对应商品，不要在高度变化后跑到另一张卡片附近。
2.2 标题行高
标题周围的留白能够帮助区分层级。长标题变成两三行后，行高应使它看起来仍是一个标题，同时不让上下行笔画相碰。不能用字母笔画的宽度推算所有标题的行高，尤其不能忽略中文、重音符号和不同字体的实际字面。
先给标题足够的容器高度，再检查它与正文之间的间距。只设置一个适合单行标题的固定高度，会让较大的系统文字或较长的译文被截断。
2.3 眉题文字
眉题是位于主标题上方的短标签，用来补充分类或上下文，例如“本周推荐”“课程系列”。它应当补充主标题，而不是重复主标题中的相同内容，也不应成为必须细读的关键说明。
在菜单详情页，眉题可以提示“季节限定”，主标题继续承担商品名称。若标注的是重要限制，应放在用户能够清楚阅读的位置，不应只为了版式完整而缩成很小的装饰。
3. 让文字放大与辅助阅读都可用
视觉可读性与屏幕阅读器是两类相关但不同的问题。字体的笔画、对比和间距影响人眼辨认；屏幕阅读器主要依据界面暴露的文字、语义、控件名称和阅读顺序工作，不是通过“辨认衬线字体”来读出按钮。
例如，一个只有加号图标的按钮需要有“添加这份套餐”之类有意义的操作名称；商品名称、价格、规格和过敏提示应按合理顺序被读出。Android无障碍设计原则强调为界面元素提供清晰的标签和分组，不能用换一种字体代替这些工作。
下面的字重与样式清单有助于整理视觉层级，但它本身不能证明页面支持屏幕阅读器。开发交付还需要单独标注控件名称、状态和阅读顺序。
系统文字放大同样需要布局配合。iOS的Dynamic Type让用户选择适合自己的文字大小；Android 14的字体缩放支持最高200%并采用非线性缩放。不要假定所有文字都按同一比例变化，也不要用设计稿整体缩放来模拟全部系统行为。
在较大的文字设置下，可以把横排的商品名与价格改为纵排，让底部购买按钮支持必要换行，并使内容区继续滚动。深色模式也不是自动解决阅读问题：无论明暗主题，文字与背景都要保留清楚的对比，提示不能只靠颜色区分。
4. 用完整下单任务测试排版
先准备会暴露问题的数据：很长的商品名、含英文的规格、四位数价格、多行说明和缺少图片的商品。默认字号下顺利显示，不代表这些内容在窄屏或大字号下也能完成任务。
- 找到商品：检查分类和搜索结果标题能否辨认，长名称是否仍能区分不同套餐。
- 理解内容：阅读价格、规格和过敏提示，观察换行是否使单位、条件与对应内容分离。
- 进行选择：调大系统文字后，规格和数量控件是否可操作，按钮文字是否被裁掉。
- 使用辅助阅读：在实现版本中打开屏幕阅读器，按顺序听取名称、价格与按钮含义，检查是否有无名称或重复朗读的控件。
- 回到列表：检查选择状态是否保留，页面重新出现后用户是否还能找到刚才的商品。
将发现的问题标注到相应画板：哪一条长名称导致高度不足、哪个按钮需要多行、哪个图标缺少操作名称。设计稿负责说明预期排列，实际系统字号、辅助技术和字体回退需要在实现端验证；这样修改才会落到用户真正遇到的阅读障碍上。
