recoilme / tgram

typegram: open source publishing platform
http://tgr.am
GNU General Public License v3.0
335 stars 32 forks source link

Шрифт в статьях #83

Open muhomorfus opened 6 years ago

muhomorfus commented 6 years ago

По моему мнению, в статьях было бы очень круто использовать шрифт Roboto Slab. Возможно это вкусовщина, но мне кажется, что этот шрифт более читабельный с экранов. С Roboto Slab это будет выглядеть так: screenshot_20180816_222137

recoilme commented 6 years ago

Тут скорее таск про то что шрифты долго грузятся и думаю о системных https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

recoilme commented 6 years ago

Тэкс что получится если свалить на систем шрифты: Основной шрифт:

font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif;

Меню и навигациии заголовок статьи (я не нашел ничего долее подходящего, в системе готового, это нормальная будет пара к винигрету системных шрифтов??):

font-family: 'Georgia', serif;

Первый параграф, который лид - может вообще не надо ничего делать? Другие варианты font-family: 'Georgia', serif; Или как то разрядить немножко межбуквенный интервал обычного шрифта, лайтовенько?

И меню top mid btm new

Как тебе такое Илон Маск? @hiidoshick

recoilme commented 6 years ago

Как есть (паратайповские)

screen shot 2018-08-17 at 10 16 51
recoilme commented 6 years ago

Меню и заголовки и 1 параграф джорджия, текст статьи - системный (Helvetica Neue на маке)

screen shot 2018-08-17 at 10 28 13 screen shot 2018-08-17 at 10 29 38
recoilme commented 6 years ago

Наоборот, все ситемным , кроме текста статей и коментов - он джордией

screen shot 2018-08-17 at 10 38 25 screen shot 2018-08-17 at 10 39 36
recoilme commented 6 years ago

склоняюсь к джорджия для всех меню - системные шрифты для тела статей

Вроде красиво

screen shot 2018-08-17 at 11 48 48 screen shot 2018-08-17 at 11 52 18
recoilme commented 6 years ago

Мне кажется это бесконечная история. Пусть пока будет так

screen shot 2018-08-17 at 12 32 49
recoilme commented 6 years ago

Тяжело читается. Поставил все ситемным , кроме текста статей и коментов - он - джордией

muhomorfus commented 6 years ago

Простите за долгий игнор, но я весь день не имел доступа к гитхабу((( Насчёт долгой загрузки, я провел своё мини-исследование: сравнивал скорость загрузки одинаковых страниц с огромным количеством символов (~500000 символов). Сравнивал системный шрифт Georgia и Roboto Slab. В итоге потеря в скорости загрузки составила чуть больше 5%, при этом шрифт Roboto Slab находился не на компьютере, а импортировался с гугловского сервера. При плохой скорости интернета у хостинг-провайдера (что было бы странно) потеря может быть больше, но если хранить шрифт локально на сервере, то скорее всего потеря будет меньше (но это неточно). Так что мне кажется, что особого ущерба скорости использование стороннего шрифта не нанесёт, но может здорово улучшить внешний вид сайта и читаемость текста.

muhomorfus commented 6 years ago

Насчёт использования значков вместо надписей - значки как по мне понятнее и лучше выглядят.

muhomorfus commented 6 years ago

Мне кажется, очень необычно будет использование моноширинного шрифта в полях ввода. Если правильно вписать его, то получится очень даже круто.

muhomorfus commented 6 years ago

Мне такой вариант нравится screenshot_20180817_205513

muhomorfus commented 6 years ago

Но все же лучше вам почитать шрифт и понять, не устают ли от него глаза, удобно ли читать, не падает ли скорость чтения и т.д.

muhomorfus commented 6 years ago

кстати, отступы сбоку у кнопки нужно побольше сделать вот так screenshot_20180817_205916

recoilme commented 6 years ago

Привет! Не о чем извиняться, все должно быть в удовольствие по мере наличия времени

Смотрел моноширинки, но немного в другом контексте, пробовал меню ими сделать - очень много площади сжирают по ширине. Насчет ввода моноширинным - интересная идея а как это сделать? Это можно через css? там техтареа js редактора меняет на див - нетривиально мб это все

по скорости - понимаю что заморочка - на скачивание 900 мс уходит с учетом 4 или 5 шрифтов что раньше были( 400, 700 капшен регуляр) один наверно мс 300 сожрет и первый раз только. Пока хочется попробовать остаться на джорджии она вроде как стоит на всех ос и один из лучших шрифтов по читаемости даже на фиговых разрешениях.

Думаю позже вернуться еще раз к шрифтам, но пока - нравится что получилось.

muhomorfus commented 6 years ago

Я бы попробовал создать родительский div к textarea вот так: <div style="font-family: 'Ubuntu Mono'"> <textarea></textarea> </div>