Typographie de conception de matériaux – Titres, Titres, Espacement, Apparence de texte

J'ai suivi les directives officielles de conception de matériaux de Google ( http://www.google.com/design/spec/style/typography.html ) sur la typographie, mais je trouve qu'elles manquent. Par exemple, ils énumèrent 10 styles que vous devriez utiliser pour des choses comme le corps, le sous-titre, le titre, l'affichage du titre1, l'affichage2, etc. tapez du texte dans votre application … Cela m'amène au premier problème.

Problème n ° 1: comment est-ce que l'on sait ce qu'est un «sous-titre» ou un «titre» par rapport à «titre», ou quand «affichage1» doit-il être utilisé par opposition à «affichage4», y a-t-il des normes pour ces éléments?

  • Quel type de fichiers de police ai-je besoin pour les navigateurs modernes, Android et IOS?
  • Quelles polices sont installées par défaut sur Android?
  • Définissez une police spécifique dans styles.xml
  • RuntimeException: la police de caractères native ne peut pas être créée
  • Comment Android crée-t-il une police personnalisée dans un canevas?
  • Comment obtenir la typicité par défaut de l'appareil Android?
  • En outre, les lignes directrices indiquent que l'espace de pointe devrait être intégré à la hauteur de ligne du texte. Par conséquent, le problème 2.

    Problème 2 #: Comment puis-je ajouter de l'espace "leader" pour le texte dans Android, cette orientation Android pertinente?

    Problème n ° 3: Bien que j'ai téléchargé la dernière version de Roboto, mes polices moyennes semblent absolument audacieuses, par opposition aux polices moyennes élégantes et légèrement plus épais de Google, comment puis-je confirmer que ma police est vraiment différente de Googles?

    Merci beaucoup

    One Solution collect form web for “Typographie de conception de matériaux – Titres, Titres, Espacement, Apparence de texte”

    "Montrez-moi le code": pas le mien, mais voir le commentaire ci-dessous pour une option, et aussi comment Plaid app (Butcher) a tordu les défis de la typographie en visitant sa source sur Github (classe BaselineGridTextView ).

    Avertissement: Je ne suis en aucun cas une référence sur ce sujet, mais votre question est d'un mois sans aucune réponse, même si elle est importante et son importance ne fera que progresser à partir de maintenant. Cela dit, je vais essayer, au moins, de donner du peu de lumière et d'offrir ma tête en raison des erreurs possibles.

    Problème n ° 1: comment est-ce que l'on sait ce qu'est un «sous-titre» ou un «titre» par rapport à «titre», ou quand «affichage1» doit-il être utilisé par opposition à «affichage4», y a-t-il des normes pour ces éléments?

    Ce sont des entités textuelles courantes et standardisées qui nous sont venues des traditions dans l'édition imprimée.

    • Affichage : grand texte, normalement utilisé dans des affiches, des slogans attrayants, des objets qui exigent et font l'objet d'une attention particulière, qui devraient attirer l'attention lorsque l'utilisateur ne regarde pas. Il est moins lisible exactement car il devrait être très court (attirer l'attention à la fois, ne pas faire partie d'un flux étendu). J'imagine que les 4 différentes tailles d'affichage dans Matériels Design ne sont que des soins supplémentaires de Matias et de son équipe, mais je doute que les applications utiliseront plus de 1 taille d'affichage (peut-être des magazines et des applications rich media, peut-être). La plupart des applications n'utiliseront même aucune taille d'affichage.
    • Titre : traditionnellement, je crois, si ma compréhension superficielle de ce sujet est juste, les tailles des titres sont utilisées comme des mots – clés courts de l'histoire. Pas une description, juste un slogan, un court message. Un exemple de titre: ASSASSIN KILLS KENNEDY . Dans les applications courantes suivant la conception du matériau, il est utilisé comme sujet principal d'un écran (comme les pages d'un journal) . Je pense (comme ce n'est pas certain) que cela peut être appelé «titre» ailleurs.
    • Titre : honnêtement, il est très générique, et en raison de sa taille modeste (par rapport au titre et à l'affichage), c'est l'un des styles que j'utilise le plus: il est très utile dans des endroits au-dessus d'un bloc de texte. Par exemple, "Eula" comme titre pour le texte d'eula qui suit ce titre, ou "Auteurs" immédiatement avant une liste d'auteurs. Il est largement utilisé dans le cadre ainsi .
    • Sous-titre: ceci est plus précis. Il s'agit d'un diplôme immédiat et inférieur à «titre» et sert à fournir des extraits, des citations ou une brève description du bloc de texte qui suit. Exemple d'un sous-titre (suivant l'exemple du titre): Gouverneur du Texas Blessé, marxiste accusé de meurtre . Dans la conception de matériaux, en raison de la taille, l'endroit le plus courant dans lequel j'ai été utilisé est dans un élément de liste de deux éléments , exactement parce qu'il est utilisé comme extrait d'un courrier électronique (pour fournir une vue d'ensemble) ou en tant que numéro de téléphone ( Un détail de l'actif le plus important pour une personne donnée dans une liste de téléphone).
    • Corps : texte principal. Assez évident. Le plus lisible de tous et la seule option pour les textes longs.
    • Légende : notes de bas de page et petit texte. Dans l'impression, il est largement utilisé comme légende des images. Dans Holo, je pense (comme dans pas sûr), il a été utilisé comme texte diviseur (mais dans tous les casquettes). Dans la conception des matériaux, je pense que les séparateurs ont cessé d'utiliser le texte de la légende et utilisent le "corps" avec la couleur claire.

    D'autres programmes utilisent ces concepts (partie ou tous) eux-mêmes avec des variations légères:

    • Styles de texte des processeurs de texte;
    • Les paramètres de police dans les logiciels d'image comme Photoshop, Illustrator et ainsi de suite.
    • Dimensionnement optique des polices. Adobe, par exemple, utilise "légende", "régulier", "sous-tête" et "affichage" , qui, comme vous pouvez le voir, est destiné à compléter le calibrage et la mise en page avec des formes de police spécialement conçues pour différentes tailles;

    Le concept général semble être que ce sont des entités abstraites qui représentent des gradients d'importance dans les ensembles de texte, et peuvent avoir des règles flexibles entre les publications tant qu'elles sont utilisées de manière cohérente dans une publication, un thème, une application, etc.

    Problème 2 #: Comment puis-je ajouter un espace "leader" pour le texte dans Android,

    Ceci est pour les endroits où vous mélangez TextView s avec différents styles, comme dans l' exemple d'image (ou avec des TextView de texte, bien sur).

    Permettez-moi d'être honnête: en ce moment, à des fins d'urgence, j'utilise mes yeux avec des grilles superposées pour vérifier ma tête. Je commence par la taille principale, puis je soustrait la taille de la police de la ligne de texte suivante et une petite quantité en tant que descendant de la ligne actuelle. Ensuite, je fais de petits petits ajustements optiques si nécessaire. Ce serait bien que ces éléments (x-height, cap height, descender etc.) puissent être calculés exactement , mais je ne me suis pas encore plongé (mais c'est probablement possible). Je suis satisfait de mon "eyeometer" alors que je ne perfectionne pas MD dans mes mises en page.

    Cependant, et j'ai simplement examiné ceci (ne l'ai pas essayé), je crois que vous pouvez plonger dans FontMetrics , mesurer les champs et appliquer les dimensions appropriées à la volée entre les deux TextView s ci-dessus. J'essayerais d'abord ( ascent de la prochaine et de la descent de la précédente).

    Cette orientation Android pertinente?

    Oui, ça l'est. Beaucoup. Placez un texte en dessous d'un autre, quand ils ont des styles différents. Comme un titre suivi d'un corps, et essayez simplement de prendre une hypothèse sauvage: cela ne fonctionnera pas et votre application ne sera pas compatible avec le système. Voir au dessus.

    Problème n ° 3: Bien que j'ai téléchargé la dernière version de Roboto, mes polices moyennes semblent absolument audacieuses, par opposition aux polices moyennes élégantes et légèrement plus épais de Google, comment puis-je confirmer que ma police est vraiment différente de Googles?

    Veuillez nous dire où exactement vous obtenez les deux échantillons à comparer. Le rendu des polices peut être affecté par de nombreuses choses différentes, et chaque système utilise ses propres algorithmes d'insinuation, en plus de beaucoup d'autres choses. Il existe de légères variations même entre différentes versions de Roboto et différentes versions d'Android. Sûrement moyen "gras" par rapport à régulier, mais pas vraiment audacieux.

    Vous pouvez vérifier les polices dans votre dossier sdk / platform / android- APIVERSION / data / fonts . Rendu avec Ubuntu 15.04 (légère indication), hors de la boîte, à partir de l' Android-22 :

    Roboto noir

    Roboto bold

    Roboto moyen

    Roboto régulier

    Roboto light

    Roboto mince

    Je pense que cela reste conforme à l' échantillon .

    Pour comparer avec quelque chose aussi largement disponible, il s'agit (partie de) de la famille de polices Ubuntu (régulière, moyenne et audacieuse, respectivement). À mon avis, le moyen est également plus proche de gras que régulier:

    Ubuntu régulier

    Milieu Ubuntu

    Ubuntu bold

    Minion Pro (régulier, moyen, semi et gras). Il est plus légèrement pondéré, peut-être parce qu'il offre également une variante semibold, mais nous parlons d'une police Serif faite pour des impressions fines et avec beaucoup plus de temps sur le marché pour avoir été continuellement raffinée:

    Minion Pro régulier

    Minion Pro medium

    Minion Pro semibold

    Minion Pro bold

    J'espère que ça aide.

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.