Tajna iza Appleovog novog San Francisco fonta. Korištenje fontova sučelja sustava u web dizajnu

Helvetica (lijevo), San Francisco (desno)

San Francisco font već je korišten u Apple Watchu, a već je postao standardni font za Apple uređaje: Apple Watch, iPhone, iPad i Mac.

Apple Watch

Apple koristi Helveticu kao sistemski font za iOS od predstavljanja prvog iPhonea. A na Mac OS X-u promijenili su font iz Lucida Grande u Helvetica od izdanja 10.10 Yosemite. Zašto je Apple odlučio pokopati Helveticu, najpoznatiji i najomiljeniji font na svijetu?

U malim oblicima Helvetica je slaba

To kažu Helvetica nije prikladna za tekstove male veličine. Kada je sistemski font u Mac OS X Yosemite promijenjen u Helvetica, mnogi su dizajneri izjavili da takav font ovdje uopće nije prikladan.

"Helvetica je sranje" Erik Spiekermann

Kada upisujete tekst malim fontom, slaba čitljivost Helvetice postaje vidljiva. Helvetica zamagljuje takav tekst. Neki su tekstovi mješoviti i teško razumljivi. Mnogi ljudi kažu da je Apple stvorio San Francisco fontove kako bi mali tekst na Apple Watchu učinio čitljivijim.

Slova su pomiješana u malim tekstovima

Ali danas je razlučivost zaslona uređaja veća od one tiskanih materijala, a tekstovi u iPhoneu nisu uvijek tako mali kao u Apple Watchu. Zašto je Apple promijenio sistemske fontove ne samo u Apple Watchu, već iu iOS-u i Mac OS X-u.

San Francisco nije samo jedan font

San Francisco fontovi imaju mnoge značajke koje ih čine vrlo čitljivima. Zapravo San Francisco fontovi za Apple Watch i za iOS/Mac dva su fonta s malim razlikama.

Obitelj fontova pod nazivom "SF" koristi se za iOS/Mac, a "SF Compact" koristi se za Apple Watch. Možete uočiti razliku u zaobljenim slovima o, e. SF compact ima ravnije okomite linije od SF-a.

SF i SF Compact

Ova razlika daje tekstovima u SF Compactu veću marginu (uvlaku) između slova, što rezultira većom čitljivošću na malim uređajima poput Apple Watcha.

Osim toga, fontovi SF i SF Compact podijeljeni su u dvije potfamilije: "Text" i "Display". To je ono što Apple naziva "Optičke veličine". “Tekst” je namijenjen za tekstove manje veličine, a “Prikaz” za tekstove veće veličine.

Obitelj iz San Francisca

Kao što sam već spomenuo, kada koristite sans-serif fontove poput Helvetice, dva susjedna slova se "miješaju", a slova poput "a", "c", "s" u maloj veličini izgledaju slično.

Prikazni i tekstualni fontovi

Potfamilija "Tekst" ima više margina od potfamilije "Prikaz". A otvori ovih fontova teksta također su širi, tako da su male veličine čitljivije.

San Francisco fontovi su dinamični

Jedna od sjajnih stvari o San Franciscu je kako dinamički optimizira slova. Sustav automatski mijenja font Display/Text ovisno o veličini teksta. Vrijednost praga je 20pt.

Dizajneri i stručnjaci više ne moraju razbijati glavu o tome koji font odabrati. Na primjer, samo dodajte sistemski font u UILabel i uređaj će odabrati odgovarajući stil za vas.

Ono što me zadivljuje kod San Francisco fontova je način na koji su prikazane dvotočke. U osnovi, dvotočka se postavlja neposredno iznad linije fonta, tako da nije okomito centrirana ako se pojavljuje između brojeva. A u fontovima San Francisco dvotočke se automatski poravnavaju.

Okomito centrirano debelo crijevo

San Francisco - font digitalnog doba

Kao što vidite, San Francisco fontovi pažljivo su dizajnirani kako bi bili laki za čitanje u bilo kojoj veličini i na bilo kojem uređaju.

Helvetica, koju su zamijenili San Francisco fontovi, nastala je u Švicarskoj 1957. godine, kada nije bilo digitalni uređaji. Helveticu već sada koriste mnoge tvrtke kao korporativni font, a nema sumnje da će se iu budućnosti koristiti kao kvalitetan klasični font.

S druge strane, San Francisco je moderan font. Dinamički mijenja stilove prema kontekstu. Ovo je nešto poput "izvornog" fonta, kao da je posebno stvoren za približavanje digitalne ere.

San Francisco je Appleov font koji je prvi put predstavljen svojoj publici krajem 2014. godine. Do tada je tvrtka koristila font "" za koji je Apple vjerovao da postoji slabostima zbog slabe čitljivosti sitnog teksta.

Sada cijela Apple linija proizvoda pouzdano drži svoje vlastiti font“San Francisco”, koju možete besplatno preuzeti pod ovim člankom. Obitelj “San Francisco” podijeljena je u dvije potfamilije, to su “Text” i “Display”. Razlika je u većoj međuslovnoj udaljenosti u prvoj opciji. Ova karakteristika podfamiliji daje bolju čitljivost male veličine fonta, a to je tip koji se koristi na malim uređajima tvrtke kao što je iWatch.

Podrška za ćirilicu (ruski jezik), kao i engleski, nedvojbeno je prisutna.

Preuzmite besplatni font "San Francisco"

Arhiva, koju možete preuzeti na kraju članka, sadrži 21 stil (gotovo polovica za svaku potfamiliju) u tri različita formata.

Podfamilija " Tekst" - ovo: Podebljano, Podebljani kurziv, Teška, Teški kurziv, kurziv, Svjetlo, Svijetli kurziv, srednje, Srednji kurziv, Redovno, Poludebljano I Poludebljan kurziv.

Zauzvrat, podfamilija " Prikaz" - ovo su stilovi: Crna, Podebljano, Teška, Svjetlo, srednje, Redovno, Poludebljano, Tanak I Ultralaki.

Imajte na umu da je font licenciran od strane Applea, što znači da ga imate pravo koristiti u razvoju softver na Apple proizvode, kao i na snimke zaslona sličnih proizvoda.

Zapamtite ovo i sretno u vašim kreativnim nastojanjima!

Apple je koristio skup fonta Helvetica kao sistemski font za iOS od izdavanja prvog iPhonea. Također su zamijenili Lucidu Grande u Mac OS X-u počevši od verzije 10.10 Yosemite. Pa zašto se Apple sada odlučio riješiti najomiljenijeg fonta na svijetu?

iOS 9 sada je službeno dostupan svima, a nova obitelj fontova nazvana San Francisco suptilno je zamijenila Helveticu Neue.

Helvetica (lijevo) i San Francisco (desno)

Do tog trenutka već su korišteni u Apple Watchu. Sada je San Francisco postao jedinstveni standardni font za sve platformske proizvode: Apple Watch, iPhone, iPad i Mac.

Apple koristi obitelj Helvetica kao sistemski font za iOS od izdavanja prvog iPhonea. Također su zamijenili Lucidu Grande u Mac OS X-u počevši od verzije 10.10 Yosemite. Pa zašto se Apple sada odlučio riješiti najomiljenijeg fonta na svijetu?

Male veličine slaba su točka Helvetice

Postoji mišljenje da Helvetica nije prikladna za male tekstove. Kada je Helvetica zamijenila prethodnu obitelj u Mac OS X Yosemite, mnogi su dizajneri smatrali da je zamjena neprikladna.

“Helvetica je sranje” s bloga Erika Spiekermanna.

Slabu čitljivost Helvetice možete provjeriti na sljedeći način. Upišite mali tekst i zamutite ga. Neki njegovi fragmenti bit će "pomiješani" tako da će biti teško razaznati njihov sadržaj. Kažu da je Apple razvio San Francisco obitelj upravo kako bi mali tekst na Apple Watchu bio čitljiviji.

No, razlučivost modernih pametnih uređaja premašuje razlučivost tiskano izdanje, a tekstovi na iPhoneu nisu uvijek tako mali kao na Apple Watchu. Zašto je onda Apple napravio zamjenu ne samo u Apple Watchu, već iu iOS-u i Mac OS X-u?

San Francisco - raznolik

San Francisco fontovi imaju mnoge značajke koje ih čine lakima za čitanje. Zapravo, San Francisco verzija za Apple Watch i verzija za iOS/Mac dva su različita fonta.

Obitelj fontova pod nazivom "SF" koristi se za iOS/Mac, dok Apple Watch koristi "SF Compact". Možete vidjeti razliku u zaobljenim slovima kao što su 'o' i 'e'. Okomite linije SF Compacta su ravnije od onih SF-a.

Ova razlika uzrokuje da tekst upisan pomoću SF Compact ima više razmaka između znakova, što rezultira tekstom koji je čitljiviji kada se čita na malim uređajima kao što je Apple Watch.

Osim toga, svaka od obitelji je podijeljena u još dvije potfamilije: “Text” i “Display”. Apple to naziva "Optičke veličine". Potfamilija Tekst dizajnirana je za tekstove male veličine, dok je podfamilija Prikaz za tekstove velike veličine.

San Francisco obitelj fontova

Kao što je gore spomenuto, u sans serif fontovima (ili sans serifs) kao što je Helvetica, dva susjedna slova se "miješaju", a slova kao što su "a", "e", "s" postaju vrlo sličan prijatelj jedan na drugom s malim veličinama teksta.

Usporedba uvlaka između znakova u fontovima podobitelji Display i Text

Usporedba fontova podfamilije Display i Text na primjeru jednog znaka

Međutim, potfamilija teksta dizajnirana je na takav način da su uvlake između znakova u njoj povećane u usporedbi sa znakovima u podfamiliji prikaza, a praznine u njima su proširene kako bi se poboljšala čitljivost s malim veličinama teksta.

San Francisco je dinamičan

Jedna od sjajnih stvari o San Franciscu je da su slušalice dinamički optimizirane. Prikaz i tekst zamjenjuju jedan drugoga prema veličini prikazanog teksta. Prag je ovdje postavljen na 20pt.

Dizajneri i inženjeri ne moraju brinuti o odabiru prave opcije iz obitelji. Samo dodajemo sistemski font u UILabel, na primjer. Sustav će sam odrediti koje slušalice trebate.

Međutim, ono što je doista impresivno kod San Francisco fontova je način na koji prikazuju dvotočke. Obično ga u drugim fontovima vidimo točno iznad donjeg retka, tako da u slučajevima kada se nalazi između brojeva, dvotočka nije okomito centrirana. Međutim, u San Francisco fontovima ovo se poravnanje događa automatski.

Automatski poravnajte dvotočku okomito prema sredini

San Francisco nam je došao iz digitalnog doba

Kao što vidite, San Francisco fontovi dizajnirani su i dizajnirani kako bi tekst bilo koje veličine i na bilo kojem uređaju bio lak za čitanje.

Helvetica, koju su zamijenili, nastala je u Švicarskoj 1957. godine, kada još nije bilo digitalnih uređaja. Međutim, još uvijek ga mnoge tvrtke koriste kao korporativni font i bez sumnje će se nastaviti koristiti u budućnosti kao dobar klasični font.

San Francisco je, naprotiv, moderan font. Pismo mu se dinamički mijenja, ovisno o kontekstu. Može se nazvati svojevrsnim "nativnim fontom" digitalnog doba.

Sada, možda po prvi put od prvog Macintosha, ima smisla zainteresirati se za korištenje sistemskih fontova za sučelje. Oni su zabavna i svježa alternativa web tipografiji - i ne zahtijevaju hosting na vašem poslužitelju ili poslužitelju treće strane. Kako mogu koristiti sistemske fontove na web stranici i koji problemi mogu nastati ovdje?

U posljednjih godina Pojavilo se mnogo zanimljivih sistemskih fontova za sučelje. Google je objavio Roboto(i nastavlja razvijati ovaj font uz redovita ažuriranja), Apple je objavio San Francisco, a dizajner Eric Spiekerman stvorio je font Fira Sans za Mozillu. I to nije sve, ne zaboravite na Microsoft. Oni su bili ti koji su pokrenuli ovaj trend puštanjem u promet Windows Phone s Metroovim dizajnerskim jezikom koji je snažno povezan s tipografijom općenito, a posebno s fontom Segoe.

Nije iznenađenje da ideja o korištenju ovih fontova na webu postaje sve popularnija. Možda želite naglasiti razliku između sadržaja i korisničkog sučelja, možda želite učiniti da vaša stranica izgleda kao aplikacija ili jednostavno želite koristiti lijepi fontovi bez ikakvog odlaganja.

Ali njihova upotreba nije tako jednostavna kao što bismo željeli. CSS podrška za ove fontove pomalo je psihodelična.

Napomena: "font sučelja sustava" je font koji se koristi za renderiranje sučelja operativnog sustava - ne treba ga brkati sa sistemskim fontovima, odnosno fontovima instaliranim na sustavu korisnika.

Dva pristupa

Na u trenutku Postoje dva načina korištenja fonta sučelja sustava u tipografiji.

Prvi način

Sastoji se od korištenja kratke "čarobne" CSS deklaracije:

Font: izbornik;

Drugi način

Drugi način je popis naziva svih fontova:

Također ima nedostatke:

Ostale mogućnosti

Možda će vam biti zanimljivo kombinirati oba gore navedena pristupa kako biste postigli najbolji rezultat. Nažalost, to nije lako jer se svojstva fonta i obitelji fontova međusobno isključuju - jedno uvijek prebriše drugo. Moguće je da se nešto može postići manipuliranjem medijskih upita, ali ova metoda je hak.

Također možete pokušati poslati različita značenja CSS s poslužitelja ovisno o korisničkom agentu ili učinite isto koristeći JavaScript (na primjer, pošaljite samo obitelj fonta: "Fira Sans", sans-serif; za Firefox OS). Ali ova je opcija glomazna, teška za podršku i, što je najvažnije, ne rješava sve probleme.

Što sada učiniti?

Medij trenutno koristi drugu metodu:

Obitelj fontova: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

Odabran je jer ima manje veliki problemi. (Prva metoda ne funkcionira na mobilnim uređajima, s potpuno neprihvatljivim posljedicama; druga metoda također ima problema, ali ih je manje i nisu toliko kritični. Vaša ocjena ovih metoda može biti drugačija).

Ovu tehniku ​​možemo unaprijediti zajedničkim naporima. Ispod je blok s tekstom koji bi trebao biti prikazan u fontu sučelja vašeg sustava. Ako ne radi ili imate bilo kakva razmišljanja o tome, ostavite komentar.

Ovo bi trebalo biti prikazano u fontu korisničkog sučelja vašeg sustava. Brza smeđa lisica preskače lijenog psa. Ovaj tekst trebao bi biti prikazan u fontu sučelja sustava.

Detaljan pregled popisa fontova

Trenutno ova metoda ima sljedeće probleme:

• Najmanje do prosinca 2015., Firefox na Mac OS X će koristiti Neue Helveticu umjesto San Francisca.
• Također na Mac OS X, Neue Helvetica se prikazuje umjesto Lucida Grande na verzijama prije Yosemitea.
• U manje popularan operativni sustavi i složenije konfiguracije pravi izbor ispraviti font još je teže.

Ako vas zanimaju detalji, pogledajmo kako bi ovaj popis trebao izgledati da bi ispravno funkcionirao:

Obitelj fontova: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

Prva grupa sadrži svojstva koja se odnose na fontove sučelja sustava. Prilično su pouzdani i nema šanse da će ih preglednik zamijeniti s drugima:

• -apple-sustav pokriva San Francisco u Safariju na Mac OS X i iOS, te na starijim verzijama Mac OS X, Neue Helvetica i Lucida Grande. Ova vrijednost automatski bira između San Francisco Text i San Francisco Display ovisno o veličini fonta.
• BlinkMacSystemFont je ekvivalent prethodne vrijednosti i radi u Chromeu na Mac OS X.

U sljedeća grupa Dobro poznati fontovi sučelja sustava su istaknuti:

• Segoe UI pokriva Windows i Windows Phone.
• Roboto je Android i novi Chrome OS. Postavljen je nakon korisničkog sučelja Segoe kako bi se prilagodio programerima za Android koji rade na Windowsima s instaliranim Robotom, tako da Roboto ne zamjenjuje korisničko sučelje Segoe.
• Oxygen je KDE font, Ubuntu je, naravno, Ubuntu, a Cantarell je GNOME. Tri fonta za Linux odjednom, ali s obzirom na obilje distribucijskih kompleta, oni ne rješavaju problem.
• Fira Sans font Firefox OS.
• Droid Sans - stare verzije Androida.
• Imajte na umu da ne navodimo naziv fonta San Francisco. Na iOS-u i Mac OS X-u San Francisco se pojavljuje kao "skriveni font", a ne kao javni font.
• Također ne navodimo San Francisco, koristeći .SFNSText-Regular, interni PostScript naziv za San Francisco na Mac OS X. Radi samo u Chromeu i manje je fleksibilan od BlinkMacSystemFont.

U trećoj skupini imamo fontove koji se koriste kao rezervni:

• Helvetica Neue se koristi u Mac OS X prije El Capitana. Font je naveden na samom kraju popisa zbog široke upotrebe.
• sans-serif je tradicionalna zamjena za zadani sans-serif font.

Evolucija fontova sučelja sustava u sustavu Windows dramatičnija je nego na Macu - od monospacednog Windows 1.0 bitmap fonta 1985. do font visoke rezolucije Segoe UI u sustavu Windows 10. (veća verzija)

Budućnost

Ovdje se još ima s čime raditi. Počnimo s činjenicom da tehnika funkcionira samo sa zapadnom tipografijom. Također ćete imati problema ako želite uskladiti ispunu ili visinu linije kako bi odgovarali fontu sučelja koji koristite - u kojem slučaju ćete morati koristiti hibridni pristup ili detektirati fontove nakon renderiranja.

Ipak, dobiveni rezultati su dobri. Nadamo se da će sve to u budućnosti biti manje komplicirano. Ako ste i vi zainteresirani za ovo, obavijestite dobavljače vašeg preglednika.

Posljednje tri verzije Mac OS X koriste tri različita fonta sučelja: Lucida Grande na Mac OS 10.9 (Mavericks); posebna verzija Neue Helvetice na Mac OS 10.10 (Yosemite); posebna verzija San Francisca na Mac OS 10.11 (El Capitan). Logično je pretpostaviti da će se San Francisco koristiti u budućim verzijama. (