Fonts size on iphone

Дизайн для iOS: как выбрать размер шрифта (для iOS11)

Вы читаете «Размеры шрифта в UI дизайне: полное руководство».

Статьи по теме, которым ещё предстоит выйти: Введение · iOS · Android · Веб · Принципы

Создаёте дизайн приложения для iPhone или iPad и не знаете, какие размеры шрифтов лучше использовать? Тогда ловите мой конспект, который я быстренько сварганил для тех, кто (а) пользуется San Francisco — шрифтом Apple по умолчанию (или чем-то похожим) и (б) хочет придерживаться стиля iOS.

Типографика для iPhone: гайдлайны

Здесь я кратко описал стили, ниже найдете наглядные примеры и более подробные рекомендации.

Давайте подробно разберём каждый из элементов, да с примерами. Поговорим не только про то, какой кегль где использовать, но и в целом о том, как Apple стилизует тексты.

Заголовок

В iOS 10 используются массивные заголовки, вроде слова «Inbox» на картинке ниже — кегль здесь 34pt, и это самый крупный текст, который можно встретить на iPhone.

А вот при прокрутке заголовок уменьшается до 17pt — размера по умолчанию для тех текстовых кнопок и ссылок.

Обратите внимание, что заголовок сжимается до размера текста по умолчанию, однако тут у него бòльшая жирность и располагается он сверху по центру — ясно, что это заголовок. Для начинающего дизайнера Эрика (меня, то бишь) это стало откровением, потому что я всегда думал, что заголовок обязательно должен быть крупнее, чем обычный текст (а не просто жирнее по начертанию).

Списки

Списки — основа мобильных приложений. Даже не задумываешься, какие элементы — на самом деле списки, пока не поместишь их на узкий вертикальный экран. Давайте посмотрим:

В режиме списка — например, в электронной почте — iOS подаёт имя отправителя как текст стандартного размера (17pt), а тему письма и предпросмотр — как второстепенный текст, меньший по размеру (15pt). На этом стоит заострить внимание — когда я делал свои первые шаги в дизайне, меня тянуло сделать обратное: для основного текста установить размер по умолчанию, а имя отправителя сделать ещё больше. Видите тенденцию? В iOS кегль ведёт себя совсем не так, как можно было бы наивно ожидать.

В разделе настроек сами пункты написаны текстом по умолчанию, хотя заголовки внутренних разделов (напр. «AirDrop») — мельче (ничосе!). Но несмотря на то что заголовок меньше, он толще по начертанию, то есть всё же воспринимается как заголовок.
Хитро.

У подписей («AirDrop lets you share instantly. ») размер 13pt, самый маленький среди всех наших интерфейсных примеров.

Элементы управления

Давайте-ка взглянем на некоторые элементы управления.

Сейчас всё должно казаться уже достаточно понятным. Единственное, что может вызвать удивление — это сегментированная кнопка, текст на которой размером 13pt (кажется, что маловато). Я так подозреваю, Apple посчитал, что раз уж какие-то из этих кнопок будут выполнять несколько функций, то шрифт на них по умолчанию должен быть более мелким, даже если функции всего две.

Параметры текста в поисковой строке — значения размера и жирности — стоят по умолчанию, а вот цвет текста бледный, и меняется, когда начинаешь вводить запрос.

Модальные окна

Этот небольшой попап отлично иллюстрирует то, как в Apple оформляют тексты.

Размер заголовка: по умолчанию. Он может показаться недостаточно крупным, но мы о таком уже говорили выше. Жирное начертание компенсирует небольшой размер.

Размер пояснительного текста: 13 pt. Я предполагал, что он будет 15 pt, как и размер основного текста в электронных письмах, но, может, они просто захотели уместить тут текст в одну строку?

Размер текста при вводе пароля: 13 pt. Это было бы слишком мелко для ввода стандартного текста, но — как я подозреваю — здесь вы всё равно увидите только ряд чёрных точек, потому не столь важно, какого они размера.

Размер текста для слов «OK» и «Cancel»: по умолчанию , однако так как все надеются, что вы нажмёте на «OK», Apple чуточку больше обращает ваше внимание именно на это слово, дав ему более жирное начертание.

В размерах прослеживается четкая иерархия, тут можно почерпнуть несколько приёмов стилизации текста, но не обошлось и без странных несостыковок.

Панель действий

И вот мы наконец добрались до панели действий (action bar), которая находится в нижней части экрана. Нигде больше в интерфейсе я не встречал настолько мелкого кегля — 10 pt. Я бы оставил такой мелкий шрифт на самый крайний случай.

Типографика для iPad: гайдлайны

На момент написания этой статьи (весна 2018) плотность пикселей у iPad была в целом ниже, чем у iPhone. Это значит, что элемент на iPad будет отображаться слегка больше, чем на макете или в приложении на iPhone. По этой причине большинство кеглей не разнится между айфонами и айпадами. Если вы работаете над дизайном для iPad-приложения, почитайте раздел про iPhone по тексту выше.

Как я говорил, самая большая разница здесь в заголовках. Пространства на экране айпада больше, и идеальный размер кеглей остаётся идеальным, однако в вашем распоряжении гораздо больше пространства (чем на айфонах) для того, чтобы сделать заголовки крупнее.

Итак, пока в одних приложениях до сих пор используется айфоновский стиль заголовков с размером 17pt:

В других он крупнее.

В паре-тройке нативных приложений используется самый жирный по начертанию шрифт SF — очень жирный. Я считаю, что это подлинная «iPad-версия» айфоновских жирных заголовков, однако дизайнеры Apple странным образом неконсистентны в их использовании.

Многие нативные iPad-приложения придерживаются стиля айфон-дизайна и кегля в 10 pt в нижних таб-барах. Выше пример музыкального приложения с нетипичным меню и размером текста 17 pt. Мне кажется, что лучше «переводить» дизайн на более крупный экран именно так.

В целом, работа iPad подразумевает следование стилям iPhone, работая с большим пространством — можно креативить в заголовках и шапках.

Шрифт San Francisco: гайдлайны

В iOS шрифт по умолчанию — San Francisco. Его можно скачать бесплатно здесь. Использовать этот шрифт при создании iOS-приложения не обязательно, но если вы хотите приблизить свой дизайн к интерфейсу iOS, то без него не обойтись.

Конечно же, у Apple есть свод дополнительных правил для использовании San Francisco.

Во-первых, используйте SF Pro Display с кеглем 20 или больше. SF Pro Text используйте только для основного текста и тех, что мельче.

Во-вторых, задумано, что в San Francisco у символов разная разрядка при разных размерах шрифта. Поэтому если вы хотите идеально сымитировать «стиль iOS», то, прошу, вот несколько вариантов:

Вручную настройте разрядку символов в зависимости от выбранного размера шрифта, следуя по таблице ниже

Берите стили текста прямо из Apple iOS UI Design Sketch (слэш Photoshop слэш XD) library

Воспользуйтесь удобным плагином Sketch для автоматической и точной настройки расстояния между символами в SF в зависимости от размера шрифта.

Или просто не обращайте внимание на то, что Apple просит вас снизить разрядку символов на сотую пикселя. Но выбор за вами: либо вступать в игру, либо нет.

San Francisco является шрифтом по умолчанию для iPhone и iPad. Поэтому если вы им пользуетесь, лучше знать обо всех этих ограничениях. С другой стороны, вам, конечно, никто не запрещает создавать приложения iOS с использованием любого другого шрифта. Будьте осторожны: другой шрифт может оказаться крупнее или мельче, он может хуже читаться, даже если будет того же размера.

Источник

Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?

Our site renders with inconsistent font sizes on mobile Safari — and as far as we can tell, only Mobile Safari. This very much has stumped us.

We analyzed the site with Firebug, and the incorrect areas are inheriting the right styles, yet the fonts are still rendered with the wrong sizes.

2) Conduct a search for a domain name.

The boxes on the left side show the incorrect font sizes. The font size should match the font size on the right side (both box titles and box copy). For instance, the titles, «Variations» and «Twitter,» are much larger than the title, «Alternate Endings.»

6 Answers 6

Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100% (or none ), it won’t be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they’ll have to pan horizontally to read each line of text!

Ideally you would fix this by using Responsive Web Design techniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).

If that’s not an option, and you’re stuck serving a desktop site to mobile users, then see if you can tweak your design so none of your blocks of text are wider than the mobile device’s device-width (e.g. 320px for many portrait phones) (you can use mobile-specific css to avoid affecting desktop browsers), then Mobile Safari won’t need to increase any font sizes (and browsers which reflow text, like the Android Browser and Opera Mobile, also won’t need to change your layout).

Finally if you really need to prevent Mobile Safari from adjusting your font sizes you can set -webkit-text-size-adjust: 100% , but do this only as a last resort since it is likely to cause mobile users to have difficulty reading your text, as it’ll either be too small or they’ll have to pan from side to side after every line they read. Note that you must use 100% not none because none has nasty side-effects in desktop browsers. There are also equivalent -moz-text-size-adjust and -ms-text-size-adjust properties for Mobile Firefox and IE Mobile.

Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:

Though it’s not ideal to hardcode 320px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.

Источник

Как в iOS 15 менять размер текста в отдельно взятом приложении

Одной из особенностей новой iOS 15 стала возможность регулировать размер текста в каждом отдельном приложении. Фишка изначально была представлена в рамках обновления опций для людей с ограниченными способностями, но в итоге может оказаться полезной для всех владельцев смартфонов Apple.

В предыдущих версиях системы была возможность менять размер текста только для всех программ одновременно.

📌 Спасибо re:Store за полезную информацию. 👌

Как менять размер текста в приложениях на iPhone

1. Перейдите в Настройки – Пункт управления.

2. Добавьте в список Используемые элементы управления переключатель Размер текста.

3. Запустите приложение, в котором хотите изменить размер текста.

4. Откройте Пункт управления и нажмите кнопку аА.

5. В нижнем блоке выберите область действия настройки: текущая программа или все установленные приложения.

6. Выберите подходящий размер текста при помощи ползунка.

Так можно настроить комфортный масштаб для каждого приложения на устройстве.

Источник

The iOS Font Size Guidelines (Updated for iOS 15)

Erik D. Kennedy В· Updated Aug 7, 2021

You’re reading Font Sizes in UI Design: The Complete Guide. Quickly navigate to other chapters: Intro · iOS · Android · Web · Principles

Designing an iPhone or iPad app and not sure what font sizes to use? Here’s the quick and dirty summary of font sizes assuming (a) you’re using Apple’s default font, SF Pro (or similar) and (b) you want to match iOS conventions.

iPhone Typography Guidelines

Here’s a quick summary of styles. See below for visual reference and more in-depth guidelines.

Element	Sizing	Notes
Titles (of pages or modals)	17pt	Medium font weight iOS 10+ page titles are 34pt before scrolling, 17pt once scrolled
Paragraph text, Links	17pt
Secondary text	15pt	Lighter color as well
Tertiary text, Captions, Segmented buttons	13pt	Skip a font size between secondary and tertiary text
Form controls (Buttons, Text inputs)	17pt	Highlight important buttons with medium font weight
Tab bar, Action bar	10pt	Don’t go smaller than this

Let’s break this down element-by-element and look at illustrated examples. We’ll cover not just the actual font sizes, but also how Apple thinks about text styles.

Titles

iOS has some big chunky titles, like “Inbox” below – at 34pt, it’s about the biggest text you’ll see on an iPhone.

But once you scroll, titles morph to 17pt, the default size for text-based actions as well.

Note that the title shrinks to the same size as default text – but they use a heavier weight and top-and-center placement to distinguish it as a title. This was a bit of a revelation to beginning-designer-Erik, as I always expected that titles would be bigger than normal text (not simply bolder).

List Views

Lists are the bread and butter of phone apps. You never knew how many things were actually lists until you started displaying them on a tall, thin screen. Let’s look at those next.

In a list view – in this particular example, emails – iOS treats the sender’s name as normal-sized text (17pt), and the subject and preview as secondary, smaller text (15pt). I think this is worth noting, because again, starting out as a designer, my instinct was to do the opposite: make the body the default size and make the sender’s name even bigger. Notice a trend here? iOS doesn’t style font sizes the way you might naively expect.

On the settings page, the options themselves are written out in the default text style, even though the section titles (e.g. “AirDrop”) are smaller (whoa!). But notice that even though the title is smaller, it’s a thicker font weight, meaning you can still recognize it as a title. This balance of emphasizing and deemphasizing styles is crucial.

The notes below the settings (“AirDrop lets you share instantly…”) are written in 13pt font, which is the smallest we’ve seen in any of these UI examples.

Form Controls

Let’s look at a few controls real quick.

This should be starting to feel pretty straightforward now. The only surprise is the segmented button at 15pt size (doesn’t match the other 17pt controls). My hunch is that, since Apple knew some of these buttons would have many options, they just defaulted to a smaller text size for the control, even if there are only two options.

Search uses the default size and weight, though the color is a bit lighter before you start typing in.

Modals

This little popup is a super illustrative example of how Apple styles text.

• The title is the default size. Which you would think would not be enough, but what have we seen before? A thicker font weight to make up for it not being any bigger.
• The explanatory text is 13pt. I would’ve guessed it would be 15pt, like the email body text, but perhaps they just wanted it to fit on one line?
• The password input is 13pt, which would be too small for a normal text input, though my hunch is because you’re only going to see a bunch of black circles, it doesn’t need to be the default size.
• “OK” and “Cancel” are the default size, but since “OK” is hopefully what you will press, Apple draws a little more attention to it by making it a thicker weight.

These font sizes follow a clear pattern, and they illustrate some nice text-styling tricks, but there are some odd inconsistencies for sure.

Action Bar

Finally we’ve got the action bar at the bottom of the screen. This is the smallest text I could find in the whole UI – 10pt. I would stay away from such a small size as much as possible.

iPad Typography Guidelines

As of last update (Aug 2021), iPads generally have lower pixel densities than iPhones (though this has been true for years). Since iPads have fewer pixels per inch, anything that’s sized in “pixels” or “points” will be slightly larger on an iPad. Because we hold iPads slightly farther away from our eyes than iPhones, this balances out nicely – you can keep most of the same font sizes on iPad and iPhone. So start any iPad typography work by reading the iPhone section above.

That being said, the biggest difference is with titles. As you have a larger canvas to work with, an ideal body font size remains ideal – but you have much more space for larger titles.

So while some applications still use the iPhone-style 17pt titles…

Others are bigger.

So overall, for iPad, you’re going to be following a lot of iPhone styles, but with a little more room to get creative in your headers.

SF Typography Guidelines

The default iOS font is SF, or San Francisco. You can download SF Pro for free. It’s not necessary to use SF when creating an iOS app, but if you want it to have that default iOS look, then SF is your new best friend.

Apple would like you to be a doll and follow a few extra rules when using San Francisco.

First, use SF Pro Display at font sizes 20 or higher. Only use SF Pro Text for body text and smaller.

Font Size	Font Family
19 or smaller	SF Pro Text
20 or larger	SF Pro Display

Second, San Francisco is designed to have different character spacing at different sizes. So if you want to perfectly mimic the “default iOS” look, have a few options:

1. Hand-adjust the character spacing depending on your font size according to the table below
2. Use text styles directly from the Figma iOS library or Apple’s iOS UI Design library (for Sketch, Photoshop, or XD)
3. Use this handy Figma plugin or Sketch plugin to automatically have SF’s character spacing set correctly, depending on its font size

Or just ignore the fact that Apple tells you to change character spacing down to the hundredth of a pixel. Live free or die, man.

Font Style	Font Size	Character Spacing
Bold title	34pt	0.41
Body text	17pt	-0.41
Secondary text	15pt	-0.24
Tertiary text	13pt	-0.08
Smallest text	10pt	0.12

San Francisco is the default font for iPhone and iPad. So if you’re using it, best to know about these restrictions. However, you can, of course, design iOS apps in any font you want. Be careful that others might appear bigger or smaller, or less legible, even at the same size.

One Final Note 😎

If this is your first time here, you might also be interested in:

• Learn UI Design, my full-length online video course on user interface design
• The Design Newsletter, a 50,000+ person newsletter with original design articles aimed at giving you tactical advice to improve your UX/UI skills.

Some people have some really nice stuff to say about the newsletter.

Thank you for your newsletter. It’s possibly the best newsletter I’ve received since 1999, when I started freelancing.

Tricia Littlefield
Founder, TheSimpleWeb

Each time I receive an email from you, I’m like ‘Damn, this is a long email! No way will I read all of this’, then I began to read and I’m like ‘Damn, this is so freaking brillant’ and read it all.

Jean-Philippe
UX Strategist, Freelance

Источник